diff --git a/.github/workflows/actions/publish-npm/action.yml b/.github/actions/publish-npm/action.yml similarity index 54% rename from .github/workflows/actions/publish-npm/action.yml rename to .github/actions/publish-npm/action.yml index 5c5b49d56c6..3e58ba9bcc6 100644 --- a/.github/workflows/actions/publish-npm/action.yml +++ b/.github/actions/publish-npm/action.yml @@ -8,48 +8,53 @@ inputs: tag: description: 'The tag to publish to on NPM.' preid: - description: 'The prerelease identifier used when doing a prerelease.' + description: "Prerelease identifier such as 'alpha', 'beta', 'rc', or 'next'. Leave blank to skip prerelease tagging." working-directory: description: 'The directory of the package.' folder: default: './' description: 'A folder containing a package.json file.' - token: - description: 'The NPM authentication token required to publish.' + node-version: + description: 'Node.js version to use when publishing.' + required: false + default: '24.x' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - name: 🟒 Configure Node for Publish + uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: ${{ inputs.node-version }} + registry-url: 'https://registry.npmjs.org' + scope: '@ionic' # Provenance requires npm 9.5.0+ - - name: Install latest npm + - name: πŸ“¦ Install latest npm run: npm install -g npm@latest shell: bash # This ensures the local version of Lerna is installed # and that we do not use the global Lerna version - - name: Install root dependencies + - name: πŸ•ΈοΈ Install root dependencies run: npm ci shell: bash - - name: Install Dependencies + - name: πŸ“¦ Install Dependencies run: npx lerna@5 bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps shell: bash working-directory: ${{ inputs.working-directory }} - - name: Update Version - run: npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }} + - name: 🏷️ Set Version + run: | + if [ -z "${{ inputs.preid }}" ]; then + npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version + else + npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }} + fi shell: bash working-directory: ${{ inputs.working-directory }} - - name: Run Build + - name: πŸ—οΈ Run Build run: npm run build shell: bash working-directory: ${{ inputs.working-directory }} - - name: Prepare NPM Token - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc - working-directory: ${{ inputs.working-directory }} - shell: bash - env: - NPM_TOKEN: ${{ inputs.token }} - - name: Publish to NPM + - name: πŸš€ Publish to NPM run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance shell: bash working-directory: ${{ inputs.working-directory }} + diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml index c48d1dcb3b6..0bf8392c2b5 100644 --- a/.github/workflows/actions/build-angular-server/action.yml +++ b/.github/workflows/actions/build-angular-server/action.yml @@ -3,23 +3,23 @@ description: 'Build Ionic Angular Server' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Install Angular Server Dependencies + - name: πŸ•ΈοΈ Install Angular Server Dependencies run: npm ci shell: bash working-directory: ./packages/angular-server - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/angular-server - - name: Build + - name: πŸ—οΈ Build run: npm run build.prod shell: bash working-directory: ./packages/angular-server diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml index 349c6734e43..fc7496de421 100644 --- a/.github/workflows/actions/build-angular/action.yml +++ b/.github/workflows/actions/build-angular/action.yml @@ -3,31 +3,31 @@ description: 'Build Ionic Angular' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@v6 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Install Angular Dependencies + - name: πŸ•ΈοΈ Install Angular Dependencies run: npm ci shell: bash working-directory: ./packages/angular - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/angular - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./packages/angular - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/angular - - name: Check Diff + - name: πŸ” Check Diff run: git diff --exit-code shell: bash working-directory: ./packages/angular diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml index e685e789182..1427918c127 100644 --- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml +++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml @@ -8,20 +8,20 @@ inputs: runs: using: 'composite' steps: - - uses: actions/checkout@v5 - - uses: actions/setup-node@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm ci working-directory: ./core shell: bash - - name: Install Stencil ${{ inputs.stencil-version }} + - name: πŸ“¦ Install Stencil ${{ inputs.stencil-version }} working-directory: ./core run: npm i @stencil/core@${{ inputs.stencil-version }} shell: bash - - name: Build Core + - name: πŸ—οΈ Build Core run: npm run build -- --ci --debug --verbose working-directory: ./core shell: bash diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml index bd63eced900..6a6f392a387 100644 --- a/.github/workflows/actions/build-core/action.yml +++ b/.github/workflows/actions/build-core/action.yml @@ -8,22 +8,22 @@ inputs: runs: using: 'composite' steps: - - uses: actions/checkout@v5 - - uses: actions/setup-node@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x - - name: Install Dependencies + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies run: npm install working-directory: ./core shell: bash # If an Ionicons version was specified install that. # Otherwise just use the version defined in the package.json. - - name: Install Ionicons Version + - name: πŸ“¦ Install Ionicons Version if: inputs.ionicons-version != '' run: npm install ionicons@${{ inputs.ionicons-version }} working-directory: ./core shell: bash - - name: Build Core + - name: πŸ—οΈ Build Core run: npm run build -- --ci working-directory: ./core shell: bash diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml index 61d5f6b2d45..fd997ea2386 100644 --- a/.github/workflows/actions/build-react-router/action.yml +++ b/.github/workflows/actions/build-react-router/action.yml @@ -3,9 +3,9 @@ description: 'Build Ionic React Router' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -16,19 +16,19 @@ runs: name: ionic-react path: ./packages/react filename: ReactBuild.zip - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm ci shell: bash working-directory: ./packages/react-router - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/react-router - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./packages/react-router - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/react-router diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml index 6b8b9f74178..5de023a258f 100644 --- a/.github/workflows/actions/build-react/action.yml +++ b/.github/workflows/actions/build-react/action.yml @@ -3,35 +3,35 @@ description: 'Build Ionic React' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Install React Dependencies + - name: πŸ•ΈοΈ Install React Dependencies run: npm ci shell: bash working-directory: ./packages/react - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/react - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./packages/react - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/react - - name: Test Spec + - name: πŸ§ͺ Test Spec run: npm run test.spec shell: bash working-directory: ./packages/react - - name: Check Diff + - name: πŸ” Check Diff run: git diff --exit-code shell: bash working-directory: ./packages/react diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml index e1c7716f5ea..b2e375bb7ae 100644 --- a/.github/workflows/actions/build-vue-router/action.yml +++ b/.github/workflows/actions/build-vue-router/action.yml @@ -3,9 +3,9 @@ description: 'Builds Ionic Vue Router' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -16,23 +16,23 @@ runs: name: ionic-vue path: ./packages/vue filename: VueBuild.zip - - name: Install Vue Router Dependencies + - name: πŸ•ΈοΈ Install Vue Router Dependencies run: npm ci shell: bash working-directory: ./packages/vue-router - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/vue-router - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./packages/vue-router - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/vue-router - - name: Test Spec + - name: πŸ§ͺ Test Spec run: npm run test.spec shell: bash working-directory: ./packages/vue-router diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml index bc8a47facc2..317f6f124ab 100644 --- a/.github/workflows/actions/build-vue/action.yml +++ b/.github/workflows/actions/build-vue/action.yml @@ -3,31 +3,31 @@ description: 'Build Ionic Vue' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Install Vue Dependencies + - name: πŸ•ΈοΈ Install Vue Dependencies run: npm ci shell: bash working-directory: ./packages/vue - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/vue - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./packages/vue - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/vue - - name: Check Diff + - name: πŸ” Check Diff run: git diff --exit-code shell: bash working-directory: ./packages/vue diff --git a/.github/workflows/actions/download-archive/action.yml b/.github/workflows/actions/download-archive/action.yml index 343e2451bce..70f201e3d67 100644 --- a/.github/workflows/actions/download-archive/action.yml +++ b/.github/workflows/actions/download-archive/action.yml @@ -10,10 +10,10 @@ inputs: runs: using: 'composite' steps: - - uses: actions/download-artifact@v5 + - uses: actions/download-artifact@v6 with: name: ${{ inputs.name }} path: ${{ inputs.path }} - - name: Extract Archive + - name: πŸ”Ž Extract Archive run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }} shell: bash diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml index cd7ebfe0aec..0b99e99f1e2 100644 --- a/.github/workflows/actions/test-angular-e2e/action.yml +++ b/.github/workflows/actions/test-angular-e2e/action.yml @@ -6,9 +6,9 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -24,23 +24,23 @@ runs: name: ionic-angular-server path: ./packages/angular-server filename: AngularServerBuild.zip - - name: Create Test App + - name: πŸ§ͺ Create Test App run: ./build.sh ${{ inputs.app }} shell: bash working-directory: ./packages/angular/test - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm install shell: bash working-directory: ./packages/angular/test/build/${{ inputs.app }} - - name: Install Playwright Browsers + - name: πŸ“¦ Install Playwright Browsers run: npx playwright install shell: bash working-directory: ./packages/angular/test/build/${{ inputs.app }} - - name: Sync Built Changes + - name: πŸ”„ Sync Built Changes run: npm run sync shell: bash working-directory: ./packages/angular/test/build/${{ inputs.app }} - - name: Run Tests + - name: πŸ§ͺ Run Tests run: npm run test shell: bash working-directory: ./packages/angular/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml index ea6da763fd9..1f78cfaef74 100644 --- a/.github/workflows/actions/test-core-clean-build/action.yml +++ b/.github/workflows/actions/test-core-clean-build/action.yml @@ -3,16 +3,16 @@ description: 'Test Core Clean Build' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Check Diff + - name: πŸ” Check Diff run: | git diff --exit-code || { echo -e "\033[1;31m⚠️ Error: Differences Detected ⚠️\033[0m" diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml index b0e45abdaea..35fc84da48a 100644 --- a/.github/workflows/actions/test-core-lint/action.yml +++ b/.github/workflows/actions/test-core-lint/action.yml @@ -3,21 +3,21 @@ description: 'Test Core Lint' runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x - - name: Install Dependencies + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies run: npm ci working-directory: ./core shell: bash - - name: Lint + - name: πŸ–ŒοΈ Lint run: npm run lint shell: bash working-directory: ./core # Lint changes should be pushed # to the branch before the branch # is merge eligible. - - name: Check Lint Results + - name: πŸ”Ž Check Lint Results run: git diff --exit-code shell: bash working-directory: ./core diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index f3d599f02ca..0c3965d632d 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -13,19 +13,19 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm install shell: bash working-directory: ./core - - name: Test + - name: πŸ§ͺ Test if: inputs.update != 'true' run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} shell: bash @@ -60,13 +60,13 @@ runs: fi shell: bash working-directory: ./core - - name: Archive Updated Screenshots + - name: πŸ“¦ Archive Updated Screenshots if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true' - uses: actions/upload-artifact@v4 + uses: actions/upload-artifact@v5 with: name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }} path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip - - name: Archive Test Results + - name: πŸ“¦ Archive Test Results # The always() ensures that this step # runs even if the previous step fails. # We want the test results to be archived diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml index cdec48fabff..af0684d243e 100644 --- a/.github/workflows/actions/test-core-spec/action.yml +++ b/.github/workflows/actions/test-core-spec/action.yml @@ -6,14 +6,14 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x - - name: Install Dependencies + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies run: npm ci working-directory: ./core shell: bash - - name: Install Stencil ${{ inputs.stencil-version }} + - name: πŸ“¦ Install Stencil ${{ inputs.stencil-version }} run: npm install @stencil/core@${{ inputs.stencil-version }} shell: bash working-directory: ./core @@ -23,7 +23,7 @@ runs: name: ionic-core path: ./core filename: CoreBuild.zip - - name: Test + - name: πŸ§ͺ Test run: npm run test.spec -- --ci shell: bash working-directory: ./core diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml index 3cf40c29b86..ad5148d9151 100644 --- a/.github/workflows/actions/test-react-e2e/action.yml +++ b/.github/workflows/actions/test-react-e2e/action.yml @@ -6,9 +6,9 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -24,23 +24,23 @@ runs: name: ionic-react-router path: ./packages/react-router filename: ReactRouterBuild.zip - - name: Create Test App + - name: πŸ§ͺ Create Test App run: ./build.sh ${{ inputs.app }} shell: bash working-directory: ./packages/react/test - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm install shell: bash working-directory: ./packages/react/test/build/${{ inputs.app }} - - name: Sync Built Changes + - name: πŸ”„ Sync Built Changes run: npm run sync shell: bash working-directory: ./packages/react/test/build/${{ inputs.app }} - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/react/test/build/${{ inputs.app }} - - name: Run Tests + - name: πŸ§ͺ Run Tests run: npm run e2e shell: bash working-directory: ./packages/react/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml index f1f0150de11..784e354465a 100644 --- a/.github/workflows/actions/test-react-router-e2e/action.yml +++ b/.github/workflows/actions/test-react-router-e2e/action.yml @@ -6,9 +6,9 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -24,23 +24,23 @@ runs: name: ionic-react-router path: ./packages/react-router filename: ReactRouterBuild.zip - - name: Create Test App + - name: πŸ§ͺ Create Test App run: ./build.sh ${{ inputs.app }} shell: bash working-directory: ./packages/react-router/test - - name: Install Dependencies + - name: πŸ•ΈοΈ Install Dependencies run: npm install shell: bash working-directory: ./packages/react-router/test/build/${{ inputs.app }} - - name: Sync Built Changes + - name: πŸ”„ Sync Built Changes run: npm run sync shell: bash working-directory: ./packages/react-router/test/build/${{ inputs.app }} - - name: Build + - name: πŸ—οΈ Build run: npm run build shell: bash working-directory: ./packages/react-router/test/build/${{ inputs.app }} - - name: Run Tests + - name: πŸ§ͺ Run Tests run: npm run e2e shell: bash working-directory: ./packages/react-router/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml index 905cb319a7f..228732067e9 100644 --- a/.github/workflows/actions/test-vue-e2e/action.yml +++ b/.github/workflows/actions/test-vue-e2e/action.yml @@ -6,9 +6,9 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x + node-version: 24.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core @@ -24,23 +24,23 @@ runs: name: ionic-vue-router path: ./packages/vue-router filename: VueRouterBuild.zip - - name: Create Test App + - name: πŸ§ͺ Create Test App run: ./build.sh ${{ inputs.app }} shell: bash working-directory: ./packages/vue/test - - name: Install Dependencies + - name: πŸ“¦ Install Dependencies run: npm install shell: bash working-directory: ./packages/vue/test/build/${{ inputs.app }} - - name: Sync + - name: πŸ”„ Sync run: npm run sync shell: bash working-directory: ./packages/vue/test/build/${{ inputs.app }} - - name: Run Spec Tests + - name: πŸ§ͺ Run Spec Tests run: npm run test:unit shell: bash working-directory: ./packages/vue/test/build/${{ inputs.app }} - - name: Run E2E Tests + - name: πŸ§ͺ Run E2E Tests run: npm run test:e2e shell: bash working-directory: ./packages/vue/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml index 95d0c7b726b..e6f0aa817a3 100644 --- a/.github/workflows/actions/update-reference-screenshots/action.yml +++ b/.github/workflows/actions/update-reference-screenshots/action.yml @@ -7,13 +7,13 @@ on: runs: using: 'composite' steps: - - uses: actions/setup-node@v5 + - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: - node-version: 22.x - - uses: actions/download-artifact@v5 + node-version: 24.x + - uses: actions/download-artifact@v6 with: path: ./artifacts - - name: Extract Archives + - name: πŸ”Ž Extract Archives # This finds all .zip files in the ./artifacts # directory, including nested directories. # It then unzips every .zip to the root directory @@ -21,7 +21,7 @@ runs: find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \; shell: bash working-directory: ./artifacts - - name: Push Screenshots + - name: πŸ“Έ Push Screenshots # Configure user as Ionitron # and push only the changed .png snapshots # to the remote branch. diff --git a/.github/workflows/actions/upload-archive/action.yml b/.github/workflows/actions/upload-archive/action.yml index 966b80e3a00..e836e84c82d 100644 --- a/.github/workflows/actions/upload-archive/action.yml +++ b/.github/workflows/actions/upload-archive/action.yml @@ -10,10 +10,10 @@ inputs: runs: using: 'composite' steps: - - name: Create Archive + - name: πŸ—„οΈ Create Archive run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }} shell: bash - - uses: actions/upload-artifact@v4 + - uses: actions/upload-artifact@v5 with: name: ${{ inputs.name }} path: ${{ inputs.output }} diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 4800023a635..3c423cc569e 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -22,7 +22,7 @@ jobs: build-core: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-core with: ionicons-version: ${{ inputs.ionicons_npm_release_tag }} @@ -31,21 +31,21 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-clean-build test-core-lint: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-lint test-core-spec: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-spec test-core-screenshot: @@ -62,7 +62,7 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-screenshot with: shard: ${{ matrix.shard }} @@ -90,14 +90,14 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-vue build-vue-router: needs: [build-vue] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-vue-router test-vue-e2e: @@ -108,7 +108,7 @@ jobs: needs: [build-vue, build-vue-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-vue-e2e with: app: ${{ matrix.apps }} @@ -126,14 +126,14 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-angular build-angular-server: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-angular-server test-angular-e2e: @@ -144,7 +144,7 @@ jobs: needs: [build-angular, build-angular-server] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-angular-e2e with: app: ${{ matrix.apps }} @@ -162,14 +162,14 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-react build-react-router: needs: [build-react] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-react-router test-react-router-e2e: @@ -180,7 +180,7 @@ jobs: needs: [build-react, build-react-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-react-router-e2e with: app: ${{ matrix.apps }} @@ -202,7 +202,7 @@ jobs: needs: [build-react, build-react-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-react-e2e with: app: ${{ matrix.apps }} diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 6ac78c8dc83..272e705cf65 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -14,8 +14,8 @@ jobs: permissions: security-events: write steps: - - uses: actions/checkout@v5 - - uses: github/codeql-action/init@v3 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: github/codeql-action/init@v4 with: languages: javascript - - uses: github/codeql-action/analyze@v3 + - uses: github/codeql-action/analyze@v4 diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml index 20746438552..0b4856a399d 100644 --- a/.github/workflows/dev-build.yml +++ b/.github/workflows/dev-build.yml @@ -1,7 +1,11 @@ name: 'Ionic Dev Build' on: - workflow_dispatch: + workflow_call: + +permissions: + contents: read + id-token: write jobs: create-dev-hash: @@ -9,7 +13,7 @@ jobs: outputs: dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }} steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 # A 1 is required before the timestamp # as lerna will fail when there is a leading 0 # See https://github.com/lerna/lerna/issues/2840 @@ -25,13 +29,12 @@ jobs: release-ionic: needs: [create-dev-hash] permissions: + contents: read id-token: write uses: ./.github/workflows/release-ionic.yml with: tag: dev version: ${{ needs.create-dev-hash.outputs.dev-hash }} - secrets: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} get-build: name: Get your dev build! diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml index a0f75e0db6a..fbbdfb8ac93 100644 --- a/.github/workflows/nightly.yml +++ b/.github/workflows/nightly.yml @@ -1,10 +1,11 @@ name: 'Ionic Nightly Build' on: - schedule: - # Run every Monday-Friday - # at 6:00 UTC (6:00 am UTC) - - cron: '00 06 * * 1-5' + workflow_call: + +permissions: + contents: read + id-token: write jobs: create-nightly-hash: @@ -12,7 +13,7 @@ jobs: outputs: nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }} steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 # A 1 is required before the timestamp # as lerna will fail when there is a leading 0 # See https://github.com/lerna/lerna/issues/2840 @@ -30,10 +31,10 @@ jobs: release-ionic: needs: [create-nightly-hash] permissions: + contents: read id-token: write uses: ./.github/workflows/release-ionic.yml + secrets: inherit with: tag: nightly version: ${{ needs.create-nightly-hash.outputs.nightly-hash }} - secrets: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml index 16baa3384c0..e52b8a023b5 100644 --- a/.github/workflows/release-ionic.yml +++ b/.github/workflows/release-ionic.yml @@ -14,23 +14,23 @@ on: preid: description: 'The prerelease identifier used when doing a prerelease.' type: string - secrets: - NPM_TOKEN: - required: true + +permissions: + contents: read + id-token: write jobs: release-core: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 - - uses: ./.github/workflows/actions/publish-npm + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: ./.github/actions/publish-npm with: scope: '@ionic/core' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'core' - token: ${{ secrets.NPM_TOKEN }} - name: Cache Built @ionic/core uses: ./.github/workflows/actions/upload-archive with: @@ -48,34 +48,33 @@ jobs: needs: [release-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/docs built cache uses: ./.github/workflows/actions/download-archive with: name: ionic-docs path: ./packages/docs filename: DocsBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/docs' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'packages/docs' - token: ${{ secrets.NPM_TOKEN }} release-angular: needs: [release-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/angular' tag: ${{ inputs.tag }} @@ -83,7 +82,6 @@ jobs: preid: ${{ inputs.preid }} working-directory: 'packages/angular' folder: './dist' - token: ${{ secrets.NPM_TOKEN }} - name: Cache Built @ionic/angular uses: ./.github/workflows/actions/upload-archive with: @@ -95,21 +93,20 @@ jobs: needs: [release-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/react' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'packages/react' - token: ${{ secrets.NPM_TOKEN }} - name: Cache Built @ionic/react uses: ./.github/workflows/actions/upload-archive with: @@ -121,21 +118,20 @@ jobs: needs: [release-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/vue' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'packages/vue' - token: ${{ secrets.NPM_TOKEN }} - name: Cache Built @ionic/vue uses: ./.github/workflows/actions/upload-archive with: @@ -147,14 +143,14 @@ jobs: needs: [release-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: name: ionic-core path: ./core filename: CoreBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/angular-server' tag: ${{ inputs.tag }} @@ -162,13 +158,12 @@ jobs: preid: ${{ inputs.preid }} working-directory: 'packages/angular-server' folder: './dist' - token: ${{ secrets.NPM_TOKEN }} release-react-router: needs: [release-react] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: @@ -181,20 +176,19 @@ jobs: name: ionic-react path: ./packages/react filename: ReactBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/react-router' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'packages/react-router' - token: ${{ secrets.NPM_TOKEN }} release-vue-router: needs: [release-vue] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - name: Restore @ionic/core built cache uses: ./.github/workflows/actions/download-archive with: @@ -207,11 +201,10 @@ jobs: name: ionic-vue path: ./packages/vue filename: VueBuild.zip - - uses: ./.github/workflows/actions/publish-npm + - uses: ./.github/actions/publish-npm with: scope: '@ionic/vue-router' tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} working-directory: 'packages/vue-router' - token: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/release-orchestrator.yml b/.github/workflows/release-orchestrator.yml new file mode 100644 index 00000000000..2c41ed516f9 --- /dev/null +++ b/.github/workflows/release-orchestrator.yml @@ -0,0 +1,81 @@ +name: 'Release - Ionic Framework' + +on: + schedule: + # Run every Monday-Friday + # at 6:00 UTC (6:00 am UTC) + - cron: '00 06 * * 1-5' + workflow_dispatch: + inputs: + release-type: + description: 'Which Ionic release workflow should run?' + required: true + type: choice + default: dev + options: + - dev + - production + version: + description: 'Which version should be published? (Only for production releases)' + required: false + type: choice + options: + - patch + - minor + - major + - prepatch + - preminor + - premajor + - prerelease + tag: + description: 'Which npm tag should this be published to? (Only for production releases)' + required: false + type: choice + default: latest + options: + - latest + - next + preid: + description: 'Which prerelease identifier should be used? (Only for production releases)' + required: false + type: choice + default: '' + options: + - '' + - alpha + - beta + - rc + - next + +permissions: + contents: read + id-token: write + +jobs: + run-nightly: + if: ${{ github.event_name == 'schedule' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/nightly.yml + secrets: inherit + + run-dev: + if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'dev' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/dev-build.yml + secrets: inherit + + run-production: + if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'production' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/release.yml + secrets: inherit + with: + version: ${{ inputs.version }} + tag: ${{ inputs.tag }} + preid: ${{ inputs.preid }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 084c8af3077..6fcb4b7d5dc 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,54 +1,61 @@ name: 'Ionic Production Release' on: - workflow_dispatch: + workflow_call: inputs: version: + description: 'Which version should be published?' required: true - type: choice - description: Which version should be published? - options: - - patch - - minor - - major - - prepatch - - preminor - - premajor - - prerelease + type: string tag: + description: 'Which npm tag should this be published to?' required: true - type: choice - description: Which npm tag should this be published to? - options: - - latest - - next + type: string preid: - type: choice - description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease". - options: - - '' - - alpha - - beta - - rc - - next + description: 'Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".' + required: false + type: string + +permissions: + contents: read + id-token: write jobs: + validate_version: + name: βœ… Validate Version Input + runs-on: ubuntu-latest + steps: + - name: πŸ”Ž Ensure version is allowed + env: + VERSION: ${{ inputs.version }} + run: | + case "$VERSION" in + patch|minor|major|prepatch|preminor|premajor|prerelease) + exit 0 + ;; + *) + echo "::error::Invalid version input: '$VERSION'. Allowed values: patch, minor, major, prepatch, preminor, premajor, prerelease." + exit 1 + ;; + esac + shell: bash + release-ionic: + needs: [validate_version] permissions: + contents: read id-token: write uses: ./.github/workflows/release-ionic.yml with: tag: ${{ inputs.tag }} version: ${{ inputs.version }} preid: ${{ inputs.preid }} - secrets: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} finalize-release: needs: [release-ionic] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 with: token: ${{ secrets.IONITRON_TOKEN }} fetch-depth: 0 @@ -76,7 +83,7 @@ jobs: needs: [finalize-release] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 # Pull the latest version of the reference # branch instead of the revision that triggered # the workflow otherwise we won't get the commit diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml index 6b24a9d69bb..6af9474e350 100644 --- a/.github/workflows/stencil-nightly.yml +++ b/.github/workflows/stencil-nightly.yml @@ -26,7 +26,7 @@ jobs: build-core-with-stencil-nightly: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-core-stencil-prerelease with: stencil-version: ${{ inputs.npm_release_tag || 'nightly' }} @@ -35,21 +35,21 @@ jobs: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-clean-build test-core-lint: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-lint test-core-spec: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-spec with: stencil-version: ${{ inputs.npm_release_tag || 'nightly' }} @@ -72,7 +72,7 @@ jobs: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-screenshot with: shard: ${{ matrix.shard }} @@ -100,14 +100,14 @@ jobs: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-vue build-vue-router: needs: [build-vue] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-vue-router test-vue-e2e: @@ -118,7 +118,7 @@ jobs: needs: [build-vue, build-vue-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-vue-e2e with: app: ${{ matrix.apps }} @@ -136,14 +136,14 @@ jobs: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-angular build-angular-server: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-angular-server test-angular-e2e: @@ -154,7 +154,7 @@ jobs: needs: [build-angular, build-angular-server] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-angular-e2e with: app: ${{ matrix.apps }} @@ -172,14 +172,14 @@ jobs: needs: [build-core-with-stencil-nightly] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-react build-react-router: needs: [build-react] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-react-router test-react-router-e2e: @@ -190,7 +190,7 @@ jobs: needs: [build-react, build-react-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-react-router-e2e with: app: ${{ matrix.apps }} @@ -212,7 +212,7 @@ jobs: needs: [build-react, build-react-router] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-react-e2e with: app: ${{ matrix.apps }} @@ -225,3 +225,35 @@ jobs: - name: Check build matrix status if: ${{ needs.test-react-e2e.result != 'success' }} run: exit 1 + + send-success-messages: + needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e] + runs-on: ubuntu-latest + if: ${{ !cancelled() && !contains(needs.*.result, 'failure') }} + steps: + - name: Notify success on Discord + run: | + curl -H "Content-Type:application/json" \ + -d '{"embeds": [{"title": "βœ… Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "color": 65280, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \ + ${{secrets.DISCORD_NOTIFY_WEBHOOK}} + - name: Notify success on Slack + run: | + curl -H "Content-Type:application/json" \ + -d '{"title": "βœ… Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \ + ${{secrets.SLACK_NOTIFY_SUCCESS_WEBHOOK}} + + send-failure-messages: + needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e] + runs-on: ubuntu-latest + if: ${{ !cancelled() && contains(needs.*.result, 'failure') }} + steps: + - name: Notify failure on Discord + run: | + curl -H "Content-Type:application/json" \ + -d '{"content": "Alerting <@&1347593178580254761>!", "embeds": [{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "color": 16711680, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \ + ${{secrets.DISCORD_NOTIFY_WEBHOOK}} + - name: Notify failure on Slack + run: | + curl -H "Content-Type:application/json" \ + -d '{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \ + ${{secrets.SLACK_NOTIFY_FAILURE_WEBHOOK}} diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml index ef5dcf31347..8bd687d5b20 100644 --- a/.github/workflows/update-screenshots.yml +++ b/.github/workflows/update-screenshots.yml @@ -26,7 +26,7 @@ jobs: build-core: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/build-core test-core-screenshot: @@ -47,7 +47,7 @@ jobs: needs: [build-core] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 - uses: ./.github/workflows/actions/test-core-screenshot with: shard: ${{ matrix.shard }} @@ -59,7 +59,7 @@ jobs: runs-on: ubuntu-latest needs: [test-core-screenshot] steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 # Normally, we could just push with the # default GITHUB_TOKEN, but that will # not cause the build workflow diff --git a/CHANGELOG.md b/CHANGELOG.md index 47210c4bf27..59418196b5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,74 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + + +### Bug Fixes + +* **datetime:** ensure datetime is shown when intersection observer fails to report visibility ([#30793](https://github.com/ionic-team/ionic-framework/issues/30793)) ([9d781db](https://github.com/ionic-team/ionic-framework/commit/9d781db662d213090d0b7198d0cdc5abb16fed1b)), closes [#30706](https://github.com/ionic-team/ionic-framework/issues/30706) + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + + +### Bug Fixes + +* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2)) + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + + +### Bug Fixes + +* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613) + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + + +### Bug Fixes + +* **checkbox, toggle:** fire ionFocus and ionBlur ([#30733](https://github.com/ionic-team/ionic-framework/issues/30733)) ([54a1c86](https://github.com/ionic-team/ionic-framework/commit/54a1c86d6a5d533b0c8c2d18edc62454a7c17bab)) + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + + +### Bug Fixes + +* **header:** ensure one banner role in condensed header ([#30718](https://github.com/ionic-team/ionic-framework/issues/30718)) ([12084af](https://github.com/ionic-team/ionic-framework/commit/12084af163ed811b9c6bda3c7850fc0c53c60c7b)) +* **header:** prevent flickering during iOS page transitions ([#30705](https://github.com/ionic-team/ionic-framework/issues/30705)) ([820fa28](https://github.com/ionic-team/ionic-framework/commit/820fa2854331722d22efd0e38a1936117477967a)), closes [#25326](https://github.com/ionic-team/ionic-framework/issues/25326) +* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367)) + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + + +### Bug Fixes + +* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611) + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 5be7265795b..d1a86679387 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,74 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + + +### Bug Fixes + +* **datetime:** ensure datetime is shown when intersection observer fails to report visibility ([#30793](https://github.com/ionic-team/ionic-framework/issues/30793)) ([9d781db](https://github.com/ionic-team/ionic-framework/commit/9d781db662d213090d0b7198d0cdc5abb16fed1b)), closes [#30706](https://github.com/ionic-team/ionic-framework/issues/30706) + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + + +### Bug Fixes + +* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2)) + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + + +### Bug Fixes + +* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613) + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + + +### Bug Fixes + +* **checkbox, toggle:** fire ionFocus and ionBlur ([#30733](https://github.com/ionic-team/ionic-framework/issues/30733)) ([54a1c86](https://github.com/ionic-team/ionic-framework/commit/54a1c86d6a5d533b0c8c2d18edc62454a7c17bab)) + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + + +### Bug Fixes + +* **header:** ensure one banner role in condensed header ([#30718](https://github.com/ionic-team/ionic-framework/issues/30718)) ([12084af](https://github.com/ionic-team/ionic-framework/commit/12084af163ed811b9c6bda3c7850fc0c53c60c7b)) +* **header:** prevent flickering during iOS page transitions ([#30705](https://github.com/ionic-team/ionic-framework/issues/30705)) ([820fa28](https://github.com/ionic-team/ionic-framework/commit/820fa2854331722d22efd0e38a1936117477967a)), closes [#25326](https://github.com/ionic-team/ionic-framework/issues/25326) +* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367)) + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + + +### Bug Fixes + +* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611) + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) diff --git a/core/Dockerfile b/core/Dockerfile index 095cde63a4a..50a4687701c 100644 --- a/core/Dockerfile +++ b/core/Dockerfile @@ -1,5 +1,5 @@ # Get Playwright -FROM mcr.microsoft.com/playwright:v1.55.1 +FROM mcr.microsoft.com/playwright:v1.56.1 # Set the working directory WORKDIR /ionic diff --git a/core/package-lock.json b/core/package-lock.json index 7ba1b6e38dc..3f0514541eb 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,21 +1,21 @@ { "name": "@ionic/core", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { "@phosphor-icons/core": "^2.1.1", - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.10.2", + "@axe-core/playwright": "^4.11.0", "@capacitor/core": "^7.0.0", "@capacitor/haptics": "^7.0.0", "@capacitor/keyboard": "^7.0.0", @@ -23,7 +23,7 @@ "@clack/prompts": "^0.11.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", - "@playwright/test": "^1.55.1", + "@playwright/test": "^1.56.1", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.10.0", @@ -37,6 +37,7 @@ "chalk": "^5.3.0", "clean-css-cli": "^5.6.1", "domino": "^2.1.6", + "esbuild": "^0.27.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-custom-rules": "file:custom-rules", @@ -44,12 +45,11 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "outsystems-design-tokens": "^1.3.2", + "outsystems-design-tokens": "^1.3.4", "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", "serve": "^14.0.1", - "style-dictionary": "^5.0.0", "stylelint": "^13.13.1", "stylelint-order": "^4.1.0" } @@ -60,12 +60,13 @@ "dev": true }, "node_modules/@axe-core/playwright": { - "version": "4.10.2", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.2.tgz", - "integrity": "sha512-6/b5BJjG6hDaRNtgzLIfKr5DfwyiLHO4+ByTLB0cJgWSM8Ll7KqtdblIS6bEkwSF642/Ex91vNqIl3GLXGlceg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.0.tgz", + "integrity": "sha512-70vBT/Ylqpm65RQz2iCG2o0JJCEG/WCNyefTr2xcOcr1CoSee60gNQYUMZZ7YukoKkFLv26I/jjlsvwwp532oQ==", "dev": true, + "license": "MPL-2.0", "dependencies": { - "axe-core": "~4.10.3" + "axe-core": "~4.11.0" }, "peerDependencies": { "playwright-core": ">= 1.0.0" @@ -97,6 +98,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -670,6 +672,7 @@ "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", "dev": true, + "license": "ISC", "dependencies": { "deepmerge": "^4.3.1" } @@ -679,6 +682,7 @@ "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-11.0.3.tgz", "integrity": "sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==", "dev": true, + "license": "ISC", "dependencies": { "buffer": "^6.0.3", "events": "^3.3.0", @@ -690,14 +694,15 @@ } }, "node_modules/@bundled-es-modules/glob/node_modules/glob": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz", - "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz", + "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", - "minimatch": "^10.0.3", + "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" @@ -713,10 +718,11 @@ } }, "node_modules/@bundled-es-modules/glob/node_modules/minimatch": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz", - "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==", + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz", + "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/brace-expansion": "^5.0.0" }, @@ -732,6 +738,7 @@ "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz", "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==", "dev": true, + "license": "Apache-2.0", "dependencies": { "assert": "^2.1.0", "buffer": "^6.0.3", @@ -747,6 +754,7 @@ "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.0.tgz", "integrity": "sha512-P6NnjoHyobZgTjynlZSn27d0SUj6j38inlNxFnKZr9qwU7/r6+0Sg2nWkGkIH/pMmXHsvGD8zVe6KUq1UncIjA==", "dev": true, + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -800,13 +808,14 @@ } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz", - "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.0.tgz", + "integrity": "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==", "cpu": [ "ppc64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "aix" @@ -816,13 +825,14 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz", - "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.0.tgz", + "integrity": "sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==", "cpu": [ "arm" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "android" @@ -832,13 +842,14 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz", - "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.0.tgz", + "integrity": "sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "android" @@ -848,13 +859,14 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz", - "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.0.tgz", + "integrity": "sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "android" @@ -864,13 +876,14 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz", - "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.0.tgz", + "integrity": "sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" @@ -880,13 +893,14 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz", - "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.0.tgz", + "integrity": "sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" @@ -896,13 +910,14 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz", - "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.0.tgz", + "integrity": "sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "freebsd" @@ -912,13 +927,14 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz", - "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.0.tgz", + "integrity": "sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "freebsd" @@ -928,13 +944,14 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz", - "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.0.tgz", + "integrity": "sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==", "cpu": [ "arm" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -944,13 +961,14 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz", - "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.0.tgz", + "integrity": "sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -960,13 +978,14 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz", - "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.0.tgz", + "integrity": "sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==", "cpu": [ "ia32" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -976,13 +995,14 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz", - "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.0.tgz", + "integrity": "sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==", "cpu": [ "loong64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -992,13 +1012,14 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz", - "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.0.tgz", + "integrity": "sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==", "cpu": [ "mips64el" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -1008,13 +1029,14 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz", - "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.0.tgz", + "integrity": "sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==", "cpu": [ "ppc64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -1024,13 +1046,14 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz", - "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.0.tgz", + "integrity": "sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==", "cpu": [ "riscv64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -1040,13 +1063,14 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz", - "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.0.tgz", + "integrity": "sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==", "cpu": [ "s390x" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -1056,13 +1080,14 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz", - "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.0.tgz", + "integrity": "sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" @@ -1072,13 +1097,14 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz", - "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.0.tgz", + "integrity": "sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "netbsd" @@ -1088,13 +1114,14 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz", - "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.0.tgz", + "integrity": "sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "netbsd" @@ -1104,13 +1131,14 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz", - "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.0.tgz", + "integrity": "sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "openbsd" @@ -1120,13 +1148,14 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz", - "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.0.tgz", + "integrity": "sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "openbsd" @@ -1136,13 +1165,14 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz", - "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.0.tgz", + "integrity": "sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "openharmony" @@ -1152,13 +1182,14 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz", - "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.0.tgz", + "integrity": "sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "sunos" @@ -1168,13 +1199,14 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz", - "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.0.tgz", + "integrity": "sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" @@ -1184,13 +1216,14 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz", - "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.0.tgz", + "integrity": "sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==", "cpu": [ "ia32" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" @@ -1200,13 +1233,14 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz", - "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.0.tgz", + "integrity": "sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" @@ -1413,6 +1447,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz", "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "4.33.0", "@typescript-eslint/types": "4.33.0", @@ -1588,6 +1623,7 @@ "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==", "dev": true, + "license": "MIT", "engines": { "node": "20 || >=22" } @@ -1597,6 +1633,7 @@ "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz", "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==", "dev": true, + "license": "MIT", "dependencies": { "@isaacs/balanced-match": "^4.0.1" }, @@ -1609,6 +1646,7 @@ "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "dev": true, + "license": "ISC", "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -1622,10 +1660,11 @@ } }, "node_modules/@isaacs/cliui/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", "dev": true, + "license": "MIT", "engines": { "node": ">=12" }, @@ -1638,6 +1677,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", "dev": true, + "license": "MIT", "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -1651,10 +1691,11 @@ } }, "node_modules/@isaacs/cliui/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", + "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", "dev": true, + "license": "MIT", "dependencies": { "ansi-regex": "^6.0.1" }, @@ -2262,6 +2303,41 @@ "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==", "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/buffers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.2.1.tgz", + "integrity": "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/codegen": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/codegen/-/codegen-1.0.0.tgz", + "integrity": "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==", + "dev": true, + "license": "Apache-2.0", "engines": { "node": ">=10.0" }, @@ -2274,15 +2350,41 @@ } }, "node_modules/@jsonjoy.com/json-pack": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.2.0.tgz", - "integrity": "sha512-io1zEbbYcElht3tdlqEOFxZ0dMTYrHz9iMf0gqn1pPjZFTCgM5R4R5IMA20Chb2UPYYsxjzs8CgZ7Nb5n2K2rA==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.21.0.tgz", + "integrity": "sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "@jsonjoy.com/base64": "^1.1.1", - "@jsonjoy.com/util": "^1.1.2", + "@jsonjoy.com/base64": "^1.1.2", + "@jsonjoy.com/buffers": "^1.2.0", + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/json-pointer": "^1.0.2", + "@jsonjoy.com/util": "^1.9.0", "hyperdyperid": "^1.2.0", - "thingies": "^1.20.0" + "thingies": "^2.5.0", + "tree-dump": "^1.1.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pointer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-1.0.2.tgz", + "integrity": "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/util": "^1.9.0" }, "engines": { "node": ">=10.0" @@ -2296,10 +2398,15 @@ } }, "node_modules/@jsonjoy.com/util": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.6.0.tgz", - "integrity": "sha512-sw/RMbehRhN68WRtcKCpQOPfnH6lLP4GJfqzi3iYej8tnzpZUDr6UkZYJjcjjC0FWEJOJbyM3PTIwxucUmDG2A==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.9.0.tgz", + "integrity": "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==", "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/buffers": "^1.0.0", + "@jsonjoy.com/codegen": "^1.0.0" + }, "engines": { "node": ">=10.0" }, @@ -2352,13 +2459,12 @@ "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==" }, "node_modules/@playwright/test": { - "version": "1.55.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.1.tgz", - "integrity": "sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz", + "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "playwright": "1.55.1" + "playwright": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -2552,10 +2658,11 @@ } }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", + "peer": true, "bin": { "stencil": "bin/stencil" }, @@ -3023,6 +3130,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.2.tgz", "integrity": "sha512-KA3E4ox0ws+SPyxQf9iSI25R6b4Ne78ORhNHeVKrPQnoYsb9UhieoiRoJgrzgEeKGOXhcY1i8YtOeCHHTDa6Fw==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "6.7.2", "@typescript-eslint/types": "6.7.2", @@ -3259,7 +3367,6 @@ "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/parser": "^7.25.3", "@vue/shared": "3.5.13", @@ -3274,7 +3381,6 @@ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "engines": { "node": ">=0.12" }, @@ -3287,8 +3393,7 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@vue/compiler-dom": { "version": "3.5.13", @@ -3296,7 +3401,6 @@ "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-core": "3.5.13", "@vue/shared": "3.5.13" @@ -3308,7 +3412,6 @@ "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/parser": "^7.25.3", "@vue/compiler-core": "3.5.13", @@ -3326,8 +3429,7 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@vue/compiler-sfc/node_modules/postcss": { "version": "8.5.3", @@ -3349,7 +3451,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -3365,7 +3466,6 @@ "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.13", "@vue/shared": "3.5.13" @@ -3377,7 +3477,6 @@ "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/shared": "3.5.13" } @@ -3388,7 +3487,6 @@ "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/reactivity": "3.5.13", "@vue/shared": "3.5.13" @@ -3400,7 +3498,6 @@ "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/reactivity": "3.5.13", "@vue/runtime-core": "3.5.13", @@ -3414,7 +3511,6 @@ "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-ssr": "3.5.13", "@vue/shared": "3.5.13" @@ -3428,8 +3524,7 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@zeit/schemas": { "version": "2.21.0", @@ -3438,14 +3533,15 @@ "dev": true }, "node_modules/@zip.js/zip.js": { - "version": "2.7.62", - "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.62.tgz", - "integrity": "sha512-OaLvZ8j4gCkLn048ypkZu29KX30r8/OfFF2w4Jo5WXFr+J04J+lzJ5TKZBVgFXhlvSkqNFQdfnY1Q8TMTCyBVA==", + "version": "2.8.11", + "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.8.11.tgz", + "integrity": "sha512-0fztsk/0ryJ+2PPr9EyXS5/Co7OK8q3zY/xOoozEWaUsL5x+C0cyZ4YyMuUffOO2Dx/rAdq4JMPqW0VUtm+vzA==", "dev": true, + "license": "BSD-3-Clause", "engines": { "bun": ">=0.7.0", "deno": ">=1.0.0", - "node": ">=16.5.0" + "node": ">=18.0.0" } }, "node_modules/accepts": { @@ -3466,6 +3562,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3659,6 +3756,7 @@ "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz", "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==", "dev": true, + "license": "MIT", "dependencies": { "call-bind": "^1.0.2", "is-nan": "^1.3.2", @@ -3703,6 +3801,7 @@ "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", "dev": true, + "license": "MIT", "dependencies": { "possible-typed-array-names": "^1.0.0" }, @@ -3714,10 +3813,11 @@ } }, "node_modules/axe-core": { - "version": "4.10.3", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz", - "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz", + "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==", "dev": true, + "license": "MPL-2.0", "engines": { "node": ">=4" } @@ -3921,7 +4021,8 @@ "type": "consulting", "url": "https://feross.org/support" } - ] + ], + "license": "MIT" }, "node_modules/binary-extensions": { "version": "2.1.0", @@ -4101,6 +4202,7 @@ "url": "https://feross.org/support" } ], + "license": "MIT", "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.2.1" @@ -4315,7 +4417,8 @@ "version": "5.4.4", "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz", "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/char-regex": { "version": "1.0.2", @@ -4691,6 +4794,7 @@ "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz", "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==", "dev": true, + "license": "MIT", "engines": { "node": ">=18" }, @@ -4853,8 +4957,7 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/debug": { "version": "2.6.9", @@ -5225,11 +5328,12 @@ } }, "node_modules/esbuild": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz", - "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz", + "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==", "dev": true, "hasInstallScript": true, + "license": "MIT", "bin": { "esbuild": "bin/esbuild" }, @@ -5237,32 +5341,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.25.9", - "@esbuild/android-arm": "0.25.9", - "@esbuild/android-arm64": "0.25.9", - "@esbuild/android-x64": "0.25.9", - "@esbuild/darwin-arm64": "0.25.9", - "@esbuild/darwin-x64": "0.25.9", - "@esbuild/freebsd-arm64": "0.25.9", - "@esbuild/freebsd-x64": "0.25.9", - "@esbuild/linux-arm": "0.25.9", - "@esbuild/linux-arm64": "0.25.9", - "@esbuild/linux-ia32": "0.25.9", - "@esbuild/linux-loong64": "0.25.9", - "@esbuild/linux-mips64el": "0.25.9", - "@esbuild/linux-ppc64": "0.25.9", - "@esbuild/linux-riscv64": "0.25.9", - "@esbuild/linux-s390x": "0.25.9", - "@esbuild/linux-x64": "0.25.9", - "@esbuild/netbsd-arm64": "0.25.9", - "@esbuild/netbsd-x64": "0.25.9", - "@esbuild/openbsd-arm64": "0.25.9", - "@esbuild/openbsd-x64": "0.25.9", - "@esbuild/openharmony-arm64": "0.25.9", - "@esbuild/sunos-x64": "0.25.9", - "@esbuild/win32-arm64": "0.25.9", - "@esbuild/win32-ia32": "0.25.9", - "@esbuild/win32-x64": "0.25.9" + "@esbuild/aix-ppc64": "0.27.0", + "@esbuild/android-arm": "0.27.0", + "@esbuild/android-arm64": "0.27.0", + "@esbuild/android-x64": "0.27.0", + "@esbuild/darwin-arm64": "0.27.0", + "@esbuild/darwin-x64": "0.27.0", + "@esbuild/freebsd-arm64": "0.27.0", + "@esbuild/freebsd-x64": "0.27.0", + "@esbuild/linux-arm": "0.27.0", + "@esbuild/linux-arm64": "0.27.0", + "@esbuild/linux-ia32": "0.27.0", + "@esbuild/linux-loong64": "0.27.0", + "@esbuild/linux-mips64el": "0.27.0", + "@esbuild/linux-ppc64": "0.27.0", + "@esbuild/linux-riscv64": "0.27.0", + "@esbuild/linux-s390x": "0.27.0", + "@esbuild/linux-x64": "0.27.0", + "@esbuild/netbsd-arm64": "0.27.0", + "@esbuild/netbsd-x64": "0.27.0", + "@esbuild/openbsd-arm64": "0.27.0", + "@esbuild/openbsd-x64": "0.27.0", + "@esbuild/openharmony-arm64": "0.27.0", + "@esbuild/sunos-x64": "0.27.0", + "@esbuild/win32-arm64": "0.27.0", + "@esbuild/win32-ia32": "0.27.0", + "@esbuild/win32-x64": "0.27.0" } }, "node_modules/escalade": { @@ -5288,6 +5392,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz", "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "7.12.11", "@eslint/eslintrc": "^0.4.3", @@ -5899,6 +6004,7 @@ "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.8.x" } @@ -6124,6 +6230,7 @@ "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==", "dev": true, + "license": "MIT", "dependencies": { "is-callable": "^1.2.7" }, @@ -6139,6 +6246,7 @@ "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", "dev": true, + "license": "ISC", "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" @@ -6155,6 +6263,7 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, + "license": "ISC", "engines": { "node": ">=14" }, @@ -6212,6 +6321,16 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "node_modules/generator-function": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz", + "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -6348,6 +6467,23 @@ "node": ">= 6" } }, + "node_modules/glob-to-regex.js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/glob-to-regex.js/-/glob-to-regex.js-1.2.0.tgz", + "integrity": "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/global-modules": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", @@ -6599,6 +6735,7 @@ "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz", "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==", "dev": true, + "license": "MIT", "engines": { "node": ">=10.18" } @@ -6621,7 +6758,8 @@ "type": "consulting", "url": "https://feross.org/support" } - ] + ], + "license": "BSD-3-Clause" }, "node_modules/ignore": { "version": "5.2.4", @@ -6778,6 +6916,7 @@ "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz", "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==", "dev": true, + "license": "MIT", "dependencies": { "call-bound": "^1.0.2", "has-tostringtag": "^1.0.2" @@ -6950,13 +7089,15 @@ } }, "node_modules/is-generator-function": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz", - "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz", + "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==", "dev": true, + "license": "MIT", "dependencies": { - "call-bound": "^1.0.3", - "get-proto": "^1.0.0", + "call-bound": "^1.0.4", + "generator-function": "^2.0.0", + "get-proto": "^1.0.1", "has-tostringtag": "^1.0.2", "safe-regex-test": "^1.1.0" }, @@ -7000,6 +7141,7 @@ "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==", "dev": true, + "license": "MIT", "dependencies": { "call-bind": "^1.0.0", "define-properties": "^1.1.3" @@ -7151,6 +7293,7 @@ "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz", "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==", "dev": true, + "license": "MIT", "dependencies": { "which-typed-array": "^1.1.16" }, @@ -7312,6 +7455,7 @@ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -8989,7 +9133,6 @@ "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } @@ -9110,19 +9253,19 @@ } }, "node_modules/memfs": { - "version": "4.17.2", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.2.tgz", - "integrity": "sha512-NgYhCOWgovOXSzvYgUW0LQ7Qy72rWQMGGFJDoWg4G30RHd3z77VbYdtJ4fembJXBy8pMIUA31XNAupobOQlwdg==", + "version": "4.51.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.51.0.tgz", + "integrity": "sha512-4zngfkVM/GpIhC8YazOsM6E8hoB33NP0BCESPOA6z7qaL6umPJNqkO8CNYaLV2FB2MV6H1O3x2luHHOSqppv+A==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "@jsonjoy.com/json-pack": "^1.0.3", - "@jsonjoy.com/util": "^1.3.0", - "tree-dump": "^1.0.1", + "@jsonjoy.com/json-pack": "^1.11.0", + "@jsonjoy.com/util": "^1.9.0", + "glob-to-regex.js": "^1.0.1", + "thingies": "^2.5.0", + "tree-dump": "^1.0.3", "tslib": "^2.0.0" }, - "engines": { - "node": ">= 4.0.0" - }, "funding": { "type": "github", "url": "https://github.com/sponsors/streamich" @@ -9355,6 +9498,7 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, + "license": "ISC", "engines": { "node": ">=16 || 14 >=14.17" } @@ -9377,7 +9521,6 @@ } ], "license": "MIT", - "peer": true, "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -9498,6 +9641,7 @@ "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", "dev": true, + "license": "MIT", "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1" @@ -9589,49 +9733,30 @@ } }, "node_modules/outsystems-design-tokens": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.3.2.tgz", - "integrity": "sha512-fVo71qNHoswStlwcfHkFw00vOWSKJmUPW4ATnCfulgKc51apsqXh6nYKrjrR6oK786lv7vK0i/3MWNuRXs0GAQ==", + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.3.6.tgz", + "integrity": "sha512-j+m64nl3hfCDRniU47WwlGWDvvdCRI2tQ9DpFtG4l5SLxf1tMTtbuHalrmfKCDWdx3W8eguyF7GKR6mkE7Z37g==", "dev": true, + "license": "BSD-3-Clause", "dependencies": { - "glob": "^11.0.0", + "glob": "^11.1.0", "minimist": "^1.2.8", - "style-dictionary": "^5.0.0" + "style-dictionary": "^5.1.1" }, "bin": { "build.tokens": "scripts/index.js" } }, - "node_modules/outsystems-design-tokens/node_modules/balanced-match": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-3.0.1.tgz", - "integrity": "sha512-vjtV3hiLqYDNRoiAv0zC4QaGAMPomEoq83PRmYIofPswwZurCeWR5LByXm7SyoL0Zh5+2z0+HC7jG8gSZJUh0w==", - "dev": true, - "engines": { - "node": ">= 16" - } - }, - "node_modules/outsystems-design-tokens/node_modules/brace-expansion": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-4.0.1.tgz", - "integrity": "sha512-YClrbvTCXGe70pU2JiEiPLYXO9gQkyxYeKpJIQHVS/gOs6EWMQP2RYBwjFLNT322Ji8TOC3IMPfsYCedNpzKfA==", - "dev": true, - "dependencies": { - "balanced-match": "^3.0.0" - }, - "engines": { - "node": ">= 18" - } - }, "node_modules/outsystems-design-tokens/node_modules/glob": { - "version": "11.0.2", - "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz", - "integrity": "sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz", + "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { - "foreground-child": "^3.1.0", - "jackspeak": "^4.0.1", - "minimatch": "^10.0.0", + "foreground-child": "^3.3.1", + "jackspeak": "^4.1.1", + "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" @@ -9647,12 +9772,13 @@ } }, "node_modules/outsystems-design-tokens/node_modules/minimatch": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.2.tgz", - "integrity": "sha512-+9TJCIYXgZ2Dm5LxVCFsa8jOm+evMwXHFI0JM1XROmkfkpz8/iLLDh+TwSmyIBrs6C6Xu9294/fq8cBA+P6AqA==", + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz", + "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { - "brace-expansion": "^4.0.1" + "@isaacs/brace-expansion": "^5.0.0" }, "engines": { "node": "20 || >=22" @@ -9701,7 +9827,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true + "dev": true, + "license": "BlueOak-1.0.0" }, "node_modules/parent-module": { "version": "1.0.1", @@ -9756,6 +9883,7 @@ "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==", "dev": true, + "license": "MIT", "dependencies": { "process": "^0.11.1", "util": "^0.10.3" @@ -9801,10 +9929,11 @@ "dev": true }, "node_modules/path-scurry": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", - "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz", + "integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==", "dev": true, + "license": "BlueOak-1.0.0", "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" @@ -9817,13 +9946,11 @@ } }, "node_modules/path-scurry/node_modules/lru-cache": { - "version": "11.2.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.0.tgz", - "integrity": "sha512-1oZqnd6TxE/NZyRZ21u+10DKV5sMqT0rJFlPbytSH/0UaXLvE/EurTrd2nDnHif6E1l8N9mothtWs/Um3RijjA==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz", + "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==", "dev": true, - "dependencies": { - "esbuild": "^0.25.9" - }, + "license": "ISC", "engines": { "node": "20 || >=22" } @@ -9847,19 +9974,22 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.2.0.tgz", "integrity": "sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/path/node_modules/inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==", - "dev": true + "dev": true, + "license": "ISC" }, "node_modules/path/node_modules/util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", "dev": true, + "license": "MIT", "dependencies": { "inherits": "2.0.3" } @@ -9904,13 +10034,13 @@ } }, "node_modules/playwright": { - "version": "1.55.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz", - "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz", + "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.55.1" + "playwright-core": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -9923,9 +10053,22 @@ } }, "node_modules/playwright-core": { - "version": "1.55.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz", - "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", + "dev": true, + "peer": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/playwright-core": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", "dev": true, "license": "Apache-2.0", "bin": { @@ -9940,6 +10083,7 @@ "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz", "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -9949,6 +10093,7 @@ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", "dev": true, + "peer": true, "dependencies": { "chalk": "^2.4.2", "source-map": "^0.6.1", @@ -10064,6 +10209,7 @@ "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz", "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==", "dev": true, + "peer": true, "peerDependencies": { "postcss": ">=5.0.0" } @@ -10117,6 +10263,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, + "peer": true, "bin": { "prettier": "bin-prettier.js" }, @@ -10158,6 +10305,7 @@ "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6.0" } @@ -10214,6 +10362,7 @@ "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", "dev": true, + "license": "BSD-3-Clause", "dependencies": { "side-channel": "^1.1.0" }, @@ -10531,6 +10680,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz", "integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==", "dev": true, + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -10587,6 +10737,7 @@ "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz", "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==", "dev": true, + "license": "MIT", "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", @@ -10865,7 +11016,6 @@ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -10953,6 +11103,7 @@ "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz", "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==", "dev": true, + "license": "MIT", "dependencies": { "component-emitter": "^2.0.0" } @@ -11019,6 +11170,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "dev": true, + "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -11032,7 +11184,8 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/string-width/node_modules/emoji-regex": { "version": "8.0.0", @@ -11084,6 +11237,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "dev": true, + "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" }, @@ -11134,10 +11288,11 @@ } }, "node_modules/style-dictionary": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.0.4.tgz", - "integrity": "sha512-+k82riDTHnCpOYzKz1Xa4W219dEOI8pc2a2jnWZuAFY11PHvRL1Ao55Lle3t/kQbiRU5QACdC3xeUNuByaKE3w==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.1.1.tgz", + "integrity": "sha512-scRFwr2VrerXy6BzO2Ym8AI0dRGkAIoS2YhooagytxCFkoXPYCLhvIxg3VO/yD2i4VeU4aGmHG80+ZLdPDb0uw==", "dev": true, + "license": "Apache-2.0", "dependencies": { "@bundled-es-modules/deepmerge": "^4.3.1", "@bundled-es-modules/glob": "^11.0.3", @@ -11164,6 +11319,7 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", "dev": true, + "license": "MIT", "engines": { "node": ">=18" } @@ -11173,6 +11329,7 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", "dev": true, + "license": "MIT", "engines": { "node": ">=12" }, @@ -11181,10 +11338,11 @@ } }, "node_modules/style-dictionary/node_modules/prettier": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", - "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -11550,13 +11708,18 @@ "dev": true }, "node_modules/thingies": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz", - "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz", + "integrity": "sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==", "dev": true, + "license": "MIT", "engines": { "node": ">=10.18" }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, "peerDependencies": { "tslib": "^2" } @@ -11565,7 +11728,8 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/tmpl": { "version": "1.0.5", @@ -11586,10 +11750,11 @@ } }, "node_modules/tree-dump": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.3.tgz", - "integrity": "sha512-il+Cv80yVHFBwokQSfd4bldvr1Md951DpgAGfmhydt04L+YzHgubm2tQ7zueWDcGENKHq0ZvGFR/hjvNXilHEg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.1.0.tgz", + "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==", "dev": true, + "license": "Apache-2.0", "engines": { "node": ">=10.0" }, @@ -11668,7 +11833,8 @@ "node_modules/tslib": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", - "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==", + "peer": true }, "node_modules/tsutils": { "version": "3.21.0", @@ -11853,6 +12019,7 @@ "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz", "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==", "dev": true, + "license": "MIT", "dependencies": { "punycode": "^1.4.1", "qs": "^6.12.3" @@ -11865,13 +12032,15 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", "dev": true, + "license": "MIT", "dependencies": { "inherits": "^2.0.3", "is-arguments": "^1.0.4", @@ -12029,6 +12198,7 @@ "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz", "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==", "dev": true, + "license": "MIT", "dependencies": { "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", @@ -12136,6 +12306,7 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, + "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -12153,6 +12324,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, + "license": "MIT", "dependencies": { "color-convert": "^2.0.1" }, @@ -12168,6 +12340,7 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, + "license": "MIT", "dependencies": { "color-name": "~1.1.4" }, @@ -12179,7 +12352,8 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/wrap-ansi/node_modules/ansi-regex": { "version": "6.0.1", diff --git a/core/package.json b/core/package.json index 6c0ba934a41..84d9565dbcd 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "8.7.5", + "version": "8.7.11", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -32,12 +32,12 @@ ], "dependencies": { "@phosphor-icons/core": "^2.1.1", - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.10.2", + "@axe-core/playwright": "^4.11.0", "@capacitor/core": "^7.0.0", "@capacitor/haptics": "^7.0.0", "@capacitor/keyboard": "^7.0.0", @@ -45,7 +45,7 @@ "@clack/prompts": "^0.11.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", - "@playwright/test": "^1.55.1", + "@playwright/test": "^1.56.1", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.10.0", @@ -59,6 +59,7 @@ "chalk": "^5.3.0", "clean-css-cli": "^5.6.1", "domino": "^2.1.6", + "esbuild": "^0.27.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-custom-rules": "file:custom-rules", @@ -66,12 +67,11 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "outsystems-design-tokens": "^1.3.2", + "outsystems-design-tokens": "^1.3.4", "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", "serve": "^14.0.1", - "style-dictionary": "^5.0.0", "stylelint": "^13.13.1", "stylelint-order": "^4.1.0" }, @@ -80,7 +80,7 @@ "build.css": "npm run css.sass && npm run css.minify", "build.debug": "npm run clean && stencil build --debug", "build.docs.json": "stencil build --docs-json dist/docs.json", - "build.tokens": "npx build.tokens --config scripts/tokens/index.mjs && npm run prettier.tokens", + "build.tokens": "npx build.tokens --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && npm run prettier.tokens", "build.themes": "esbuild src/themes/*/*.tokens.ts --bundle --format=esm --platform=browser --target=es2017 --outdir=themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=themes/utils/theme.js", "clean": "node scripts/clean.js", "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css", diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js index 72b795f099e..9c0ee7d04d4 100644 --- a/core/scripts/testing/scripts.js +++ b/core/scripts/testing/scripts.js @@ -1,27 +1,63 @@ +/** + * This script is loaded in testing environments to set up the + * document based on URL parameters. + * + * Test pages (e.g., `chip/test/basic/index.html`) are set to use + * URL query parameters. + * + * Playwright test environments (e.g., `chip/test/basic/chip.e2e.ts`) + * are set based on whether `setContent` or `goto` has been used: + * - `setContent` uses URL hash parameters. Tests will break if + * query parameters are used. + * - `goto` uses URL query parameters. + * + * The following URL parameters are supported: + * - `rtl`: Set to `true` to enable right-to-left directionality. + * - `ionic:_testing`: Set to `true` to identify testing environments. + * - `ionic:theme`: Set to `ionic`, `ios`, or `md` to load a specific + * theme. Defaults to `md`. + * - `palette`: Set to `light`, `dark`, `high-contrast`, or + * `high-contrast-dark` to load a specific palette. Defaults to `light`. + */ + const DEFAULT_THEME = 'md'; (function() { + + /** + * The `rtl` param is used to set the directionality of the + * document. This can be `true` or `false`. + */ + const isRTL = window.location.search.indexOf('rtl=true') > -1 || window.location.hash.indexOf('rtl=true') > -1; - if (window.location.search.indexOf('rtl=true') > -1) { + if (isRTL) { document.documentElement.setAttribute('dir', 'rtl'); } - if (window.location.search.indexOf('ionic:_testing=true') > -1) { + /** + * The `ionic:_testing` param is used to identify testing + * environments. + */ + const isTestEnv = window.location.search.indexOf('ionic:_testing=true') > -1 || window.location.hash.indexOf('ionic:_testing=true') > -1; + + if (isTestEnv) { const style = document.createElement('style'); style.innerHTML = ` -* { - caret-color: transparent !important; -}`; + * { + caret-color: transparent !important; + } + `; document.head.appendChild(style); } /** - * The `theme` query param is used to load a specific theme. - * This can be `ionic`, `ios`, or `md`. Default to `md` for tests. - */ + * The `theme` param is used to load a specific theme. + * This can be `ionic`, `ios`, or `md`. Default to `md` for tests. + */ const themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i); + const themeHash = window.location.hash.match(/ionic:theme=([a-z0-9]+)/i); const themeAttr = document.documentElement.getAttribute('theme'); - const themeName = themeQuery?.[1] || themeAttr || DEFAULT_THEME; + const themeName = themeQuery?.[1] || themeHash?.[1] || themeAttr || DEFAULT_THEME; // TODO(): Remove this when the tokens are working for all components // and the themes all use the same bundle @@ -43,12 +79,19 @@ const DEFAULT_THEME = 'md'; } /** - * The `palette` query param is used to load a specific palette - * for the theme. This can be `light`, `dark`, `high-contrast`, + * The `palette` param is used to load a specific palette + * for the theme. + * The dark class will load the dark palette automatically + * if no palette is specified through the URL. + * + * Values can be `light`, `dark`, `high-contrast`, * or `high-contrast-dark`. Default to `light` for tests. */ const paletteQuery = window.location.search.match(/palette=([a-z]+)/); - const paletteName = paletteQuery?.[1] || 'light'; + const paletteHash = window.location.hash.match(/palette=([a-z]+)/); + const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null; + + const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light'; // Load theme tokens if the theme is valid const validThemes = ['ionic', 'ios', 'md']; diff --git a/core/scripts/tokens/index.mjs b/core/scripts/tokens/index.mjs deleted file mode 100644 index ae21aea96a8..00000000000 --- a/core/scripts/tokens/index.mjs +++ /dev/null @@ -1,186 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -// For generating Design Tokens, we use Style Dictionary for several reasons: -// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.). -// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones. -// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time. -// - It can easily scale to different necessities we might have in the future. -import * as utils from './utils.mjs'; -const { - generateShadowValue, - generateFontSizeValue, - generateFontFamilyValue, - generateTypographyOutput, - generateValue, - generateColorUtilityClasses, - generateDefaultSpaceUtilityClasses, - generateSpaceUtilityClasses, - removeConsecutiveRepeatedWords, - setVariablePrefixValue, - setClassesAndScssPrefixValue: setClassesPrefixValue, - generateRadiusUtilityClasses, - generateBorderUtilityClasses, - generateFontUtilityClasses, - generateShadowUtilityClasses, - generateUtilityClasses -} = utils; -import StyleDictionary from 'style-dictionary'; - -const customHeader = `// Do not edit directly, this file was auto-generated.`; -// Set the prefix for classes -setClassesPrefixValue('ion'); -// Set the prefix for variables -setVariablePrefixValue('token'); - -// SCSS variables format -StyleDictionary.registerFormat({ - name: 'scssVariablesFormat', - format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3 - console.log('Generating SCSS variables...'); - - const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives'); - const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale'); - const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border'); - const semanticsProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'semantics'); - const nonPrimitiveScaleBorderSemanticsProperties = dictionary.allTokens.filter( - (prop) => !['primitives', 'scale', 'border', 'semantics'].includes(prop.path[0]) - ); - const typographyProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type === 'typography'); - const otherProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type !== 'typography'); - - // Order: primitives β†’ semantics β†’ scale β†’ border β†’ other β†’ typography - const sortedProperties = [ - ...primitiveProperties, - ...semanticsProperties, - ...scaleProperties, - ...borderProperties, - ...otherProperties, - ...typographyProperties - ]; - - const prefixedVariables = sortedProperties.map((prop) => { - // Remove consecutive repeated words from the token name, like border-border-color - const propName = removeConsecutiveRepeatedWords(prop.name); - - switch (prop.$type) { - case 'boxShadow': - return generateShadowValue(prop, propName); - case 'fontFamilies': - return generateFontFamilyValue(prop, propName, 'scss'); - case 'fontSizes': - return generateFontSizeValue(prop, propName, 'scss'); - case 'typography': - return generateTypographyOutput(prop, propName, true); - default: - return generateValue(prop, propName); - } - }); - - // In v3, the header is added automatically by Style Dictionary. - // The format function should only return the file content. - return [ - customHeader + '\n\n', - '@use "../themes/functions.sizes" as font;\n', - prefixedVariables.join('\n') + '\n', - ].join(''); - }, -}); - -// Create utility-classes -StyleDictionary.registerFormat({ - name: 'cssUtilityClassesFormat', - format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3 - console.log('Generating Utility-Classes...'); - - // Arrays to store specific utility classes - const typographyUtilityClasses = []; - const otherUtilityClasses = []; - - // Generate utility classes for each token - dictionary.allTokens.map((prop) => { - const tokenCategory = prop.attributes.category; - - if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') { - // Not creating for the tokens below, as they make no sense to exist as utility-classes. - return; - } - - // Remove consecutive repeated words from the token name, like border-border-color - const propName = removeConsecutiveRepeatedWords(prop.name); - - if (prop.$type === 'typography') { - // Typography tokens are handled differently, as each might have a different tokenType - return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false)); - } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) { - // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens - return otherUtilityClasses.push(generateRadiusUtilityClasses(propName)); - } - - let utilityClass = ''; - switch (tokenCategory) { - case 'color': - case 'primitives': - case 'semantics': - case 'text': - case 'bg': - case 'icon': - case 'state': - utilityClass = generateColorUtilityClasses(prop, propName); - break; - case 'border': - utilityClass = generateBorderUtilityClasses(prop, propName); - break; - case 'font': - utilityClass = generateFontUtilityClasses(prop, propName); - break; - case 'space': - utilityClass = generateSpaceUtilityClasses(prop, propName); - break; - case 'shadow': - case 'elevation': - utilityClass = generateShadowUtilityClasses(propName); - break; - default: - utilityClass = generateUtilityClasses(tokenCategory, propName); - } - - return otherUtilityClasses.push(utilityClass); - }); - - const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses(); - otherUtilityClasses.push(defaultSpaceUtilityClasses); - - // Concatenate typography utility classes at the beginning - const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n'); - - // In v3, the header is added automatically by Style Dictionary. - // The format function should only return the file content. - return [ - customHeader + '\n\n', - '@import "./ionic.vars";\n@import "../themes/mixins";\n', - finalOutput, - ].join(''); - }, -}); - -// APPLY THE CONFIGURATION -const config = { - source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"], - platforms: { - scss: { - transformGroup: "scss", - buildPath: './src/foundations/', - files: [ - { - destination: "ionic.vars.scss", - format: "scssVariablesFormat", - }, - { - destination: "ionic.utility.scss", - format: "cssUtilityClassesFormat", - } - ] - } - } -}; - -export default config; \ No newline at end of file diff --git a/core/scripts/tokens/utils.mjs b/core/scripts/tokens/utils.mjs deleted file mode 100644 index c86fb7e34f1..00000000000 --- a/core/scripts/tokens/utils.mjs +++ /dev/null @@ -1,320 +0,0 @@ -let variablesPrefix; // Variable that holds the prefix used on all css variables generated -let classAndScssPrefix; // Variable that holds the prefix used on all css utility-classes and scss variables generated - -// Set the variable prefix value -export function setVariablePrefixValue(prefix) { - variablesPrefix = prefix; - return variablesPrefix; -} - -export function setClassesAndScssPrefixValue(prefix) { - classAndScssPrefix = prefix; - return classAndScssPrefix; -} - -// Generates a valid rgba() color -export function getRgbaValue(propValue) { - // Check if its rgba color - const isRgba = hexToRgba(propValue); - // If it is, then compose rgba() color, otherwise use the normal color - if (isRgba !== null) { - return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`); - } else { - return propValue; - } -} - -// Translates an hex color value to rgb -export function hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - } - : null; -} - -// Translates an hex color value to rgba -function hexToRgba(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100, - } - : null; -} - -// Utility function to remove consecutive repeated words -export function removeConsecutiveRepeatedWords(str) { - return str.replace(/(\b\w+\b)(-\1)+/g, '$1'); -} - -// Generates a reference variable for an alias token type -// (e.g., $ion-border-default: var(--ion-border-default, #d5d5d5) β†’ $ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400)) -export function getAliasReferenceVariable(prop) { - if (typeof prop.$value === 'string' && prop.$value.startsWith('{') && prop.$value.endsWith('}')) { - // Remove curly braces and replace dots with dashes - let ref = prop.$value.slice(1, -1).replace(/\./g, '-'); - // Remove consecutive repeated words (e.g., border-border-radius-0 β†’ border-radius-0) - ref = removeConsecutiveRepeatedWords(ref); - return `$${classAndScssPrefix}-${ref}`; - } - return null; -} - -// Generates a valid box-shadow value from a shadow Design Token structure -export function generateShadowValue(prop, propName) { - const cssShadow = prop.$value.map(shadow => { - // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color - const color = getRgbaValue(shadow.color); - return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`; -}).join(', '); - - return `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`; -} - -// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem -export function generateFontSizeValue(prop, propName, variableType = 'css') { - return variableType === 'scss' - ? `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt( - prop.$value - )}));` - : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`; -} - -// Generates a valid font-family value from a font-family Design Token structure -export function generateFontFamilyValue(prop, propName, variableType = 'css') { - // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables - const _propName = propName.split('-').slice(0, -1).join('-'); - - return variableType === 'scss' - ? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);` - : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`; -} - -// Generates a final value, based if the Design Token is of type color or not -export function generateValue(prop, propName) { - // Use the original value to detect aliases - const aliasVar = getAliasReferenceVariable({ $value: prop.original.$value }); - - // Always generate the main variable - let mainValue; - if (aliasVar) { - mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`; - } else { - mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`; - } - - // Always generate the -rgb variable if it's a color - const rgb = hexToRgb(prop.$value); - let rgbDeclaration = ''; - if (rgb) { - rgbDeclaration = `\n$${classAndScssPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`; - } - - return `${mainValue}${rgbDeclaration}`; -} - -// Generates a typography based css utility-class or scss variable from a typography token structure -export function generateTypographyOutput(prop, propName, isVariable) { - const typography = prop.original.$value; - - // Extract the part after the last dot and trim any extraneous characters - const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, ''); - - const _initialWrapper = isVariable ? ': (' : ` {`; - const _endWrapper = isVariable ? ')' : `}`; - const _prefix = isVariable ? '$' : `.`; - const _endChar = isVariable ? ',' : ';'; - - // This exact format is needed so that it compiles the tokens with the expected lint rules - return ` - ${_prefix}${classAndScssPrefix}-${propName}${_initialWrapper} - font-size: $${classAndScssPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar} - font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar} - font-weight: $${classAndScssPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar} - letter-spacing: $${classAndScssPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar} - line-height: $${classAndScssPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar} - text-transform: ${typography.textCase}${_endChar} - text-decoration: ${typography.textDecoration}${_endChar} - ${_endWrapper}; - `; -} - -// Generates a color based css utility-class from a color Design Token structure -export function generateColorUtilityClasses(prop, className) { - const isBg = className.includes('bg'); - const cssProp = isBg ? 'background-color' : 'color'; - return `.${classAndScssPrefix}-${className} { - --${cssProp}: $${classAndScssPrefix}-${prop.name}; - ${cssProp}: $${classAndScssPrefix}-${prop.name}; -}`; -} - -// Generates margin and padding utility classes to match the token-agnostic -// utilities provided by the Ionic Framework -export function generateDefaultSpaceUtilityClasses() { - const zeroMarginPaddingToken = 'space-0'; - const defaultMarginPaddingToken = 'space-400'; - - const marginPaddingTemplate = (type) => ` -.${classAndScssPrefix}-no-${type} { - --${type}-top: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}}; - --${type}-end: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}}; - --${type}-bottom: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}}; - --${type}-start: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}}; - - @include ${type}($${classAndScssPrefix}-${zeroMarginPaddingToken}); -}; - -.${classAndScssPrefix}-${type} { - --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}); -}; - -.${classAndScssPrefix}-${type}-top { - --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null, null); -}; - -.${classAndScssPrefix}-${type}-end { - --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null); -}; - -.${classAndScssPrefix}-${type}-bottom { - --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}(null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null); -}; - -.${classAndScssPrefix}-${type}-start { - --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}(null, null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}); -}; - -.${classAndScssPrefix}-${type}-vertical { - --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null); -}; - -.${classAndScssPrefix}-${type}-horizontal { - --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}}; - - @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}); -}; -`; - - return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`; -} - -// Generates a margin or padding based css utility-class from a space Design Token structure -export function generateSpaceUtilityClasses(prop, className) { - // This exact format is needed so that it compiles the tokens with the expected lint rules - // It will generate classes for margin and padding, for equal sizing on all side and each direction - const marginPaddingTemplate = (type) => ` -.${classAndScssPrefix}-${type}-${className} { - --${type}-top: #{$${classAndScssPrefix}-${prop.name}}; - --${type}-end: #{$${classAndScssPrefix}-${prop.name}}; - --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}}; - --${type}-start: #{$${classAndScssPrefix}-${prop.name}}; - - @include ${type}($${classAndScssPrefix}-${prop.name}); -}; - -.${classAndScssPrefix}-${type}-top-${className} { - --${type}-top: #{$${classAndScssPrefix}-${prop.name}}; - - @include ${type}($${classAndScssPrefix}-${prop.name}, null, null, null); -}; - -.${classAndScssPrefix}-${type}-end-${className} { - --${type}-end: #{$${classAndScssPrefix}-${prop.name}}; - - @include ${type}(null, $${classAndScssPrefix}-${prop.name}, null, null); -}; - -.${classAndScssPrefix}-${type}-bottom-${className} { - --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}}; - - @include ${type}(null, null, $${classAndScssPrefix}-${prop.name}, null); -}; - -.${classAndScssPrefix}-${type}-start-${className} { - --${type}-start: #{$${classAndScssPrefix}-${prop.name}}; - - @include ${type}(null, null, null, $${classAndScssPrefix}-${prop.name}); -}; -`; - - // Add gap utility classes for gap tokens - const generateGapUtilityClasses = () =>` -.${classAndScssPrefix}-gap-${prop.name} { - gap: #{$${classAndScssPrefix}-${prop.name}}; -}; -`; - - return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`; -} - -// Generates a valid box-shadow value from a shadow Design Token structure -export function generateRadiusUtilityClasses(propName) { - return `.${classAndScssPrefix}-${propName} { - --border-radius: $${classAndScssPrefix}-${propName}; - border-radius: $${classAndScssPrefix}-${propName}; -}`; -} - -// Generates a border based css utility-class from a font Design Token structure -export function generateBorderUtilityClasses(prop, propName) { - let attribute; - - switch (prop.attributes.type) { - case 'border-radius': - case 'border-style': - attribute = prop.attributes.type; - break; - case 'border-size': - attribute = 'border-width'; - break; - default: - attribute = 'border-color'; - } - return `.${classAndScssPrefix}-${propName} { - --${attribute}: $${classAndScssPrefix}-${propName}; - ${attribute}: $${classAndScssPrefix}-${propName}; -}`; -} - -// Generates a font based css utility-class from a font Design Token structure -export function generateFontUtilityClasses(prop, propName) { - return `.${classAndScssPrefix}-${propName} {\n ${prop.attributes.type}: $${classAndScssPrefix}-${propName};\n}`; -} - -// Generates a valid box-shadow value from a shadow Design Token structure -export function generateShadowUtilityClasses(propName) { - return `.${classAndScssPrefix}-${propName} { - --box-shadow: $${classAndScssPrefix}-${propName}; - box-shadow: $${classAndScssPrefix}-${propName}; -}`; -} - -// Generates a utility class for a given token category and name -export function generateUtilityClasses(tokenCategory, propName){ - return `.${classAndScssPrefix}-${propName} {\n ${tokenCategory}: $${classAndScssPrefix}-${propName};\n}`; -} \ No newline at end of file diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index 6321c581851..4f76c035e7f 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -42,7 +42,40 @@ const enum AccordionState { }) export class Accordion implements ComponentInterface { private accordionGroupEl?: HTMLIonAccordionGroupElement | null; - private updateListener = () => this.updateState(false); + private accordionGroupUpdateHandler = () => { + /** + * Determine if this update will cause an actual state change. + * We only want to mark as "interacted" if the state is changing. + */ + const accordionGroup = this.accordionGroupEl; + if (accordionGroup) { + const value = accordionGroup.value; + const accordionValue = this.value; + const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue; + const isExpanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding; + const stateWillChange = shouldExpand !== isExpanded; + + /** + * Only mark as interacted if: + * 1. This is not the first update we've received with a defined value + * 2. The state is actually changing (prevents redundant updates from enabling animations) + */ + if (this.hasReceivedFirstUpdate && stateWillChange) { + this.hasInteracted = true; + } + + /** + * Only count this as the first update if the group value is defined. + * This prevents the initial undefined value from the group's componentDidLoad + * from being treated as the first real update. + */ + if (value !== undefined) { + this.hasReceivedFirstUpdate = true; + } + } + + this.updateState(); + }; private contentEl: HTMLDivElement | undefined; private contentElWrapper: HTMLDivElement | undefined; private headerEl: HTMLDivElement | undefined; @@ -54,6 +87,25 @@ export class Accordion implements ComponentInterface { @State() state: AccordionState = AccordionState.Collapsed; @State() isNext = false; @State() isPrevious = false; + /** + * Tracks whether a user-initiated interaction has occurred. + * Animations are disabled until the first interaction happens. + * This prevents the accordion from animating when it's programmatically + * set to an expanded or collapsed state on initial load. + */ + @State() hasInteracted = false; + + /** + * Tracks if this accordion has ever been expanded. + * Used to prevent the first expansion from animating. + */ + private hasEverBeenExpanded = false; + + /** + * Tracks if this accordion has received its first update from the group. + * Used to distinguish initial programmatic sets from user interactions. + */ + private hasReceivedFirstUpdate = false; /** * The value of the accordion. Defaults to an autogenerated @@ -92,15 +144,15 @@ export class Accordion implements ComponentInterface { connectedCallback() { const accordionGroupEl = (this.accordionGroupEl = this.el?.closest('ion-accordion-group')); if (accordionGroupEl) { - this.updateState(true); - addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener); + this.updateState(); + addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler); } } disconnectedCallback() { const accordionGroupEl = this.accordionGroupEl; if (accordionGroupEl) { - removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener); + removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler); } } @@ -237,10 +289,16 @@ export class Accordion implements ComponentInterface { ionItem.appendChild(iconEl); }; - private expandAccordion = (initialUpdate = false) => { + private expandAccordion = () => { const { contentEl, contentElWrapper } = this; - if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) { + + /** + * If the content elements aren't available yet, just set the state. + * This happens on initial render before the DOM is ready. + */ + if (contentEl === undefined || contentElWrapper === undefined) { this.state = AccordionState.Expanded; + this.hasEverBeenExpanded = true; return; } @@ -252,6 +310,12 @@ export class Accordion implements ComponentInterface { cancelAnimationFrame(this.currentRaf); } + /** + * Mark that this accordion has been expanded at least once. + * This allows subsequent expansions to animate. + */ + this.hasEverBeenExpanded = true; + if (this.shouldAnimate()) { raf(() => { this.state = AccordionState.Expanding; @@ -272,9 +336,14 @@ export class Accordion implements ComponentInterface { } }; - private collapseAccordion = (initialUpdate = false) => { + private collapseAccordion = () => { const { contentEl } = this; - if (initialUpdate || contentEl === undefined) { + + /** + * If the content element isn't available yet, just set the state. + * This happens on initial render before the DOM is ready. + */ + if (contentEl === undefined) { this.state = AccordionState.Collapsed; return; } @@ -316,6 +385,19 @@ export class Accordion implements ComponentInterface { * of what is set in the config. */ private shouldAnimate = () => { + /** + * Don't animate until after the first user interaction. + * This prevents animations on initial load when accordions + * start in an expanded or collapsed state programmatically. + * + * Additionally, don't animate the very first expansion even if + * hasInteracted is true. This handles edge cases like React StrictMode + * where effects run twice and might incorrectly mark as interacted. + */ + if (!this.hasInteracted || !this.hasEverBeenExpanded) { + return false; + } + if (typeof (window as any) === 'undefined') { return false; } @@ -337,7 +419,7 @@ export class Accordion implements ComponentInterface { return true; }; - private updateState = async (initialUpdate = false) => { + private updateState = async () => { const accordionGroup = this.accordionGroupEl; const accordionValue = this.value; @@ -350,10 +432,10 @@ export class Accordion implements ComponentInterface { const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue; if (shouldExpand) { - this.expandAccordion(initialUpdate); + this.expandAccordion(); this.isNext = this.isPrevious = false; } else { - this.collapseAccordion(initialUpdate); + this.collapseAccordion(); /** * When using popout or inset, @@ -403,6 +485,12 @@ export class Accordion implements ComponentInterface { if (disabled || readonly) return; + /** + * Mark that the user has interacted with the accordion. + * This enables animations for all future state changes. + */ + this.hasInteracted = true; + if (accordionGroupEl) { /** * Because the accordion group may or may diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts index 54883002dbf..e10fdc9d279 100644 --- a/core/src/components/accordion/test/accordion.spec.ts +++ b/core/src/components/accordion/test/accordion.spec.ts @@ -200,6 +200,87 @@ it('should set default values if not provided', async () => { expect(accordion.classList.contains('accordion-collapsed')).toEqual(false); }); +it('should not animate when initial value is set before load', async () => { + const page = await newSpecPage({ + components: [Item, Accordion, AccordionGroup], + }); + + const accordionGroup = page.doc.createElement('ion-accordion-group'); + accordionGroup.innerHTML = ` + + Label +
Content
+ + + Label +
Content
+ + `; + + accordionGroup.value = 'first'; + page.body.appendChild(accordionGroup); + + await page.waitForChanges(); + + const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!; + + expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true); + expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); +}); + +it('should not animate when initial value is set after load', async () => { + const page = await newSpecPage({ + components: [Item, Accordion, AccordionGroup], + }); + + const accordionGroup = page.doc.createElement('ion-accordion-group'); + accordionGroup.innerHTML = ` + + Label +
Content
+ + + Label +
Content
+ + `; + + page.body.appendChild(accordionGroup); + await page.waitForChanges(); + + accordionGroup.value = 'first'; + await page.waitForChanges(); + + const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!; + + expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true); + expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); +}); + +it('should not have animated class on first expansion', async () => { + const page = await newSpecPage({ + components: [Item, Accordion, AccordionGroup], + html: ` + + + Label +
Content
+ + + `, + }); + + const accordionGroup = page.body.querySelector('ion-accordion-group')!; + const firstAccordion = page.body.querySelector('ion-accordion[value="first"]')!; + + // First expansion should not have the animated class + accordionGroup.value = 'first'; + await page.waitForChanges(); + + expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false); + expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true); +}); + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047 it('should not have animated class when animated="false"', async () => { const page = await newSpecPage({ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png index bfdf0b497d5..246f81ff1ab 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5ffc6c685d6..ba3dc9161e1 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png index 310dc9530ee..d06c23ace97 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png index 11631eeb9e5..d1112303eae 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png index df0d87437a9..280594aef39 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png index d9ab537aabb..4b50d4aea48 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png index ecff0caf36b..4580f75861b 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png index ce01e78c5db..3d4f1511760 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png index 0bdadef0d5d..b6fe5447e94 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png index a44fb366b31..e99711a2479 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9de6c65076c..40fc00edf32 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png index be3a2b6c0fb..0b74a7dfd40 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png index eed25cd7934..e8891ec7309 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 484feb80bac..863cb83afb8 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 449725116b2..6d33ccc1111 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png index bc69b933c92..b002f36c659 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4e8b48085ea..bd5d081c9b9 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png index f70bf0e9114..4edfc08449f 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png index e4ef495094e..bb0dd6d2991 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2c7f1709040..aa7c31d13af 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png index b361efbfa44..89c34566372 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png index 24be2a99d0d..c443bd0eb1f 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index b2f8f3b4537..91424e195cc 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4a23b27548a..fb22d6df437 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png index 81090f30082..e189b33af4e 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7b2c8664f95..90fbe6a0fb5 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png index e2e10959452..c713e59e7f1 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png index d05621d3d6b..9363deb44fc 100644 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 4e1cd8ec3f7..39503a496fa 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -59,9 +59,9 @@ :host(.button-outline) { --border-width: #{globals.$ion-border-size-025}; --border-style: #{globals.$ion-border-style-solid}; - --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; + --background-activated: #{globals.ion-color(primary, shade, $subtle: true)}; --background-focused: transparent; - --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover: #{globals.ion-color(primary, shade, $subtle: true)}; --background-hover-opacity: 1; --border-color: #{globals.ion-color(primary, base)}; --color: #{globals.ion-color(primary, base)}; @@ -69,13 +69,20 @@ --ripple-color: var(--background-activated); } +// Warning Outline Button - use foreground color for text and border +:host(.button-outline.ion-color-warning) .button-native { + border-color: globals.ion-color(warning, foreground); + + color: globals.ion-color(warning, foreground); +} + // Clear Button // -------------------------------------------------- :host(.button-clear) { - --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; + --background-activated: #{globals.ion-color(primary, shade, $subtle: true)}; --background-focused: transparent; - --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover: #{globals.ion-color(primary, shade, $subtle: true)}; --background-hover-opacity: 1; --color: #{globals.ion-color(primary, foreground)}; --ripple-opacity: var(--background-activated-opacity, 1); @@ -91,7 +98,7 @@ :host(.button-outline.ion-color) ion-ripple-effect, :host(.button-clear.ion-color) ion-ripple-effect { - color: globals.$ion-primitives-neutral-200; + color: globals.current-color(shade, $subtle: true); } // Button Sizes @@ -178,21 +185,21 @@ // -------------------------------------------------- :host(.button-soft) { - --border-radius: #{globals.$ion-border-radius-200}; + --border-radius: #{globals.$ion-soft-xs}; } // Round Button // -------------------------------------------------- :host(.button-round) { - --border-radius: #{globals.$ion-border-radius-full}; + --border-radius: #{globals.$ion-round-xs}; } // Rectangular Button // -------------------------------------------------- :host(.button-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; + --border-radius: #{globals.$ion-rectangular-xs}; } // Button: Focus @@ -211,8 +218,15 @@ background: globals.current-color(shade); } +:host(.button-outline.ion-color.ion-activated) .button-native::after, +:host(.button-clear.ion-color.ion-activated) .button-native::after { + background: globals.current-color(shade, $subtle: true); +} + :host(.ion-activated) .button-native:has(ion-ripple-effect)::after, -:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { +:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after, +:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after, +:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { background: transparent; } @@ -223,6 +237,11 @@ :host(.button-solid.ion-color:hover) .button-native::after { background: globals.current-color(shade); } + + :host(.button-outline.ion-color:hover) .button-native::after, + :host(.button-clear.ion-color:hover) .button-native::after { + background: globals.current-color(shade, $subtle: true); + } } // Button: Disabled diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 1b7e8aae03e..aded6ecc555 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -399,11 +399,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf target, }; let fill = this.fill; - /** - * We check both undefined and null to - * work around https://github.com/ionic-team/stencil/issues/3586. - */ - if (fill == null) { + if (fill === undefined) { fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid'; } diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 6f16a83381a..31c0ad260cc 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 9c076a87c21..9abd073f1b1 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png index ee8dea15807..418a29081b5 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png index 4d27c81cc57..0acc9f679c8 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png index 366385b4251..e1605d2030a 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png index b87ee6b8462..2e29b50852a 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 32bfc3115d4..d68950f52a4 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index a9ce0b6c3ec..8bce5f752d9 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index 1feeadf2739..e1be86d87ed 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png index 5af9a875310..869c7eceefe 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png index af6ccca4d57..29214fd5066 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png index c7234573d16..e2613d1db6d 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2be222c043e..57dd61101d6 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4c3da349a2d..00fa5b80c9e 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png index 44e6464af49..8ffa32ea79b 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png index 6aeafec5af3..d5a82b93b4e 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png index 464a41975e9..52c99484d43 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 1e5a5c1a83c..313bd8ebfc6 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 387e5e2e91c..f73629c671f 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png index 3e2614b3d83..a1ea103ee2f 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8dc6ab76c46..c59fc106f4b 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index ccaf5eede00..83670ae7573 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index e4d4cd250a0..7943c412b78 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png index c7c23f4317e..56c5aeb08da 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 65719ef097b..c75b62c256a 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png index 1493d92687d..670caad65f8 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png index b33b81ed713..e8b8d20a4c8 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png index f08fe8d27ba..143e0c1012e 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png index cf18e580324..d83a1c741c5 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index f200561a2bf..d5643356a3f 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index eab83c75c27..0204ed72f80 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 823978d3707..e1c4fc54993 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index 2ce0a910e94..b07b2e02755 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index c54a4edfa42..24149cd17ee 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index bfc5cd8922d..56ec5a36302 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 139c4dd3a06..13ad26d8100 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2dcad14c935..2c67cc6cae3 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 81f5d883049..e3ad545aceb 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5fe8da2ec7e..48dd58e73a5 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0403297fe32..bff9b9c1712 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index de3ff6aa97c..7f17a8ef35e 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index e9ad5db2d83..39316471b7c 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index eedcde7aa80..93b77dd3ba3 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 8e532a5d9d3..b8c245cf407 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 187ba9f98c5..41030ed1677 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7513057203e..5235c41446a 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index fb2e0c18eb5..f6db0e44c4a 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5fa0c2b1e32..5275dfb5454 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index eb738ffa582..05e7d3c3deb 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index a7db5847907..6081b6318a3 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1df6e2bc9c4..e465b18598b 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0e6fff63b0c..867d9166db5 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 062f7bf1153..c1d6e6f84c1 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index e40963b3d5f..777110c727f 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index b8246c687e1..3ee7f0a39f5 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 71f9df5a909..668554ff6de 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index f283f3d595a..50ea58540ba 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7a01c920dcf..ade09aa1fe0 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index a29c092851a..b5ad8870ac0 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index d0c7c3e93a4..0da6b45359d 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7ad8fc60970..4624a04161b 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 67a54ed3941..719522f95f7 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 05b95f3eaaf..906b2955176 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index 05b95f3eaaf..906b2955176 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 76d0b57772b..ac7f6d5ddf7 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 76d0b57772b..ac7f6d5ddf7 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png index c2026c3d8b7..bfe9dc11b4b 100644 Binary files a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9146b8d59d1..f4f13087ddb 100644 Binary files a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png index 73dc6f2f7e2..eccc03f914c 100644 Binary files a/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/spinner/button.e2e.ts-snapshots/button-spinner-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 757ad51a077..81dc9a11ee4 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 42a63094426..d7da29da456 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9f707384da1..024324ea721 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 30ce61e9d55..8be4f3082ec 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9dfc8a220d5..d7943a8784e 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png index fd00c3dd0a5..7c9ccc965e8 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/theme-ionic/index.html b/core/src/components/button/test/theme-ionic/index.html index 51823c2875c..2449b482053 100644 --- a/core/src/components/button/test/theme-ionic/index.html +++ b/core/src/components/button/test/theme-ionic/index.html @@ -56,7 +56,8 @@

Preview options

Primary Success Warning - Neutral + Medium + Danger

diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 63fdbe0f510..755182fc4d2 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6df723defb1..2e934d1a783 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png index a4dcb45a8df..fe0ff96e586 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 904fada1a84..cfdd6297ba1 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4096a5b9b6c..40f4c1f0eb3 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index c8908d7a15a..8d6308e8c45 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 63fdbe0f510..69fce0e831c 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6df723defb1..2e934d1a783 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png index a4dcb45a8df..fe0ff96e586 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1572c407b19..ef06aedfcf9 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index f894a601487..d42d2e749be 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 0553ece934d..2ecec60b4ec 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 39793837454..e33eb885177 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core'; +import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core'; +import { checkInvalidState } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers'; import { createColorClasses, hostContext } from '@utils/theme'; @@ -36,8 +37,8 @@ export class Checkbox implements ComponentInterface { private inputLabelId = `${this.inputId}-lbl`; private helperTextId = `${this.inputId}-helper-text`; private errorTextId = `${this.inputId}-error-text`; - private focusEl?: HTMLElement; private inheritedAttributes: Attributes = {}; + private validationObserver?: MutationObserver; @Element() el!: HTMLIonCheckboxElement; @@ -133,6 +134,13 @@ export class Checkbox implements ComponentInterface { */ @Prop() size?: 'small'; + /** + * Track validation state for proper aria-live announcements. + */ + @State() isInvalid = false; + + @State() private hintTextId?: string; + /** * Emitted when the checked property has changed * as a result of a user action such as a click. @@ -151,18 +159,69 @@ export class Checkbox implements ComponentInterface { */ @Event() ionBlur!: EventEmitter; + connectedCallback() { + const { el } = this; + + // Watch for class changes to update validation state. + if (Build.isBrowser && typeof MutationObserver !== 'undefined') { + this.validationObserver = new MutationObserver(() => { + const newIsInvalid = checkInvalidState(el); + if (this.isInvalid !== newIsInvalid) { + this.isInvalid = newIsInvalid; + /** + * Screen readers tend to announce changes + * to `aria-describedby` when the attribute + * is changed during a blur event for a + * native form control. + * However, the announcement can be spotty + * when using a non-native form control + * and `forceUpdate()`. + * This is due to `forceUpdate()` internally + * rescheduling the DOM update to a lower + * priority queue regardless if it's called + * inside a Promise or not, thus causing + * the screen reader to potentially miss the + * change. + * By using a State variable inside a Promise, + * it guarantees a re-render immediately at + * a higher priority. + */ + Promise.resolve().then(() => { + this.hintTextId = this.getHintTextId(); + }); + } + }); + + this.validationObserver.observe(el, { + attributes: true, + attributeFilter: ['class'], + }); + } + + // Always set initial state + this.isInvalid = checkInvalidState(el); + } + componentWillLoad() { this.inheritedAttributes = { ...inheritAriaAttributes(this.el), }; + + this.hintTextId = this.getHintTextId(); + } + + disconnectedCallback() { + // Clean up validation observer to prevent memory leaks. + if (this.validationObserver) { + this.validationObserver.disconnect(); + this.validationObserver = undefined; + } } /** @internal */ @Method() async setFocus() { - if (this.focusEl) { - this.focusEl.focus(); - } + this.el.focus(); } /** @@ -182,7 +241,6 @@ export class Checkbox implements ComponentInterface { private toggleChecked = (ev: Event) => { ev.preventDefault(); - this.setFocus(); this.setChecked(!this.checked); this.indeterminate = false; }; @@ -220,10 +278,10 @@ export class Checkbox implements ComponentInterface { ev.stopPropagation(); }; - private getHintTextID(): string | undefined { - const { el, helperText, errorText, helperTextId, errorTextId } = this; + private getHintTextId(): string | undefined { + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; - if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) { + if (isInvalid && errorText) { return errorTextId; } @@ -239,7 +297,7 @@ export class Checkbox implements ComponentInterface { * This element should only be rendered if hint text is set. */ private renderHintText() { - const { helperText, errorText, helperTextId, errorTextId } = this; + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; /** * undefined and empty string values should @@ -252,11 +310,11 @@ export class Checkbox implements ComponentInterface { return (
-
- {helperText} +
+ {!isInvalid ? helperText : null}
-
- {errorText} +
); @@ -293,13 +351,17 @@ export class Checkbox implements ComponentInterface {
+ + diff --git a/core/src/components/checkbox/test/validation/index.html b/core/src/components/checkbox/test/validation/index.html new file mode 100644 index 00000000000..e3f4bce5601 --- /dev/null +++ b/core/src/components/checkbox/test/validation/index.html @@ -0,0 +1,184 @@ + + + + + Checkbox - Validation + + + + + + + + + + + + + + Checkbox - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+

Required Field

+ I agree to the terms and conditions +
+ +
+

Optional Field (No Validation)

+ Optional Checkbox +
+
+ +
+ Submit Form + Reset Form +
+ + + + + + diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index b6529f0acd1..948545ac399 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -36,27 +36,6 @@ @include globals.focused-state(null, null, var(--focus-ring-color)); } -// Chip: Hover -// --------------------------------------------- - -@media (any-hover: hover) { - :host(.chip-subtle:hover) { - --background: #{globals.$ion-primitives-neutral-200}; - } - - :host(.chip-bold:hover) { - --background: #{globals.$ion-primitives-neutral-1100}; - } - - :host(.chip-subtle.ion-color:hover) { - background: globals.current-color(tint, $subtle: true); - } - - :host(.chip-bold.ion-color:hover) { - background: globals.current-color(shade); - } -} - // Chip: Disabled // --------------------------------------------- diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index 544163c0f4b..462dd5a1fb4 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 93418b61280..0ef08c63092 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 1b2461a22ac..e9adf29fc8b 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts index 76d6cd2d8aa..a626dd90855 100644 --- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts +++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts @@ -1,7 +1,7 @@ -import { expect } from '@playwright/test'; import type { Locator } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; +import { expect } from '@playwright/test'; import type { EventSpy } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; /** * This behavior does not vary across directions. @@ -176,5 +176,34 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await ionModalDidPresent.next(); await expect(datetime).toBeVisible(); }); + test('should set datetime ready state and keep calendar interactive when reopening modal', async ({ + page, + }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30706', + }); + + const openAndInteract = async () => { + await page.click('#date-button'); + await ionModalDidPresent.next(); + + await page.locator('ion-datetime.datetime-ready').waitFor(); + + const calendarBody = datetime.locator('.calendar-body'); + await expect(calendarBody).toBeVisible(); + }; + + await openAndInteract(); + + const firstEnabledDay = datetime.locator('.calendar-day:not([disabled])').first(); + await firstEnabledDay.click(); + await page.waitForChanges(); + + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + await ionModalDidDismiss.next(); + + await openAndInteract(); + }); }); }); diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 3ecd2adfbfe..71b08a33098 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1106,6 +1106,32 @@ export class Datetime implements ComponentInterface { this.initializeKeyboardListeners(); } + /** + * TODO(FW-6931): Remove this fallback upon solving the root cause + * Fallback to ensure the datetime becomes ready even if + * IntersectionObserver never reports it as intersecting. + * + * This is primarily used in environments where the observer + * might not fire as expected, such as when running under + * synthetic tests that stub IntersectionObserver. + */ + private ensureReadyIfVisible = () => { + if (this.el.classList.contains('datetime-ready')) { + return; + } + + const rect = this.el.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) { + return; + } + + this.initializeListeners(); + + writeTask(() => { + this.el.classList.add('datetime-ready'); + }); + }; + componentDidLoad() { const { el, intersectionTrackerRef } = this; @@ -1146,6 +1172,18 @@ export class Datetime implements ComponentInterface { */ raf(() => visibleIO?.observe(intersectionTrackerRef!)); + /** + * TODO(FW-6931): Remove this fallback upon solving the root cause + * Fallback: If IntersectionObserver never reports that the + * datetime is visible but the host clearly has layout, ensure + * we still initialize listeners and mark the component as ready. + * + * We schedule this after everything has had a chance to run. + */ + setTimeout(() => { + this.ensureReadyIfVisible(); + }, 100); + /** * We need to clean up listeners when the datetime is hidden * in a popover/modal so that we can properly scroll containers diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 5f0c5385439..c9a0f9615e7 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -432,6 +432,61 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); +/** + * Synthetic IntersectionObserver fallback behavior. + * + * This test stubs IntersectionObserver so that the callback + * never reports an intersecting entry. The datetime should + * still become ready via its internal fallback logic. + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('datetime: IO fallback'), () => { + test('should become ready even if IntersectionObserver never reports visible', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30706', + }); + + await page.addInitScript(() => { + const OriginalIO = window.IntersectionObserver; + (window as any).IntersectionObserver = function (callback: any, options: any) { + const instance = new OriginalIO(() => {}, options); + const originalObserve = instance.observe.bind(instance); + + instance.observe = (target: Element) => { + originalObserve(target); + callback([ + { + isIntersecting: false, + target, + } as IntersectionObserverEntry, + ]); + }; + + return instance; + } as any; + }); + + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + // Give the fallback a short amount of time to run + await page.waitForTimeout(100); + + await expect(datetime).toHaveClass(/datetime-ready/); + + const calendarBody = datetime.locator('.calendar-body'); + await expect(calendarBody).toBeVisible(); + }); + }); +}); + /** * We are setting RTL on the component instead, so we don't need to test * both directions. Also, this behavior does not vary across modes. diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png index 49b27fd5f42..7c3a54ffbd8 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5be2f9dfe83..f707007352b 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png index c03c0e8d2ca..6262d4cf870 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png index e7d8db33df2..65c32cb307b 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png index 77a18e4c8d3..bf42e6c6473 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png index 643614b8777..01eeb6b757f 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png index a01b7c4be25..65b69fe4840 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png index 03ec4781b5e..48194d0098b 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png index 996aac9b93a..15e16e760f0 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png index 4bc53cefe4e..ceecef9eff2 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png index 4d070398730..7d1a3f06067 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png index 254d6a5981f..5c1b037b709 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 69772bf5599..3f31876f80a 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 87501de5e85..4b61d2d4d3d 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 9ac509f2abd..ef1ca9775f7 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index 4ae35fdf238..b24eed4d595 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index a7b17f215e4..e4b3d34756c 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png index 132da8c9845..94ad7268b55 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 18f2fb4ef01..5b3eafbf606 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3d43f91ef22..8debd646a69 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 1b417b28cb2..e6474263661 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index f5584adfe0a..031fb9c9e12 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index 7a7840d6eb0..eca317c0d58 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png index bd50e20d711..fc9b4b2470d 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index a0f18e12bb2..8ddf0ebff87 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index cb26d173611..d98339b82d1 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 42acbffe1cc..6d905e5084c 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index 7bc9cd7f0e1..61f45399a97 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index 56346f6f399..07c57f38f65 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png index ab1d1f0717d..2a54186c89e 100644 Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png index dad19ffe86c..d06b0e19602 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5a34a7d17e7..c3d6c330d54 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png index 0d10bf70ff4..34922b5e331 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png index ead66d915dd..7f11a7e52c8 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6b7f2fbc895..c8025ed3b42 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png index 93d77d7452a..9379f6ff12f 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png index b5ffccf63ab..eece8be526d 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png index c4b921ebb25..cb1c20db569 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png index 00d705e9802..bf6b3af5e0d 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7a4f0c855c5..3b5af726698 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png index e9c9846fc4e..59bc762220c 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png index 19005552b8e..99173c13884 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png index 913e6fdb2c9..0387680c4a4 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4880e6597da..76390df3bd2 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png index bd43b6ff15f..f9c7916cd08 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png index 597c27b7ef9..ac6a121d1a8 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png index ec7903597ce..ee07ef00abd 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png index df376af9485..bcc3c7ef70c 100644 Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index c8f47793a2c..8541a491d08 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index a9716777bf4..5868434f1d2 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index 67213eef5af..c3daf1f7a48 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1af7d4b2c75..fa901211fe8 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png index fb27b662bc5..af765de4e26 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png index 27028e75e1f..42554204da9 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8159c2e0502..6b053d1c72a 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png index e0c00a53529..c323732b72e 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png index 0889f1863c4..99847116443 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0bebbf31175..47f357edd3e 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index c4a2afb8e81..547fc458a85 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index 55ea1d11002..0309188075e 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index a3241d9bf0e..1a2ba2142d5 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7d127a580f8..a9f3c87c3f3 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index afdd54288a9..c43181570e5 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index c97ef7e068a..2c9b1f872a6 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index dbf34161864..ddaffd73c8f 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index f65a719ea9b..80e9daec218 100644 Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index b83beab8b51..488fb90a7b0 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 48fdb299b4e..96517af6ffb 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png index a0ee0d63330..116c8b4f48b 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png index 15a1ea05efb..f143bac9e1f 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png index f7f9370ba04..1c23c01ea82 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png index 8923b7fa0b3..c88f1041572 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png index 5adbcfb1ae1..3993ec76f8b 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png index f81790795b6..6ba4fdd358c 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png index 93bd3d884b6..4b8476caa6d 100644 Binary files a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index 748d8605836..872ce9243a0 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index f57521959a0..b9435fe7085 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png index 57942d1208f..7f83f35168c 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png index b83beab8b51..488fb90a7b0 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png index 48fdb299b4e..96517af6ffb 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png index a0ee0d63330..116c8b4f48b 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7e9f1d3e041..c44ef25589b 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7b2064ba294..aa3b0dac6c1 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png index e5165601c5c..0d3a026be21 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png index dfdf9833e73..b1335a4c4f7 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6c0d6959fc8..8f00b6f91db 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png index 4a49656ccdf..de794aa245a 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png index d793354d888..64b727cca5b 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png index 72b35a0392e..d2e33892724 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png index a7a85dc462f..e6ac38163c9 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0edb0250755..ede7a54c5cd 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png index cc84397dc07..97d86b57bff 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png index 73c39efad43..1e48040f52b 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png index 25d93238ac6..7d03d8c1c0b 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png index 50cddc95ddd..a01c47c7afc 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png index 4325cf473d2..b9de4abb846 100644 Binary files a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss index b7b6ce9c578..0a216726a77 100644 --- a/core/src/components/header/header.ionic.scss +++ b/core/src/components/header/header.ionic.scss @@ -5,7 +5,6 @@ // -------------------------------------------------- ion-header { - box-shadow: #{globals.$ion-elevation-2}; z-index: 10; // TODO(ROU-10853): replace this value with a layer token. &.header-divider { diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index a48fd5b2286..7dd79991a59 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -39,6 +39,15 @@ --opacity-scale: inherit; } +/** + * Override styles applied during the page transition to prevent + * header flickering. + */ +.header-collapse-fade.header-transitioning ion-toolbar { + --background: transparent; + --border-style: none; +} + // iOS Header - Collapse Condense // -------------------------------------------------- .header-collapse-condense { @@ -65,8 +74,6 @@ * since it needs to blend in with the header above it. */ .header-collapse-condense ion-toolbar { - --background: var(--ion-background-color, #fff); - z-index: 0; } @@ -92,6 +99,28 @@ transition: all 0.2s ease-in-out; } +/** + * Large title toolbar should just use the content background + * since it needs to blend in with the header above it. + */ +.header-collapse-condense ion-toolbar, +/** + * Override styles applied during the page transition to prevent + * header flickering. + */ +.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar { + --background: var(--ion-background-color, #fff); +} + +/** + * Override styles applied during the page transition to prevent + * header flickering. + */ +.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar { + --border-style: none; + --opacity-scale: 1; +} + .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title, .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse { opacity: 0; diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 69c43335aaa..e922a388605 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -16,6 +16,7 @@ import { handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, + getRoleType, } from './header.utils'; /** @@ -219,9 +220,10 @@ export class Header implements ComponentInterface { const { translucent, inheritedAttributes, divider } = this; const theme = getIonTheme(this); const collapse = this.collapse || 'none'; + const isCondensed = collapse === 'condense'; // banner role must be at top level, so remove role if inside a menu - const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner'; + const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme); return ( { const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl); if (active) { + headerEl.setAttribute('role', ROLE_BANNER); headerEl.classList.remove('header-collapse-condense-inactive'); ionTitles.forEach((ionTitle) => { @@ -179,6 +182,16 @@ export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => { } }); } else { + /** + * There can only be one banner landmark per page. + * By default, all ion-headers have the banner role. + * This causes an accessibility issue when using a + * condensed header since there are two ion-headers + * on the page at once (active and inactive). + * To solve this, the role needs to be toggled + * based on which header is active. + */ + headerEl.setAttribute('role', ROLE_NONE); headerEl.classList.add('header-collapse-condense-inactive'); /** @@ -244,3 +257,28 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con }); }); }; + +/** + * Get the role type for the ion-header. + * + * @param isInsideMenu If ion-header is inside ion-menu. + * @param isCondensed If ion-header has collapse="condense". + * @param theme The current theme. + * @returns 'none' if inside ion-menu or if condensed in md + * theme, otherwise 'banner'. + */ +export const getRoleType = (isInsideMenu: boolean, isCondensed: boolean, theme: 'ios' | 'md' | 'ionic') => { + // If the header is inside a menu, it should not have the banner role. + if (isInsideMenu) { + return ROLE_NONE; + } + /** + * Only apply role="none" to `md` & `ionic` theme condensed headers + * since the large header is never shown. + */ + if (isCondensed && theme !== 'ios') { + return ROLE_NONE; + } + // Default to banner role. + return ROLE_BANNER; +}; diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts index b57d1ee58f7..c416532973e 100644 --- a/core/src/components/header/test/condense/header.e2e.ts +++ b/core/src/components/header/test/condense/header.e2e.ts @@ -40,5 +40,45 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await expect(smallTitle).toHaveAttribute('aria-hidden', 'true'); }); + + test('should only have the banner role on the active header', async ({ page }) => { + await page.goto('/src/components/header/test/condense', config); + const largeTitleHeader = page.locator('#largeTitleHeader'); + const smallTitleHeader = page.locator('#smallTitleHeader'); + const content = page.locator('ion-content'); + + await expect(largeTitleHeader).toHaveAttribute('role', 'banner'); + await expect(smallTitleHeader).toHaveAttribute('role', 'none'); + + await content.evaluate(async (el: HTMLIonContentElement) => { + await el.scrollToBottom(); + }); + await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor(); + + await expect(largeTitleHeader).toHaveAttribute('role', 'none'); + await expect(smallTitleHeader).toHaveAttribute('role', 'banner'); + }); + }); +}); + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('header: condense'), () => { + test('should only have the banner role on the small header', async ({ page }) => { + await page.goto('/src/components/header/test/condense', config); + const largeTitleHeader = page.locator('#largeTitleHeader'); + const smallTitleHeader = page.locator('#smallTitleHeader'); + const content = page.locator('ion-content'); + + await expect(smallTitleHeader).toHaveAttribute('role', 'banner'); + await expect(largeTitleHeader).toHaveAttribute('role', 'none'); + + await content.evaluate(async (el: HTMLIonContentElement) => { + await el.scrollToBottom(); + }); + await page.waitForChanges(); + + await expect(smallTitleHeader).toHaveAttribute('role', 'banner'); + await expect(largeTitleHeader).toHaveAttribute('role', 'none'); + }); }); }); diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0ff82c5ea06..5112b2da43a 100644 Binary files a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 12cf6307d85..07c27b1917a 100644 Binary files a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index 0581f8c2e6f..c7e4a282398 100644 Binary files a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input-otp/input-otp.common.scss b/core/src/components/input-otp/input-otp.common.scss index b905146155d..6af7c8cee63 100644 --- a/core/src/components/input-otp/input-otp.common.scss +++ b/core/src/components/input-otp/input-otp.common.scss @@ -129,13 +129,6 @@ background: var(--separator-color); } -// Fills -// -------------------------------------------------- - -:host(.input-otp-fill-outline) { - --background: none; -} - // States // -------------------------------------------------- diff --git a/core/src/components/input-otp/input-otp.ionic.scss b/core/src/components/input-otp/input-otp.ionic.scss index ac67b4c455e..29322bc5273 100644 --- a/core/src/components/input-otp/input-otp.ionic.scss +++ b/core/src/components/input-otp/input-otp.ionic.scss @@ -68,20 +68,24 @@ // -------------------------------------------------- :host(.input-otp-shape-round) { - --border-radius: #{globals.$ion-border-radius-400}; + --border-radius: #{globals.$ion-round-xl}; } :host(.input-otp-shape-soft) { - --border-radius: #{globals.$ion-border-radius-200}; + --border-radius: #{globals.$ion-soft-xl}; } :host(.input-otp-shape-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; + --border-radius: #{globals.$ion-rectangular-xl}; } // Fills // -------------------------------------------------- +:host(.input-otp-fill-outline) { + --background: #{globals.$ion-bg-input-default}; +} + :host(.input-otp-fill-solid) { --border-color: #{globals.$ion-bg-input-bold-default}; --background: #{globals.$ion-bg-input-bold-default}; diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index a804254716d..7efc436b86a 100644 Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 08c4cbdc607..94829b29bdd 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -15,7 +15,7 @@ import { h, } from '@stencil/core'; import type { NotchController } from '@utils/forms'; -import { createNotchController } from '@utils/forms'; +import { createNotchController, checkInvalidState } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; @@ -425,16 +425,6 @@ export class Input implements ComponentInterface { } } - /** - * Checks if the input is in an invalid state based on Ionic validation classes - */ - private checkInvalidState(): boolean { - const hasIonTouched = this.el.classList.contains('ion-touched'); - const hasIonInvalid = this.el.classList.contains('ion-invalid'); - - return hasIonTouched && hasIonInvalid; - } - connectedCallback() { const { el } = this; @@ -448,7 +438,7 @@ export class Input implements ComponentInterface { // Watch for class changes to update validation state if (Build.isBrowser && typeof MutationObserver !== 'undefined') { this.validationObserver = new MutationObserver(() => { - const newIsInvalid = this.checkInvalidState(); + const newIsInvalid = checkInvalidState(el); if (this.isInvalid !== newIsInvalid) { this.isInvalid = newIsInvalid; // Force a re-render to update aria-describedby immediately @@ -463,7 +453,7 @@ export class Input implements ComponentInterface { } // Always set initial state - this.isInvalid = this.checkInvalidState(); + this.isInvalid = checkInvalidState(el); this.debounceChanged(); if (Build.isBrowser) { diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png index 803b60636ae..5c8fbc2477a 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png index 2a374b9153a..4d6ec42cb6a 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png index 00504c00e2e..78f35487820 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png index 32c191eb4d4..3eb9cdef649 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png index 96bf43bf17b..af70dea5f27 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png index 920400ff4df..923b3d6564e 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png index bcea37e76b5..3aa84f083f8 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png index 854a9bf5e97..b374a1c0ab0 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index bdb92b61a14..0ebcad066c7 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index d1bf812f1e6..73b8618969b 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index 389802f8ef9..196f0085231 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 8fdd61663dc..665f5346c69 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -71,7 +71,6 @@ slot[name="end"]::slotted(*) { // Item: Focused // -------------------------------------------------- - :host(.ion-focused) .item-native::after { @include globals.border-radius(inherit); @include globals.position(0, 0, 0, 0); @@ -112,3 +111,14 @@ slot[name="end"]::slotted(*) { :host(.item-lines-none) { --inner-border-width: #{globals.$ion-border-size-0}; } + +// Item in Select Modal +// -------------------------------------------------- +:host(.in-select-modal) { + --background-focused: #{globals.$ion-bg-neutral-subtlest-press}; + --background-focused-opacity: 0; +} + +:host(.in-select-modal.ion-focused) .item-native { + --border-radius: #{globals.$ion-border-radius-400}; +} diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index fe53819ac98..69ab55e785a 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -8,7 +8,7 @@ import { createColorClasses, hostContext } from '@utils/theme'; import { chevronForward } from 'ionicons/icons'; import { config } from '../../global/config'; -import { getIonTheme } from '../../global/ionic-global'; +import { getIonMode, getIonTheme } from '../../global/ionic-global'; import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface'; import type { RouterDirection } from '../router/utils/interface'; @@ -246,7 +246,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } private canActivate(): boolean { - return this.isClickable() || this.hasCover(); + const theme = getIonTheme(this); + const mode = getIonMode(this); + const shouldActivate = this.isClickable() || this.hasCover(); + if (theme !== 'ionic') { + return shouldActivate; + } + return mode === 'md' && shouldActivate; } private isFocusable(): boolean { @@ -407,6 +413,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac 'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor, 'item-disabled': disabled, 'in-list': inList, + 'in-select-modal': hostContext('ion-select-modal', this.el), 'item-multiple-inputs': this.multipleInputs, 'ion-activatable': canActivate, 'ion-focusable': this.focusable, diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index d5f0e2e0ba3..f28f1a2e822 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 63a3135dc31..1b8b7b77e8b 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index 0cba650d2e6..aaf9e085fe0 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 12eb06e6ed3..698d86126b5 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 76007713d03..8bdf277b7dd 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index ae8b0a3014f..d9b875195cd 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png index f44d119de9b..44ac4a35422 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png index 06c9aa5187f..2c71c829b95 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png index e3602eaab24..1087667a5e6 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png index 31ce2afd453..cbd8bf099ce 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png index 6f3f68f1ae2..c2a1f1ed8db 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png index d7c0c233316..bb4bca2d528 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png index 4da85946371..a2c47ce52eb 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png index 2cb8643c103..be501ee0b24 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png index 0f11bf6374c..285c86be956 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png index b6f9b124132..ffd50838a05 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png index 9dfc62264cb..a5796821cde 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png index 39a8a60c14b..f7539558453 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png index ccf1a155005..aab439c518f 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png index 0fb9a9c6709..cc3f793b99b 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png index 447b5d35584..efab3d3aaf2 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png index 39b4ab082a5..66bd2a998ad 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png index 407b028aaf7..c965e086952 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png index 57fa59f23f5..4c8a0b8a16c 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png index dfd4ff699bb..1f19013ca63 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png index f627963464d..f8b32a5cdd7 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/modal.ionic.scss b/core/src/components/modal/modal.ionic.scss index 80244c5ba68..30306fce969 100644 --- a/core/src/components/modal/modal.ionic.scss +++ b/core/src/components/modal/modal.ionic.scss @@ -27,6 +27,16 @@ --border-radius: #{globals.$ion-border-radius-0}; } +// Default Modal +// -------------------------------------------------- + +// Modal when inside a select default-modal +:host(.select-modal.modal-default) { + --max-height: 45%; + --max-width: calc(100% - (#{globals.$ion-space-400} * 2)); + --min-height: 340px; +} + // Sheet Modal // -------------------------------------------------- diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2bee6502450..952c4a7d15a 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4729f8199ee..c424abd7209 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png index a993b2c97f2..48b443029fa 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png index 72e1a191257..21c0343f04f 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png index 1ffbd9ecc7a..b78c67efcd9 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png index 63d32f8a095..a408c4c240f 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png index 774749fcc04..f18b5a944ee 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png index 18f970a12a5..d1013377846 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png index 1b86a2b5db6..d3f7b22e276 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png index 26034da0c1c..52b6cefadd5 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png index fe3c8449ced..f72f28998d0 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png index a4c09af8abe..2e00430ae35 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9cbd6869bb3..66f50cf47d3 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5c1aca878b0..ba94d7bc50d 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 78610eda1ea..37dffca6748 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index d20f9e029ae..7ba73e882ef 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9cbd6869bb3..66f50cf47d3 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5c1aca878b0..ba94d7bc50d 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 78610eda1ea..37dffca6748 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5e027ab1c5b..456bfb2f0ef 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index fa2bad01565..c48e1d7cac3 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index e6c37a95a1e..91eb9c0f04d 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index cb30e653b23..a99b7bd6daf 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index b5a65a0d2d5..700ad618ac1 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 3e8c0b9cdfd..c94b1aaf10e 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 87d0f52f7b4..e30db5d4688 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index a1ed542b7ad..d01fcfb0d4a 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 260ff57170c..7459291ade5 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index cb30e653b23..a99b7bd6daf 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index b5a65a0d2d5..700ad618ac1 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 3e8c0b9cdfd..c94b1aaf10e 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0f44ab4775d..18e8290957c 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index b493bc89d9f..0458a788ce9 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 840976c10be..2a444fea4cc 100644 Binary files a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png index b762ee2ef9a..89bd3017ce1 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png index 57a0b171690..53ab6bb4139 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png index 4721d3b341e..7f5fa3e5e8c 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7b3f702e2c0..6d3e7da3f07 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png index 713cd208b76..b0062fafb73 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png index 8bee4a347f5..f7f1bcd5bc7 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png index fcd8b09997f..f29b302d8d6 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 11730321e6c..9493f4f66cc 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png index 40499b6dc38..8b0d981586f 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png index eb0cff741a8..a60b0aff45c 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8d7082b75b3..3f5a38ba2ac 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png index e67b44ad013..84e2362e3dd 100644 Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/radio-group.ionic.scss b/core/src/components/radio-group/radio-group.ionic.scss index b45d765e488..9f88be770ff 100644 --- a/core/src/components/radio-group/radio-group.ionic.scss +++ b/core/src/components/radio-group/radio-group.ionic.scss @@ -11,11 +11,11 @@ } .radio-group-top .error-text { - color: globals.$ion-semantics-danger-800; + color: globals.$ion-text-danger; } .radio-group-top .helper-text { - color: globals.$ion-primitives-neutral-800; + color: globals.$ion-text-subtlest; } // Radio Group Top: in List diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 71ee98b0ce7..ae95316c25c 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core'; +import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core'; +import { checkInvalidState } from '@utils/forms'; import { renderHiddenInput } from '@utils/helpers'; import { getIonTheme } from '../../global/ionic-global'; @@ -24,9 +25,17 @@ export class RadioGroup implements ComponentInterface { private errorTextId = `${this.inputId}-error-text`; private labelId = `${this.inputId}-lbl`; private label?: HTMLIonLabelElement | null; + private validationObserver?: MutationObserver; @Element() el!: HTMLElement; + /** + * Track validation state for proper aria-live announcements. + */ + @State() isInvalid = false; + + @State() private hintTextId?: string; + /** * If `true`, the radios can be deselected. */ @@ -126,6 +135,57 @@ export class RadioGroup implements ComponentInterface { this.labelId = label.id = this.name + '-lbl'; } } + + // Watch for class changes to update validation state. + if (Build.isBrowser && typeof MutationObserver !== 'undefined') { + this.validationObserver = new MutationObserver(() => { + const newIsInvalid = checkInvalidState(this.el); + if (this.isInvalid !== newIsInvalid) { + this.isInvalid = newIsInvalid; + /** + * Screen readers tend to announce changes + * to `aria-describedby` when the attribute + * is changed during a blur event for a + * native form control. + * However, the announcement can be spotty + * when using a non-native form control + * and `forceUpdate()`. + * This is due to `forceUpdate()` internally + * rescheduling the DOM update to a lower + * priority queue regardless if it's called + * inside a Promise or not, thus causing + * the screen reader to potentially miss the + * change. + * By using a State variable inside a Promise, + * it guarantees a re-render immediately at + * a higher priority. + */ + Promise.resolve().then(() => { + this.hintTextId = this.getHintTextId(); + }); + } + }); + + this.validationObserver.observe(this.el, { + attributes: true, + attributeFilter: ['class'], + }); + } + + // Always set initial state + this.isInvalid = checkInvalidState(this.el); + } + + componentWillLoad() { + this.hintTextId = this.getHintTextId(); + } + + disconnectedCallback() { + // Clean up validation observer to prevent memory leaks. + if (this.validationObserver) { + this.validationObserver.disconnect(); + this.validationObserver = undefined; + } } private getRadios(): HTMLIonRadioElement[] { @@ -249,7 +309,7 @@ export class RadioGroup implements ComponentInterface { * Renders the helper text or error text values */ private renderHintText() { - const { helperText, errorText, helperTextId, errorTextId } = this; + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; const hasHintText = !!helperText || !!errorText; if (!hasHintText) { @@ -258,20 +318,20 @@ export class RadioGroup implements ComponentInterface { return (
-
- {helperText} +
+ {!isInvalid ? helperText : null}
-
- {errorText} +
); } - private getHintTextID(): string | undefined { - const { el, helperText, errorText, helperTextId, errorTextId } = this; + private getHintTextId(): string | undefined { + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; - if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) { + if (isInvalid && errorText) { return errorTextId; } @@ -295,8 +355,8 @@ export class RadioGroup implements ComponentInterface { }} role="radiogroup" aria-labelledby={label ? labelId : null} - aria-describedby={this.getHintTextID()} - aria-invalid={this.getHintTextID() === this.errorTextId} + aria-describedby={this.hintTextId} + aria-invalid={this.isInvalid ? 'true' : undefined} onClick={this.onClick} > {this.renderHintText()} diff --git a/core/src/components/radio-group/test/validation/index.html b/core/src/components/radio-group/test/validation/index.html new file mode 100644 index 00000000000..49fdbf1ebbc --- /dev/null +++ b/core/src/components/radio-group/test/validation/index.html @@ -0,0 +1,194 @@ + + + + + Radio Group - Validation + + + + + + + + + + + + + + Radio Group - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+

Required Field

+ + Grapes
+ Strawberries + +
+ +
+

Optional Field (No Validation)

+ + Cucumbers
+ Tomatoes + +
+
+ +
+ Submit Form + Reset Form +
+ + + + + + diff --git a/core/src/components/radio/radio.ionic.scss b/core/src/components/radio/radio.ionic.scss index 9b7aca92ca0..3440ac2d2f6 100644 --- a/core/src/components/radio/radio.ionic.scss +++ b/core/src/components/radio/radio.ionic.scss @@ -5,8 +5,8 @@ // -------------------------------------------------- :host { - --color: #{globals.$ion-primitives-neutral-500}; - --color-checked: #{globals.$ion-semantics-primary-base}; + --color: #{globals.$ion-border-input-default}; + --color-checked: #{globals.$ion-bg-primary-base-default}; --border-width: #{globals.$ion-border-size-025}; --border-style: #{globals.$ion-border-style-solid}; --border-radius: #{globals.$ion-border-radius-full}; @@ -55,7 +55,7 @@ border-style: var(--border-style); border-color: var(--color); - background-color: globals.$ion-bg-surface-default; + background-color: globals.$ion-bg-input-default; } // Ionic Radio Inner Circle: Unchecked @@ -67,7 +67,7 @@ width: calc(32% + var(--border-width)); height: calc(32% + var(--border-width)); - background-color: globals.$ion-bg-surface-default; + background-color: globals.$ion-bg-surface-inverse; } // Ionic Radio Outer Circle: Checked diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 541ef91fee1..bf1c8e9487d 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7debc61f2d7..50825520269 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index f4d6e332bad..efdba59672f 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 9855a1a63b0..4af2e1475f1 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0d1dd66e076..73b843768e2 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png index e011cfd8e4a..33fbd26e12f 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png index 6f9c17e8865..a853a7b848c 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6cf45a2b1c9..45ea97d729d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png index c0a63e623c8..74c6ea13b82 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png index 87d0ab1c775..0fd3b775dd4 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2a91c927f36..d30b57acf06 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5661741c8c6..7911141dd56 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png index 73b0a549c7d..f2d46a23a09 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png index e06dcd4ed2f..bff7fcef466 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png index da55dda54af..7715392c70b 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png index 1c33241c62e..d5b26892486 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1a7bf79daca..24ed51ce323 100644 Binary files a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index bca8ac9cd48..f0237784e29 100644 Binary files a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png index 39221bd24ab..15cc4151ca4 100644 Binary files a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index b4bfd4b1c56..d89b21f146f 100644 Binary files a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5a696ccb3ee..982df14d2d6 100644 Binary files a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index 635c427bc45..f09842ae05e 100644 Binary files a/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss index 6a53e9dbb8d..23d7705b660 100644 --- a/core/src/components/select-modal/select-modal.ionic.scss +++ b/core/src/components/select-modal/select-modal.ionic.scss @@ -4,6 +4,10 @@ // Ionic Select Modal // -------------------------------------------------- +:host(.in-modal-default) ion-content::part(scroll) { + --padding-bottom: #{globals.$ion-space-400}; +} + // Item // ---------------------------------------------------------------- @@ -67,4 +71,9 @@ ion-content { --padding-end: #{globals.$ion-space-400} !important; /* stylelint-disable-next-line declaration-no-important */ --padding-bottom: #{globals.$ion-space-1200} !important; + + // Set the background to the focused element within a radio group only when there is a checked radio + &:has(.radio-checked) .ion-focused:not(.item-radio-checked) { + --background-focused-opacity: 1; + } } diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx index 1e61c933fdf..8b4ed90193e 100644 --- a/core/src/components/select-modal/select-modal.tsx +++ b/core/src/components/select-modal/select-modal.tsx @@ -2,7 +2,7 @@ import { getIonMode } from '@global/ionic-global'; import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core'; import { safeCall } from '@utils/overlays'; -import { getClassMap } from '@utils/theme'; +import { getClassMap, hostContext } from '@utils/theme'; import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface'; import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface'; @@ -74,6 +74,14 @@ export class SelectModal implements ComponentInterface { } } + private getModalContextClasses() { + const el = this.el; + return { + 'in-modal-default': hostContext('ion-modal.modal-default', el), + 'in-modal-sheet': hostContext('ion-modal.modal-sheet', el), + }; + } + private renderRadioOptions() { const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0]; @@ -143,7 +151,12 @@ export class SelectModal implements ComponentInterface { render() { return ( - + {this.header !== undefined && {this.header}} diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7632f97b036..5cd393da5f2 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index c015ed0f57f..163cd74682f 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index 6de819368cb..d04eb3cda2f 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8a78dbe8532..6ad118c0846 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2e7a4860ffc..92d4d81a06e 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index 4a16c59cc6b..207cfc3689f 100644 Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 1cef7e06e39..af3678d0e15 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -38,6 +38,12 @@ .select-text { min-width: globals.$ion-space-400; + + color: globals.$ion-text-subtlest; +} + +:host(.has-value) .select-text { + color: globals.$ion-text-default; } // Select Label @@ -208,6 +214,12 @@ .select-icon { transition: transform 0.15s globals.$ion-transition-curve-expressive; + + color: globals.$ion-text-subtlest; +} + +:host(.has-value) .select-icon { + color: globals.$ion-text-subtle; } /** @@ -219,13 +231,15 @@ @include globals.transform(rotate(180deg)); } -.select-icon { - color: globals.$ion-primitives-neutral-800; -} - // States // ---------------------------------------------------------------- +// Fill types +// ---------------------------------------------------------------- +:host(.select-fill-solid) { + --background: #{globals.$ion-bg-input-bold-default}; +} + // Disabled // --------------------------------------------- diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 6857860adde..a3d6761251d 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -1,8 +1,8 @@ import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg'; import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core'; +import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core'; import type { NotchController } from '@utils/forms'; -import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms'; +import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms'; import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; @@ -68,6 +68,7 @@ export class Select implements ComponentInterface { private inheritedAttributes: Attributes = {}; private nativeWrapperEl: HTMLElement | undefined; private notchSpacerEl: HTMLElement | undefined; + private validationObserver?: MutationObserver; private notchController?: NotchController; @@ -85,6 +86,13 @@ export class Select implements ComponentInterface { */ @State() hasFocus = false; + /** + * Track validation state for proper aria-live announcements. + */ + @State() isInvalid = false; + + @State() private hintTextId?: string; + /** * The text to display on the cancel button. */ @@ -314,10 +322,51 @@ export class Select implements ComponentInterface { */ forceUpdate(this); }); + + // Watch for class changes to update validation state. + if (Build.isBrowser && typeof MutationObserver !== 'undefined') { + this.validationObserver = new MutationObserver(() => { + const newIsInvalid = checkInvalidState(this.el); + if (this.isInvalid !== newIsInvalid) { + this.isInvalid = newIsInvalid; + /** + * Screen readers tend to announce changes + * to `aria-describedby` when the attribute + * is changed during a blur event for a + * native form control. + * However, the announcement can be spotty + * when using a non-native form control + * and `forceUpdate()`. + * This is due to `forceUpdate()` internally + * rescheduling the DOM update to a lower + * priority queue regardless if it's called + * inside a Promise or not, thus causing + * the screen reader to potentially miss the + * change. + * By using a State variable inside a Promise, + * it guarantees a re-render immediately at + * a higher priority. + */ + Promise.resolve().then(() => { + this.hintTextId = this.getHintTextId(); + }); + } + }); + + this.validationObserver.observe(el, { + attributes: true, + attributeFilter: ['class'], + }); + } + + // Always set initial state + this.isInvalid = checkInvalidState(this.el); } componentWillLoad() { this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']); + + this.hintTextId = this.getHintTextId(); } componentDidLoad() { @@ -344,6 +393,12 @@ export class Select implements ComponentInterface { this.notchController.destroy(); this.notchController = undefined; } + + // Clean up validation observer to prevent memory leaks. + if (this.validationObserver) { + this.validationObserver.disconnect(); + this.validationObserver = undefined; + } } /** @@ -1084,8 +1139,8 @@ export class Select implements ComponentInterface { aria-label={this.ariaLabel} aria-haspopup="dialog" aria-expanded={`${isExpanded}`} - aria-describedby={this.getHintTextID()} - aria-invalid={this.getHintTextID() === this.errorTextId} + aria-describedby={this.hintTextId} + aria-invalid={this.isInvalid ? 'true' : undefined} aria-required={`${required}`} onFocus={this.onFocus} onBlur={this.onBlur} @@ -1161,10 +1216,10 @@ export class Select implements ComponentInterface { return config.get('selectCollapsedIcon', defaultIcon); } - private getHintTextID(): string | undefined { - const { el, helperText, errorText, helperTextId, errorTextId } = this; + private getHintTextId(): string | undefined { + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; - if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) { + if (isInvalid && errorText) { return errorTextId; } @@ -1179,14 +1234,14 @@ export class Select implements ComponentInterface { * Renders the helper text or error text values */ private renderHintText() { - const { helperText, errorText, helperTextId, errorTextId } = this; + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; return [ -
- {helperText} +
+ {!isInvalid ? helperText : null}
, -
- {errorText} + , ]; } diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index d4e0adc03d8..c9bb51c6f92 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 28aed88baf7..74eaa816518 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 67e2f627e49..aaad44a36e3 100644 Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts index ca82fd86f78..5d3a023e039 100644 --- a/core/src/components/select/test/custom/select.e2e.ts +++ b/core/src/components/select/test/custom/select.e2e.ts @@ -57,6 +57,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
+ + + + + + + Select - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+

Required Field

+ + Apples + Oranges + Pears + +
+ +
+

Optional Field (No Validation)

+ + Red + Blue + Green + +
+
+ +
+ Submit Form + Reset Form +
+ + + + + + diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index 759b8847d78..4fbece0a2d9 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -9,6 +9,18 @@ --color: #{globals.$tabbar-ionic-color}; --color-selected: #{globals.$tabbar-ionic-color-selected}; + /* + * In case there's scrolling, justify the content to the start. + */ + justify-content: unset; + + /* + * Ensure the tab bar does not grow larger than the viewport width. + * Useful for when the tab buttons have large labels, allowing the space + * to be evenly divided among the buttons. + */ + max-width: 100%; + /** * Tab bar has a box sizing of content-box to ensure the padding * is not included in the height. This is important for the @@ -23,6 +35,12 @@ box-shadow: #{globals.$ion-elevation-2}; + /* + * In case there are more tab buttons than can fit in the tab bar, enable + * horizontal scrolling. + */ + overflow: auto hidden; + // TODO(ROU-10853): replace this value with a layer token z-index: 10; } @@ -64,7 +82,7 @@ } :host([slot="bottom"].tab-bar-compact) { - bottom: calc(globals.$ion-space-100 + var(--ion-safe-area-bottom, 0)); + bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0)); } // Tab Bar Shapes diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx index 02bf05082d8..0717172204a 100644 --- a/core/src/components/tab-bar/tab-bar.tsx +++ b/core/src/components/tab-bar/tab-bar.tsx @@ -24,6 +24,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface'; }) export class TabBar implements ComponentInterface { private keyboardCtrl: KeyboardController | null = null; + private didLoad = false; @Element() el!: HTMLElement; @@ -42,6 +43,12 @@ export class TabBar implements ComponentInterface { @Prop() selectedTab?: string; @Watch('selectedTab') selectedTabChanged() { + // Skip the initial watcher call that happens during component load + // We handle that in componentDidLoad to ensure children are ready + if (!this.didLoad) { + return; + } + if (this.selectedTab !== undefined) { this.ionTabBarChanged.emit({ tab: this.selectedTab, @@ -87,8 +94,19 @@ export class TabBar implements ComponentInterface { */ @Event() ionTabBarLoaded!: EventEmitter; - componentWillLoad() { - this.selectedTabChanged(); + componentDidLoad() { + this.ionTabBarLoaded.emit(); + // Set the flag to indicate the component has loaded + // This allows the watcher to emit changes from this point forward + this.didLoad = true; + + // Emit the initial selected tab after the component is fully loaded + // This ensures all child components (ion-tab-button) are ready + if (this.selectedTab !== undefined) { + this.ionTabBarChanged.emit({ + tab: this.selectedTab, + }); + } } async connectedCallback() { @@ -112,10 +130,6 @@ export class TabBar implements ComponentInterface { } } - componentDidLoad() { - this.ionTabBarLoaded.emit(); - } - private getShape(): string | undefined { const theme = getIonTheme(this); const { shape } = this; diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index fe315a1bce2..3b8697b1965 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 6f02f797917..1bdf0306ba9 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png index 1e7df56a8b2..2363e1bc0df 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png index fdadcce1166..f30e8a41c9f 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png index e8ae37408be..72ae83f87cb 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8142f77c111..c4e13cf4adf 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png index 54b5dcd6590..87b1455219d 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png index fde8ea0f00d..4655b303eb4 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2c767431ff6..2ad18395895 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9bfcd71d0da..42913e876f3 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Safari-linux.png index d9d3ab20bb3..c8140c39a19 100644 Binary files a/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-full-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4dd853f8385..7363f7e975d 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index f965ca56f3d..b7002e6a018 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index a0fcd70943d..86a7b32ab71 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index c16fb99d945..ac24b27ff9d 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 07292af0c91..ea2820cb718 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 1a5ddae0f83..183ad49255b 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index d752f805669..25f088ae04f 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png index 23aa68062ec..e451765985d 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png index 8b93748ae5c..6ca8470ec8c 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index d3751e58625..d2a77603305 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -14,6 +14,8 @@ align-content: center; + min-width: globals.$ion-scale-1200; + min-height: globals.$ion-scale-1200; max-height: globals.$ion-scale-1800; } diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index e03b8a69e35..169e4bb0bf6 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -5,7 +5,7 @@ import type { Attributes } from '@utils/helpers'; import { inheritAttributes } from '@utils/helpers'; import { config } from '../../global/config'; -import { getIonTheme } from '../../global/ionic-global'; +import { getIonMode, getIonTheme } from '../../global/ionic-global'; import type { TabBarChangedEventDetail, TabButtonClickEventDetail, @@ -163,10 +163,20 @@ export class TabButton implements ComponentInterface, AnchorInterface { this.selectTab(ev); }; + private canActivate(): boolean { + const theme = getIonTheme(this); + const mode = getIonMode(this); + if (theme !== 'ionic') { + return true; + } + return mode === 'md'; + } + render() { const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this; const theme = getIonTheme(this); const shape = this.getShape(); + const canActivate = this.canActivate(); const attrs = { download: this.download, href, @@ -188,7 +198,7 @@ export class TabButton implements ComponentInterface, AnchorInterface { 'tab-has-label-only': hasLabel && !hasIcon, 'tab-has-icon-only': hasIcon && !hasLabel, [`tab-layout-${layout}`]: true, - 'ion-activatable': true, + 'ion-activatable': canActivate, 'ion-selectable': true, [`tab-button-shape-${shape}`]: shape !== undefined, 'ion-focusable': true, diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8c3761af79e..1bf92fb5750 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index ce8f0fddd9c..e6b513d917a 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 163ae8355fb..e719be155a6 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index a4c40dfd08d..14ef345630e 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4cb845e0a0c..b27ac9d4727 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 50e5de3f31f..f56ed6928b7 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 53e377e2eba..e61e513512c 100644 Binary files a/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/shape/tab-button.e2e.ts-snapshots/tab-button-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 2456d0d6197..fcb66642563 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -68,32 +68,33 @@ export class Tabs implements NavOutlet { this.ionNavWillLoad.emit(); } - componentWillRender() { + componentDidLoad() { + this.updateTabBar(); + } + + componentDidUpdate() { + this.updateTabBar(); + } + + private updateTabBar() { const tabBar = this.el.querySelector('ion-tab-bar'); - if (tabBar) { - let tab = this.selectedTab ? this.selectedTab.tab : undefined; - - // Fallback: if no selectedTab is set but we're using router mode, - // determine the active tab from the current URL. This works around - // timing issues in React Router integration where setRouteId may not - // be called in time for the initial render. - // TODO(FW-6724): Remove this with React Router upgrade - if (!tab && this.useRouter && typeof window !== 'undefined') { - const currentPath = window.location.pathname; - const tabButtons = this.el.querySelectorAll('ion-tab-button'); - - // Look for a tab button that matches the current path pattern - for (const tabButton of tabButtons) { - const tabId = tabButton.getAttribute('tab'); - if (tabId && currentPath.includes(tabId)) { - tab = tabId; - break; - } - } - } + if (!tabBar) { + return; + } - tabBar.selectedTab = tab; + const tab = this.selectedTab ? this.selectedTab.tab : undefined; + + // If tabs has no selected tab but tab-bar already has a selected-tab set, + // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements. + if (tab === undefined) { + return; + } + + if (tabBar.selectedTab === tab) { + return; } + + tabBar.selectedTab = tab; } /** @@ -165,6 +166,7 @@ export class Tabs implements NavOutlet { this.selectedTab = selectedTab; this.ionTabsWillChange.emit({ tab: selectedTab.tab }); selectedTab.active = true; + this.updateTabBar(); return Promise.resolve(); } diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss index 3b29ab1a685..c18190b4363 100644 --- a/core/src/components/textarea/textarea.ionic.outline.scss +++ b/core/src/components/textarea/textarea.ionic.outline.scss @@ -5,7 +5,7 @@ :host(.textarea-fill-outline) { --border-width: #{globals.$ion-border-size-025}; - --border-color: #{globals.$ion-primitives-neutral-500}; + --border-color: #{globals.$ion-border-input-default}; } // Textarea Fill: Outline, Textarea Wrapper diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss index 32248974507..b0009fdfc10 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -7,12 +7,12 @@ // -------------------------------------------------- :host { - --border-color: #{globals.$ion-primitives-neutral-500}; + --border-color: #{globals.$ion-border-input-default}; --color: #{globals.$ion-text-default}; - --highlight-color-valid: #{globals.$ion-semantics-success-900}; + --highlight-color-valid: #{globals.$ion-text-success}; --highlight-color-invalid: #{globals.$ion-semantics-danger-800}; --highlight-color-focused: #{globals.ion-color(primary, base)}; - --placeholder-color: #{globals.$ion-primitives-neutral-800}; + --placeholder-color: #{globals.$ion-text-subtlest}; --placeholder-opacity: 1; --background: #{globals.$ion-bg-surface-default}; --padding-bottom: #{globals.$ion-space-200}; @@ -64,15 +64,15 @@ // -------------------------------------------------- :host(.textarea-shape-soft) { - --border-radius: #{globals.$ion-border-radius-200}; + --border-radius: #{globals.$ion-soft-xl}; } :host(.textarea-shape-round) { - --border-radius: #{globals.$ion-border-radius-400}; + --border-radius: #{globals.$ion-round-xl}; } :host(.textarea-shape-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; + --border-radius: #{globals.$ion-rectangular-xl}; } // Textarea Wrapper @@ -112,7 +112,7 @@ transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive, transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive; - color: globals.$ion-primitives-neutral-1000; + color: globals.$ion-text-subtle; } :host(.label-floating) .label-text-wrapper { @@ -143,7 +143,7 @@ ion-icon { .textarea-bottom .helper-text, .textarea-bottom .counter { - color: globals.$ion-primitives-neutral-800; + color: globals.$ion-text-subtlest; } :host(.has-focus.ion-valid) .helper-text { diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 6a6d51f3c4b..272b21f3077 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -15,7 +15,7 @@ import { writeTask, } from '@stencil/core'; import type { NotchController } from '@utils/forms'; -import { createNotchController } from '@utils/forms'; +import { createNotchController, checkInvalidState } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; @@ -348,16 +348,6 @@ export class Textarea implements ComponentInterface { } } - /** - * Checks if the textarea is in an invalid state based on Ionic validation classes - */ - private checkValidationState(): boolean { - const hasIonTouched = this.el.classList.contains('ion-touched'); - const hasIonInvalid = this.el.classList.contains('ion-invalid'); - - return hasIonTouched && hasIonInvalid; - } - connectedCallback() { const { el } = this; this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this)); @@ -370,7 +360,7 @@ export class Textarea implements ComponentInterface { // Watch for class changes to update validation state if (Build.isBrowser && typeof MutationObserver !== 'undefined') { this.validationObserver = new MutationObserver(() => { - const newIsInvalid = this.checkValidationState(); + const newIsInvalid = checkInvalidState(this.el); if (this.isInvalid !== newIsInvalid) { this.isInvalid = newIsInvalid; // Force a re-render to update aria-describedby immediately @@ -385,7 +375,7 @@ export class Textarea implements ComponentInterface { } // Always set initial state - this.isInvalid = this.checkValidationState(); + this.isInvalid = checkInvalidState(this.el); this.debounceChanged(); if (Build.isBrowser) { diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png index e880de8b9c9..5dbf0d9b4f0 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png index d5e25bd2310..48f3b106d2f 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 6367193719e..8b9ab482340 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png index b00779bd499..39dfd745717 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png index dcf9d346dab..9c4554c3c7e 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index a5acd5db6aa..b83dedc2d3f 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9136523f55f..2ba46a06c28 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png index 6aebe4972b9..8e776c351a1 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 726f7ca33d2..27d42e8651b 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index f2d776d044b..3f590fe815a 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 24556a5889d..6a458a06edd 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index 0fcd3628ab1..057ce1ac369 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index 56969878ee0..d49932737fc 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png index a7b286accd1..e29929547d8 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3835a69db84..e92f04e0fc7 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8e3ea9c3f1e..1aa8d8a14a7 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 83ba57dfc7f..2469f1fa4d2 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 8e645f1281c..0ac33b56b8b 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 9edde694362..bd9d0c1ff0b 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png index d671fe37daa..ff57c858768 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6b7504b5291..5dfc7bf55ae 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png index dc5de01469b..663d8a6c08b 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png index 381030d4c3f..0a845bc6f4c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2114ec6c288..1efd6c081a3 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index e3cd4274692..6f29031a113 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png index 104f336bcd1..d65e937ac95 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png index 90e3cf290e6..75e4e655c1c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png index 2f375a2d0f5..60cfcc12ac6 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png index e1d34335888..656d00b315a 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index d3ae6538e00..2f5169cb323 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index c490be182ee..02128a5bfef 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 358871b2f04..4f3df9c192d 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 965ba1a0d63..a69a5de861c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 55b34ab1ccc..cce894914e9 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png index 3f51c2caa60..323146cc7a9 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index d93ef08c31e..0f54de1a1b8 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9f4b1c22d9c..49f039dca5d 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png index 5c78811872c..01ff72f416f 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png index b4cabe41125..de95ae38156 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png index fa1def4a7f4..76af0937fbe 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png index 7153f9e1cfa..e7f71d71759 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6bdc5f9b3d6..d4085b7fd80 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2bd3cd19cc9..4ab51374ebf 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png index 611a4833316..304e8aa0b51 100644 Binary files a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3b5a73dc7e8..8c3eae6686d 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index e5f90c870c2..1e00b73c656 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index ebc2ae28583..b152332e550 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5863b119b56..76fb89a4e8f 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 097bb36dff7..99492afbef5 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 827f21d97e1..a185451c50e 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index c91b7cfa18b..7625b398b9c 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index cbddcd39c7e..39a7e794a2f 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 17ef1c0a83f..85c06c84dc2 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html index e8e286b7a73..a127f5c5af6 100644 --- a/core/src/components/toggle/test/basic/index.html +++ b/core/src/components/toggle/test/basic/index.html @@ -45,6 +45,20 @@ Full-width
Long Label Long Label Long Label Long Label Long Label Long Label
+ + diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts index 0cdd76792a4..9502df83b55 100644 --- a/core/src/components/toggle/test/basic/toggle.e2e.ts +++ b/core/src/components/toggle/test/basic/toggle.e2e.ts @@ -1,7 +1,65 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { +/** + * This behavior does not vary across modes/directions + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toggle: ionChange'), () => { + test('should fire ionChange when interacting with toggle', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionChange = await page.spyOnEvent('ionChange'); + const toggle = page.locator('ion-toggle'); + + await toggle.click(); + expect(ionChange).toHaveReceivedEventDetail({ value: 'my-toggle', checked: true }); + + await toggle.click(); + expect(ionChange).toHaveReceivedEventDetail({ value: 'my-toggle', checked: false }); + }); + + test('should fire ionChange when interacting with toggle in item', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionChange = await page.spyOnEvent('ionChange'); + const item = page.locator('ion-item'); + + await item.click(); + expect(ionChange).toHaveReceivedEventDetail({ value: 'my-toggle', checked: true }); + + await item.click(); + expect(ionChange).toHaveReceivedEventDetail({ value: 'my-toggle', checked: false }); + }); + + test('should not fire when programmatically setting a value', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionChange = await page.spyOnEvent('ionChange'); + const toggle = page.locator('ion-toggle'); + + await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true)); + expect(ionChange).not.toHaveReceivedEvent(); + }); + }); + test.describe(title('toggle: click'), () => { test('should trigger onclick only once when clicking the label', async ({ page }, testInfo) => { testInfo.annotations.push({ @@ -35,4 +93,195 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => expect(clickCount).toBe(1); }); }); + + test.describe(title('toggle: ionFocus'), () => { + test('should not have visual regressions', async ({ page, pageUtils }) => { + await page.setContent( + ` + + +
+ Unchecked +
+ `, + config + ); + + await pageUtils.pressKeys('Tab'); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`toggle-focus`)); + }); + + test('should not have visual regressions when interacting with toggle in item', async ({ page, pageUtils }) => { + await page.setContent( + ` + + Unchecked + + `, + config + ); + + // Test focus with keyboard navigation + await pageUtils.pressKeys('Tab'); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`toggle-in-item-focus`)); + }); + + test('should fire ionFocus when toggle is focused', async ({ page, pageUtils }) => { + await page.setContent( + ` + + `, + config + ); + + const ionFocus = await page.spyOnEvent('ionFocus'); + + // Test focus with keyboard navigation + await pageUtils.pressKeys('Tab'); + + expect(ionFocus).toHaveReceivedEventTimes(1); + + // Reset focus + const toggle = page.locator('ion-toggle'); + const toggleBoundingBox = (await toggle.boundingBox())!; + await page.mouse.click(0, toggleBoundingBox.height + 1); + + // Test focus with click + await toggle.click(); + + expect(ionFocus).toHaveReceivedEventTimes(2); + }); + + test('should fire ionFocus when interacting with toggle in item', async ({ page, pageUtils }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionFocus = await page.spyOnEvent('ionFocus'); + + // Test focus with keyboard navigation + await pageUtils.pressKeys('Tab'); + + expect(ionFocus).toHaveReceivedEventTimes(1); + + // Verify that the event target is the toggle and not the item + const eventByKeyboard = ionFocus.events[0]; + expect((eventByKeyboard.target as HTMLElement).tagName.toLowerCase()).toBe('ion-toggle'); + + // Reset focus + const toggle = page.locator('ion-toggle'); + const toggleBoundingBox = (await toggle.boundingBox())!; + await page.mouse.click(0, toggleBoundingBox.height + 1); + + // Test focus with click + const item = page.locator('ion-item'); + await item.click(); + + expect(ionFocus).toHaveReceivedEventTimes(2); + + // Verify that the event target is the toggle and not the item + const eventByClick = ionFocus.events[0]; + expect((eventByClick.target as HTMLElement).tagName.toLowerCase()).toBe('ion-toggle'); + }); + + test('should not fire when programmatically setting a value', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionFocus = await page.spyOnEvent('ionFocus'); + const toggle = page.locator('ion-toggle'); + + await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true)); + expect(ionFocus).not.toHaveReceivedEvent(); + }); + }); + + test.describe(title('toggle: ionBlur'), () => { + test('should fire ionBlur when toggle is blurred', async ({ page, pageUtils }) => { + await page.setContent( + ` + + `, + config + ); + + const ionBlur = await page.spyOnEvent('ionBlur'); + + // Test blur with keyboard navigation + // Focus the toggle + await pageUtils.pressKeys('Tab'); + // Blur the toggle + await pageUtils.pressKeys('Tab'); + + expect(ionBlur).toHaveReceivedEventTimes(1); + + // Test blur with click + const toggle = page.locator('ion-toggle'); + // Focus the toggle + await toggle.click(); + // Blur the toggle by clicking outside of it + const toggleBoundingBox = (await toggle.boundingBox())!; + await page.mouse.click(0, toggleBoundingBox.height + 1); + + expect(ionBlur).toHaveReceivedEventTimes(2); + }); + + test('should fire ionBlur after interacting with toggle in item', async ({ page, pageUtils }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionBlur = await page.spyOnEvent('ionBlur'); + + // Test blur with keyboard navigation + // Focus the toggle + await pageUtils.pressKeys('Tab'); + // Blur the toggle + await pageUtils.pressKeys('Tab'); + + expect(ionBlur).toHaveReceivedEventTimes(1); + + // Verify that the event target is the toggle and not the item + const event = ionBlur.events[0]; + expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-toggle'); + + // Test blur with click + const item = page.locator('ion-item'); + await item.click(); + // Blur the toggle by clicking outside of it + const itemBoundingBox = (await item.boundingBox())!; + await page.mouse.click(0, itemBoundingBox.height + 1); + + expect(ionBlur).toHaveReceivedEventTimes(2); + + // Verify that the event target is the toggle and not the item + const eventByClick = ionBlur.events[0]; + expect((eventByClick.target as HTMLElement).tagName.toLowerCase()).toBe('ion-toggle'); + }); + }); }); diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0d7cbc11195 Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bb21be2862e Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..07a370b9311 Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ee7a99593cd Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a54d1caeb87 Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f9e16f871ef Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 944d2fc2486..f8b818009a3 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index c404af648b0..1ae409337e4 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 785299f5bac..3b82f648636 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png index 944d2fc2486..f8b818009a3 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png index c404af648b0..1ae409337e4 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png index 785299f5bac..3b82f648636 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7624d9a7ec1..5a1beaa51a9 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index e8c57bdeaad..904da7ee868 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Safari-linux.png index 30f920cd9dc..7370694a3f8 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index c84b077573b..ccd7a0834a2 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index 883fd1952d9..076ef1fcab0 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 25782efdf34..d525fcfea6b 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index c84b077573b..ccd7a0834a2 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 883fd1952d9..076ef1fcab0 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 25782efdf34..d525fcfea6b 100644 Binary files a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 854a43da97d..e285f96b9a1 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4c1752ad207..65ff52820ab 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png index cffece140e5..b9a6cffc052 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4f01d4e0889..cef399403a9 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6c5110f4774..fbacba04e28 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png index 8b5be1a707c..f710868d5d8 100644 Binary files a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html index caeda79d077..b872bcf3ea3 100644 --- a/core/src/components/toggle/test/item/index.html +++ b/core/src/components/toggle/test/item/index.html @@ -223,6 +223,20 @@

Multiline Label

+ + diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1cbcd706025..574279a509f 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index ec96fe69de5..6e5eb0dc571 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png index d4ecf7a49cd..feb32e58430 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png index 8f11969b2cb..71dc22415b4 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png index 34a1bb87a4e..318cd34725e 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png index 32f0bf2e8cd..c10c711cc73 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4f01d4e0889..cef399403a9 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6c5110f4774..fbacba04e28 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png index 8b5be1a707c..f710868d5d8 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png index 50d33216ca3..0fec555bcb2 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png index bbf9939ea08..40401832bfc 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png index 703946fd99c..3f3b7f308b7 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 277d229c1ef..074660dce3b 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8a877e6eae1..de03e16f34c 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index a75e0564980..08d20cbec71 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png index a7cdfff27cb..fd6bc48e0f3 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png index 2d535b114e7..b99f5bc4d04 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png index ad2aff47d92..659bf66d598 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png index e5d2c75892b..693d131ffd7 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3e45b14e6ea..b37a27731d9 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png index 17a0844b85a..99f33239391 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png index e85ba4ccf0f..a0d73338d4d 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8b5a1a71dbc..2ae20d15aa5 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png index b2fac7cd794..4ae9dbd38f3 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index c488cc74584..75bea2affb4 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index e7d38d740a4..a249fbfc8e8 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index 3c10b3c9fed..462fe8a97e0 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index 04d4c2742d0..3600a5604e4 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 65f0e4d6c7d..ce3b567d654 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 79865d23676..3cd4e33b7e6 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4f01d4e0889..cef399403a9 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6c5110f4774..fbacba04e28 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png index 8b5be1a707c..f710868d5d8 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png index f1f30129df4..e8267cd779b 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png index b828f161f21..22308721b7e 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png index 40340d5427a..7221c3eaf8e 100644 Binary files a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/validation/index.html b/core/src/components/toggle/test/validation/index.html new file mode 100644 index 00000000000..54932edeb08 --- /dev/null +++ b/core/src/components/toggle/test/validation/index.html @@ -0,0 +1,184 @@ + + + + + Toggle - Validation + + + + + + + + + + + + + + Toggle - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+

Required Field

+ Tap to turn on +
+ +
+

Optional Field (No Validation)

+ Optional Toggle +
+
+ +
+ Submit Form + Reset Form +
+ + + + + + diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss index d0ef0b7c2ca..52c73a6462c 100644 --- a/core/src/components/toggle/toggle.ionic.scss +++ b/core/src/components/toggle/toggle.ionic.scss @@ -22,8 +22,6 @@ @include globals.typography(globals.$ion-body-md-regular); - width: 100%; - z-index: 2; // TODO(ROU-10853): replace this value with a layer token. } diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 17db54623dc..9f416ae88e1 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -1,7 +1,8 @@ import checkRegular from '@phosphor-icons/core/assets/regular/check.svg'; import minusRegular from '@phosphor-icons/core/assets/regular/minus.svg'; import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; +import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; +import { checkInvalidState } from '@utils/forms'; import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; import { hapticSelection } from '@utils/native/haptic'; @@ -44,16 +45,23 @@ export class Toggle implements ComponentInterface { private helperTextId = `${this.inputId}-helper-text`; private errorTextId = `${this.inputId}-error-text`; private gesture?: Gesture; - private focusEl?: HTMLElement; private lastDrag = 0; private inheritedAttributes: Attributes = {}; private toggleTrack?: HTMLElement; private didLoad = false; + private validationObserver?: MutationObserver; @Element() el!: HTMLIonToggleElement; @State() activated = false; + /** + * Track validation state for proper aria-live announcements. + */ + @State() isInvalid = false; + + @State() private hintTextId?: string; + /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -166,7 +174,6 @@ export class Toggle implements ComponentInterface { const isNowChecked = !checked; this.checked = isNowChecked; - this.setFocus(); this.ionChange.emit({ checked: isNowChecked, value, @@ -174,15 +181,56 @@ export class Toggle implements ComponentInterface { } async connectedCallback() { + const { didLoad, el } = this; + /** * If we have not yet rendered * ion-toggle, then toggleTrack is not defined. * But if we are moving ion-toggle via appendChild, * then toggleTrack will be defined. */ - if (this.didLoad) { + if (didLoad) { this.setupGesture(); } + + // Watch for class changes to update validation state. + if (Build.isBrowser && typeof MutationObserver !== 'undefined') { + this.validationObserver = new MutationObserver(() => { + const newIsInvalid = checkInvalidState(el); + if (this.isInvalid !== newIsInvalid) { + this.isInvalid = newIsInvalid; + /** + * Screen readers tend to announce changes + * to `aria-describedby` when the attribute + * is changed during a blur event for a + * native form control. + * However, the announcement can be spotty + * when using a non-native form control + * and `forceUpdate()`. + * This is due to `forceUpdate()` internally + * rescheduling the DOM update to a lower + * priority queue regardless if it's called + * inside a Promise or not, thus causing + * the screen reader to potentially miss the + * change. + * By using a State variable inside a Promise, + * it guarantees a re-render immediately at + * a higher priority. + */ + Promise.resolve().then(() => { + this.hintTextId = this.getHintTextId(); + }); + } + }); + + this.validationObserver.observe(el, { + attributes: true, + attributeFilter: ['class'], + }); + } + + // Always set initial state + this.isInvalid = checkInvalidState(el); } componentDidLoad() { @@ -213,12 +261,20 @@ export class Toggle implements ComponentInterface { this.gesture.destroy(); this.gesture = undefined; } + + // Clean up validation observer to prevent memory leaks. + if (this.validationObserver) { + this.validationObserver.disconnect(); + this.validationObserver = undefined; + } } componentWillLoad() { this.inheritedAttributes = { ...inheritAriaAttributes(this.el), }; + + this.hintTextId = this.getHintTextId(); } private onStart() { @@ -247,9 +303,7 @@ export class Toggle implements ComponentInterface { } private setFocus() { - if (this.focusEl) { - this.focusEl.focus(); - } + this.el.focus(); } private onKeyDown = (ev: KeyboardEvent) => { @@ -397,10 +451,10 @@ export class Toggle implements ComponentInterface { return this.el.textContent !== ''; } - private getHintTextID(): string | undefined { - const { el, helperText, errorText, helperTextId, errorTextId } = this; + private getHintTextId(): string | undefined { + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; - if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) { + if (isInvalid && errorText) { return errorTextId; } @@ -416,7 +470,7 @@ export class Toggle implements ComponentInterface { * This element should only be rendered if hint text is set. */ private renderHintText() { - const { helperText, errorText, helperTextId, errorTextId } = this; + const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; /** * undefined and empty string values should @@ -429,11 +483,11 @@ export class Toggle implements ComponentInterface { return (
-
- {helperText} +
+ {!isInvalid ? helperText : null}
-
- {errorText} +
); @@ -447,7 +501,6 @@ export class Toggle implements ComponentInterface { color, disabled, el, - errorTextId, hasLabel, inheritedAttributes, inputId, @@ -468,14 +521,17 @@ export class Toggle implements ComponentInterface { this.onFocus()} - onBlur={() => this.onBlur()} - ref={(focusEl) => (this.focusEl = focusEl)} required={required} {...inheritedAttributes} /> diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png index 71494889134..4ad457bb0a3 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png index 48ab19f0733..f24a885323e 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png index 47b20bbe857..6eb3e0d2b5c 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png index 74934869e01..7bc076a20d1 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png index 4aba9999d78..a1253d9355a 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png index dc239bb06bb..303b43b5954 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index d3ea351dd98..69612443764 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2868c197b62..26419a019dc 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png index a286b224a5f..baee190f0c4 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png index a71ece23e27..c01630f5f68 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index b3669b2e6e3..08b39898075 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index b7d0d826a5b..fd3a0bb3daa 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/ionic/utils.bundle.ionic.scss b/core/src/css/ionic/utils.bundle.ionic.scss index 3918ea3f6df..147e9c241a0 100644 --- a/core/src/css/ionic/utils.bundle.ionic.scss +++ b/core/src/css/ionic/utils.bundle.ionic.scss @@ -1,5 +1,3 @@ -@forward "../../foundations/ionic.utility"; - // The padding utility is not included here because it // uses hardcoded pixel values. Instead, the margin // and padding related utilities are generated by diff --git a/core/src/css/test/link/basic/index.html b/core/src/css/test/link/basic/index.html deleted file mode 100644 index 7662685bfec..00000000000 --- a/core/src/css/test/link/basic/index.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - Link - Basic - - - - - - - - - - - - - - Link - Basic - - - - -

Standalone (.ion-link)

- - -

Underline (.ion-link-underline)

- - -

Links in Content

-
-
- Lorem ipsum dolor sit amet consectetur, default link adipisicing elit. -
-
- Lorem ipsum dolor sit amet consectetur, - underline link adipisicing elit. -
-
- -

Parent Element

-
- - -
- - - - diff --git a/core/src/css/test/link/basic/link.e2e.ts b/core/src/css/test/link/basic/link.e2e.ts deleted file mode 100644 index 8ce38c17fd4..00000000000 --- a/core/src/css/test/link/basic/link.e2e.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -/** - * Link global classes are only available in the Ionic theme. - */ -configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('link global classes'), () => { - test.beforeEach(async ({ page }) => { - await page.goto('/src/css/test/link/basic/index.html', config); - }); - - test.describe('.ion-link class', () => { - test('should apply to anchor elements', async ({ page }) => { - const standalone = page.locator('#standalone'); - - await expect(standalone).toHaveScreenshot(screenshot('link-standalone')); - }); - - test('should apply to child anchor elements', async ({ page }) => { - const standalone = page.locator('#standalone-nested'); - - await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested')); - }); - }); - - test.describe('.ion-link-underline class', () => { - test('should apply to anchor elements', async ({ page }) => { - const standalone = page.locator('#underline'); - - await expect(standalone).toHaveScreenshot(screenshot('link-underline')); - }); - - test('should apply to child anchor elements', async ({ page }) => { - const standalone = page.locator('#underline-nested'); - - await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested')); - }); - }); - }); -}); diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 3207fb77c7b..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 659e5531f0b..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 53b7a5ce4d9..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 633b9d09726..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index d9f1ee59986..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 166b4da9b68..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index f641e18ba67..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index e9d7ddfee73..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index bff3adf3666..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 7ceec618f9c..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index c0cc835bb11..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index a49051e4b84..00000000000 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html deleted file mode 100644 index d956b7193f0..00000000000 --- a/core/src/css/test/typography/basic/index.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - Typography - Display Tokens - - - - - - - - - - - - - Typography - Display Tokens - - - - -
- Display - lg -

display-lg-regular

-

display-lg-light

- sm -

display-sm-regular

-

display-sm-light

-
-
-
- Headings - h1 -

heading-h1-regular

-

heading-h1-medium

-

heading-h1-semi-bold

-

heading-h1-bold

- h2 -

heading-h2-regular

-

heading-h2-medium

-

heading-h2-semi-bold

-

heading-h2-bold

- h3 -

heading-h3-regular

-

heading-h3-medium

-

heading-h3-semi-bold

-

heading-h3-bold

- h4 -

heading-h4-regular

-

heading-h4-medium

-

heading-h4-semi-bold

-

heading-h4-bold

- h5 -

heading-h5-regular

-

heading-h5-medium

-

heading-h5-semi-bold

-

heading-h5-bold

- h6 -

heading-h6-regular

-

heading-h6-medium

-

heading-h6-semi-bold

-

heading-h6-bold

-
-
-
- Body - sm -

ion-body-sm-regular

-

ion-body-sm-medium

-

ion-body-sm-semi-bold

-

ion-body-sm-bold

- md -

ion-body-md-regular

-

ion-body-md-medium

-

ion-body-md-semi-bold

-

ion-body-md-bold

- lg -

ion-body-lg-regular

-

ion-body-lg-medium

-

ion-body-lg-semi-bold

-

ion-body-lg-bold

-
-
-
- Action -

ion-action-xs

-

ion-action-sm

-

ion-action-md

-

ion-action-lg

-
-
-
- Overline -

ion-overline-regular

-

ion-overline-medium

-

ion-overline-semi-bold

-

ion-overline-bold

-
- - - - diff --git a/core/src/css/test/typography/basic/typography.e2e.ts b/core/src/css/test/typography/basic/typography.e2e.ts deleted file mode 100644 index 2904bbcb355..00000000000 --- a/core/src/css/test/typography/basic/typography.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('Typography: basic'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/css/test/typography/basic`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`)); - }); - }); -}); diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 8e3e26ee8a3..00000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index cdfb789ae2c..00000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index dd4febbf39b..00000000000 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/foundations/README.md b/core/src/foundations/README.md index 261372cccd6..77f965758a2 100644 --- a/core/src/foundations/README.md +++ b/core/src/foundations/README.md @@ -10,10 +10,9 @@ Design tokens represent small, repeated design decisions that make up a design s The Ionic Design Tokens come from the [outsystems-design-tokens repo](https://github.com/OutSystems/outsystems-design-tokens). -Using the [outsystems-design-tokens package](https://www.npmjs.com/package/outsystems-design-tokens), we use its `npx run build.tokens` to pass our configuration file, that will generate 2 files inside `core/src/foundations`: +Using the [outsystems-design-tokens package](https://www.npmjs.com/package/outsystems-design-tokens), we use its `npx run build.tokens` to pass our configuration file, that will generate one file inside `core/src/foundations`: - `ionic.vars.scss` - SCSS variables, based on the native ones, that are used internally on all CSS/SCSS code. -- `ionic.utility.scss` - list of utility classes based on each Design Token. This refers, more or less, to what's known as System Tokens, which are decisions that systematize the design language for a specific theme or context. @@ -50,12 +49,6 @@ SCSS Variable: $ion-semantics-primary-300 ``` -Utility class: - -```css -.ion-semantics-primary-300 -``` - ## Managing the Design Tokens It's not expected that the tokens need to be changed frequently. This represents the base of all the Ionic Design System and any change to them should be taken carefully, synced with the UX/UI Team and reviewed by other devs. diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss deleted file mode 100644 index b1b8dbb4282..00000000000 --- a/core/src/foundations/ionic.utility.scss +++ /dev/null @@ -1,3597 +0,0 @@ -// Do not edit directly, this file was auto-generated. - -@import "./ionic.vars"; -@import "../themes/mixins"; - -.ion-display-sm-regular { - font-size: $ion-font-size-800; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-1100; - text-transform: none; - text-decoration: none; -} - -.ion-display-sm-light { - font-size: $ion-font-size-800; - font-style: normal; - font-weight: $ion-font-weight-light; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-1100; - text-transform: none; - text-decoration: none; -} - -.ion-display-lg-regular { - font-size: $ion-font-size-900; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-1200; - text-transform: none; - text-decoration: none; -} - -.ion-display-lg-light { - font-size: $ion-font-size-900; - font-style: normal; - font-weight: $ion-font-weight-light; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-1200; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h1-regular { - font-size: $ion-font-size-700; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h1-medium { - font-size: $ion-font-size-700; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h1-semi-bold { - font-size: $ion-font-size-700; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h1-bold { - font-size: $ion-font-size-700; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h2-regular { - font-size: $ion-font-size-650; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h2-medium { - font-size: $ion-font-size-650; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h2-semi-bold { - font-size: $ion-font-size-650; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h2-bold { - font-size: $ion-font-size-650; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-900; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h3-regular { - font-size: $ion-font-size-600; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-800; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h3-medium { - font-size: $ion-font-size-600; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-800; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h3-semi-bold { - font-size: $ion-font-size-600; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-800; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h3-bold { - font-size: $ion-font-size-600; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-800; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h4-regular { - font-size: $ion-font-size-550; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h4-medium { - font-size: $ion-font-size-550; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h4-semi-bold { - font-size: $ion-font-size-550; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h4-bold { - font-size: $ion-font-size-550; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h5-regular { - font-size: $ion-font-size-500; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h5-medium { - font-size: $ion-font-size-500; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h5-semi-bold { - font-size: $ion-font-size-500; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h5-bold { - font-size: $ion-font-size-500; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h6-regular { - font-size: $ion-font-size-450; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h6-medium { - font-size: $ion-font-size-450; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h6-semi-bold { - font-size: $ion-font-size-450; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-heading-h6-bold { - font-size: $ion-font-size-450; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-700; - text-transform: none; - text-decoration: none; -} - -.ion-body-action-lg { - font-size: $ion-font-size-500; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-1; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-action-md { - font-size: $ion-font-size-400; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-1; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-action-sm { - font-size: $ion-font-size-350; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-1; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-body-action-xs { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-1; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-body-lg-regular { - font-size: $ion-font-size-400; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-lg-medium { - font-size: $ion-font-size-400; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-lg-semi-bold { - font-size: $ion-font-size-400; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-lg-bold { - font-size: $ion-font-size-400; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-md-regular { - font-size: $ion-font-size-350; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-md-medium { - font-size: $ion-font-size-350; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-md-semi-bold { - font-size: $ion-font-size-350; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-md-bold { - font-size: $ion-font-size-350; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-600; - text-transform: none; - text-decoration: none; -} - -.ion-body-sm-regular { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-body-sm-medium { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-body-sm-semi-bold { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-body-sm-bold { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-0; - line-height: $ion-font-line-height-500; - text-transform: none; - text-decoration: none; -} - -.ion-overline-regular { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-regular; - letter-spacing: $ion-font-letter-spacing-2; - line-height: $ion-font-line-height-500; - text-transform: uppercase; - text-decoration: none; -} - -.ion-overline-medium { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-medium; - letter-spacing: $ion-font-letter-spacing-2; - line-height: $ion-font-line-height-500; - text-transform: uppercase; - text-decoration: none; -} - -.ion-overline-semi-bold { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-semi-bold; - letter-spacing: $ion-font-letter-spacing-2; - line-height: $ion-font-line-height-500; - text-transform: uppercase; - text-decoration: none; -} - -.ion-overline-bold { - font-size: $ion-font-size-300; - font-style: normal; - font-weight: $ion-font-weight-bold; - letter-spacing: $ion-font-letter-spacing-2; - line-height: $ion-font-line-height-500; - text-transform: uppercase; - text-decoration: none; -} - -.ion-semantics-primary-100 { - --color: $ion-semantics-primary-100; - color: $ion-semantics-primary-100; -} -.ion-semantics-primary-200 { - --color: $ion-semantics-primary-200; - color: $ion-semantics-primary-200; -} -.ion-semantics-primary-300 { - --color: $ion-semantics-primary-300; - color: $ion-semantics-primary-300; -} -.ion-semantics-primary-400 { - --color: $ion-semantics-primary-400; - color: $ion-semantics-primary-400; -} -.ion-semantics-primary-500 { - --color: $ion-semantics-primary-500; - color: $ion-semantics-primary-500; -} -.ion-semantics-primary-600 { - --color: $ion-semantics-primary-600; - color: $ion-semantics-primary-600; -} -.ion-semantics-primary-700 { - --color: $ion-semantics-primary-700; - color: $ion-semantics-primary-700; -} -.ion-semantics-primary-800 { - --color: $ion-semantics-primary-800; - color: $ion-semantics-primary-800; -} -.ion-semantics-primary-900 { - --color: $ion-semantics-primary-900; - color: $ion-semantics-primary-900; -} -.ion-semantics-primary-1000 { - --color: $ion-semantics-primary-1000; - color: $ion-semantics-primary-1000; -} -.ion-semantics-primary-1100 { - --color: $ion-semantics-primary-1100; - color: $ion-semantics-primary-1100; -} -.ion-semantics-primary-1200 { - --color: $ion-semantics-primary-1200; - color: $ion-semantics-primary-1200; -} -.ion-semantics-primary-base { - --color: $ion-semantics-primary-base; - color: $ion-semantics-primary-base; -} -.ion-semantics-info-100 { - --color: $ion-semantics-info-100; - color: $ion-semantics-info-100; -} -.ion-semantics-info-200 { - --color: $ion-semantics-info-200; - color: $ion-semantics-info-200; -} -.ion-semantics-info-300 { - --color: $ion-semantics-info-300; - color: $ion-semantics-info-300; -} -.ion-semantics-info-400 { - --color: $ion-semantics-info-400; - color: $ion-semantics-info-400; -} -.ion-semantics-info-500 { - --color: $ion-semantics-info-500; - color: $ion-semantics-info-500; -} -.ion-semantics-info-600 { - --color: $ion-semantics-info-600; - color: $ion-semantics-info-600; -} -.ion-semantics-info-700 { - --color: $ion-semantics-info-700; - color: $ion-semantics-info-700; -} -.ion-semantics-info-800 { - --color: $ion-semantics-info-800; - color: $ion-semantics-info-800; -} -.ion-semantics-info-900 { - --color: $ion-semantics-info-900; - color: $ion-semantics-info-900; -} -.ion-semantics-info-1000 { - --color: $ion-semantics-info-1000; - color: $ion-semantics-info-1000; -} -.ion-semantics-info-1100 { - --color: $ion-semantics-info-1100; - color: $ion-semantics-info-1100; -} -.ion-semantics-info-1200 { - --color: $ion-semantics-info-1200; - color: $ion-semantics-info-1200; -} -.ion-semantics-info-base { - --color: $ion-semantics-info-base; - color: $ion-semantics-info-base; -} -.ion-semantics-success-100 { - --color: $ion-semantics-success-100; - color: $ion-semantics-success-100; -} -.ion-semantics-success-200 { - --color: $ion-semantics-success-200; - color: $ion-semantics-success-200; -} -.ion-semantics-success-300 { - --color: $ion-semantics-success-300; - color: $ion-semantics-success-300; -} -.ion-semantics-success-400 { - --color: $ion-semantics-success-400; - color: $ion-semantics-success-400; -} -.ion-semantics-success-500 { - --color: $ion-semantics-success-500; - color: $ion-semantics-success-500; -} -.ion-semantics-success-600 { - --color: $ion-semantics-success-600; - color: $ion-semantics-success-600; -} -.ion-semantics-success-700 { - --color: $ion-semantics-success-700; - color: $ion-semantics-success-700; -} -.ion-semantics-success-800 { - --color: $ion-semantics-success-800; - color: $ion-semantics-success-800; -} -.ion-semantics-success-900 { - --color: $ion-semantics-success-900; - color: $ion-semantics-success-900; -} -.ion-semantics-success-1000 { - --color: $ion-semantics-success-1000; - color: $ion-semantics-success-1000; -} -.ion-semantics-success-1100 { - --color: $ion-semantics-success-1100; - color: $ion-semantics-success-1100; -} -.ion-semantics-success-1200 { - --color: $ion-semantics-success-1200; - color: $ion-semantics-success-1200; -} -.ion-semantics-success-base { - --color: $ion-semantics-success-base; - color: $ion-semantics-success-base; -} -.ion-semantics-danger-100 { - --color: $ion-semantics-danger-100; - color: $ion-semantics-danger-100; -} -.ion-semantics-danger-200 { - --color: $ion-semantics-danger-200; - color: $ion-semantics-danger-200; -} -.ion-semantics-danger-300 { - --color: $ion-semantics-danger-300; - color: $ion-semantics-danger-300; -} -.ion-semantics-danger-400 { - --color: $ion-semantics-danger-400; - color: $ion-semantics-danger-400; -} -.ion-semantics-danger-500 { - --color: $ion-semantics-danger-500; - color: $ion-semantics-danger-500; -} -.ion-semantics-danger-600 { - --color: $ion-semantics-danger-600; - color: $ion-semantics-danger-600; -} -.ion-semantics-danger-700 { - --color: $ion-semantics-danger-700; - color: $ion-semantics-danger-700; -} -.ion-semantics-danger-800 { - --color: $ion-semantics-danger-800; - color: $ion-semantics-danger-800; -} -.ion-semantics-danger-900 { - --color: $ion-semantics-danger-900; - color: $ion-semantics-danger-900; -} -.ion-semantics-danger-1000 { - --color: $ion-semantics-danger-1000; - color: $ion-semantics-danger-1000; -} -.ion-semantics-danger-1100 { - --color: $ion-semantics-danger-1100; - color: $ion-semantics-danger-1100; -} -.ion-semantics-danger-1200 { - --color: $ion-semantics-danger-1200; - color: $ion-semantics-danger-1200; -} -.ion-semantics-danger-base { - --color: $ion-semantics-danger-base; - color: $ion-semantics-danger-base; -} -.ion-semantics-warning-100 { - --color: $ion-semantics-warning-100; - color: $ion-semantics-warning-100; -} -.ion-semantics-warning-200 { - --color: $ion-semantics-warning-200; - color: $ion-semantics-warning-200; -} -.ion-semantics-warning-300 { - --color: $ion-semantics-warning-300; - color: $ion-semantics-warning-300; -} -.ion-semantics-warning-400 { - --color: $ion-semantics-warning-400; - color: $ion-semantics-warning-400; -} -.ion-semantics-warning-500 { - --color: $ion-semantics-warning-500; - color: $ion-semantics-warning-500; -} -.ion-semantics-warning-600 { - --color: $ion-semantics-warning-600; - color: $ion-semantics-warning-600; -} -.ion-semantics-warning-700 { - --color: $ion-semantics-warning-700; - color: $ion-semantics-warning-700; -} -.ion-semantics-warning-800 { - --color: $ion-semantics-warning-800; - color: $ion-semantics-warning-800; -} -.ion-semantics-warning-900 { - --color: $ion-semantics-warning-900; - color: $ion-semantics-warning-900; -} -.ion-semantics-warning-1000 { - --color: $ion-semantics-warning-1000; - color: $ion-semantics-warning-1000; -} -.ion-semantics-warning-1100 { - --color: $ion-semantics-warning-1100; - color: $ion-semantics-warning-1100; -} -.ion-semantics-warning-1200 { - --color: $ion-semantics-warning-1200; - color: $ion-semantics-warning-1200; -} -.ion-semantics-warning-base { - --color: $ion-semantics-warning-base; - color: $ion-semantics-warning-base; -} -.ion-bg-primary-base-default { - --background-color: $ion-bg-primary-base-default; - background-color: $ion-bg-primary-base-default; -} -.ion-bg-primary-base-press { - --background-color: $ion-bg-primary-base-press; - background-color: $ion-bg-primary-base-press; -} -.ion-bg-primary-subtle-default { - --background-color: $ion-bg-primary-subtle-default; - background-color: $ion-bg-primary-subtle-default; -} -.ion-bg-primary-subtle-press { - --background-color: $ion-bg-primary-subtle-press; - background-color: $ion-bg-primary-subtle-press; -} -.ion-bg-danger-base-default { - --background-color: $ion-bg-danger-base-default; - background-color: $ion-bg-danger-base-default; -} -.ion-bg-danger-base-press { - --background-color: $ion-bg-danger-base-press; - background-color: $ion-bg-danger-base-press; -} -.ion-bg-danger-subtle-default { - --background-color: $ion-bg-danger-subtle-default; - background-color: $ion-bg-danger-subtle-default; -} -.ion-bg-danger-subtle-press { - --background-color: $ion-bg-danger-subtle-press; - background-color: $ion-bg-danger-subtle-press; -} -.ion-bg-success-base-default { - --background-color: $ion-bg-success-base-default; - background-color: $ion-bg-success-base-default; -} -.ion-bg-success-base-press { - --background-color: $ion-bg-success-base-press; - background-color: $ion-bg-success-base-press; -} -.ion-bg-success-subtle-default { - --background-color: $ion-bg-success-subtle-default; - background-color: $ion-bg-success-subtle-default; -} -.ion-bg-success-subtle-press { - --background-color: $ion-bg-success-subtle-press; - background-color: $ion-bg-success-subtle-press; -} -.ion-bg-info-base-default { - --background-color: $ion-bg-info-base-default; - background-color: $ion-bg-info-base-default; -} -.ion-bg-info-base-press { - --background-color: $ion-bg-info-base-press; - background-color: $ion-bg-info-base-press; -} -.ion-bg-info-subtle-default { - --background-color: $ion-bg-info-subtle-default; - background-color: $ion-bg-info-subtle-default; -} -.ion-bg-info-subtle-press { - --background-color: $ion-bg-info-subtle-press; - background-color: $ion-bg-info-subtle-press; -} -.ion-bg-warning-base-default { - --background-color: $ion-bg-warning-base-default; - background-color: $ion-bg-warning-base-default; -} -.ion-bg-warning-base-press { - --background-color: $ion-bg-warning-base-press; - background-color: $ion-bg-warning-base-press; -} -.ion-bg-warning-subtle-default { - --background-color: $ion-bg-warning-subtle-default; - background-color: $ion-bg-warning-subtle-default; -} -.ion-bg-warning-subtle-press { - --background-color: $ion-bg-warning-subtle-press; - background-color: $ion-bg-warning-subtle-press; -} -.ion-bg-body { - --background-color: $ion-bg-body; - background-color: $ion-bg-body; -} -.ion-bg-neutral-subtle-default { - --background-color: $ion-bg-neutral-subtle-default; - background-color: $ion-bg-neutral-subtle-default; -} -.ion-bg-neutral-subtle-press { - --background-color: $ion-bg-neutral-subtle-press; - background-color: $ion-bg-neutral-subtle-press; -} -.ion-bg-neutral-base-default { - --background-color: $ion-bg-neutral-base-default; - background-color: $ion-bg-neutral-base-default; -} -.ion-bg-neutral-base-press { - --background-color: $ion-bg-neutral-base-press; - background-color: $ion-bg-neutral-base-press; -} -.ion-bg-neutral-subtlest-default { - --background-color: $ion-bg-neutral-subtlest-default; - background-color: $ion-bg-neutral-subtlest-default; -} -.ion-bg-neutral-subtlest-press { - --background-color: $ion-bg-neutral-subtlest-press; - background-color: $ion-bg-neutral-subtlest-press; -} -.ion-bg-neutral-bold-default { - --background-color: $ion-bg-neutral-bold-default; - background-color: $ion-bg-neutral-bold-default; -} -.ion-bg-neutral-bold-press { - --background-color: $ion-bg-neutral-bold-press; - background-color: $ion-bg-neutral-bold-press; -} -.ion-bg-neutral-boldest-default { - --background-color: $ion-bg-neutral-boldest-default; - background-color: $ion-bg-neutral-boldest-default; -} -.ion-bg-neutral-boldest-press { - --background-color: $ion-bg-neutral-boldest-press; - background-color: $ion-bg-neutral-boldest-press; -} -.ion-bg-surface-default { - --background-color: $ion-bg-surface-default; - background-color: $ion-bg-surface-default; -} -.ion-bg-surface-inverse { - --background-color: $ion-bg-surface-inverse; - background-color: $ion-bg-surface-inverse; -} -.ion-bg-input-default { - --background-color: $ion-bg-input-default; - background-color: $ion-bg-input-default; -} -.ion-bg-input-read-only { - --background-color: $ion-bg-input-read-only; - background-color: $ion-bg-input-read-only; -} -.ion-bg-input-press { - --background-color: $ion-bg-input-press; - background-color: $ion-bg-input-press; -} -.ion-bg-input-disabled { - --background-color: $ion-bg-input-disabled; - background-color: $ion-bg-input-disabled; -} -.ion-bg-input-bold-default { - --background-color: $ion-bg-input-bold-default; - background-color: $ion-bg-input-bold-default; -} -.ion-bg-input-bold-press { - --background-color: $ion-bg-input-bold-press; - background-color: $ion-bg-input-bold-press; -} -.ion-bg-input-bold-read-only { - --background-color: $ion-bg-input-bold-read-only; - background-color: $ion-bg-input-bold-read-only; -} -.ion-bg-input-bold-disabled { - --background-color: $ion-bg-input-bold-disabled; - background-color: $ion-bg-input-bold-disabled; -} -.ion-bg-select-default { - --background-color: $ion-bg-select-default; - background-color: $ion-bg-select-default; -} -.ion-bg-select-press { - --background-color: $ion-bg-select-press; - background-color: $ion-bg-select-press; -} -.ion-bg-extended-pumpkin-base-default { - --background-color: $ion-bg-extended-pumpkin-base-default; - background-color: $ion-bg-extended-pumpkin-base-default; -} -.ion-bg-extended-pumpkin-base-press { - --background-color: $ion-bg-extended-pumpkin-base-press; - background-color: $ion-bg-extended-pumpkin-base-press; -} -.ion-bg-extended-pumpkin-subtle-default { - --background-color: $ion-bg-extended-pumpkin-subtle-default; - background-color: $ion-bg-extended-pumpkin-subtle-default; -} -.ion-bg-extended-pumpkin-subtle-press { - --background-color: $ion-bg-extended-pumpkin-subtle-press; - background-color: $ion-bg-extended-pumpkin-subtle-press; -} -.ion-bg-extended-orange-base-default { - --background-color: $ion-bg-extended-orange-base-default; - background-color: $ion-bg-extended-orange-base-default; -} -.ion-bg-extended-orange-base-press { - --background-color: $ion-bg-extended-orange-base-press; - background-color: $ion-bg-extended-orange-base-press; -} -.ion-bg-extended-orange-subtle-default { - --background-color: $ion-bg-extended-orange-subtle-default; - background-color: $ion-bg-extended-orange-subtle-default; -} -.ion-bg-extended-orange-subtle-press { - --background-color: $ion-bg-extended-orange-subtle-press; - background-color: $ion-bg-extended-orange-subtle-press; -} -.ion-bg-extended-lime-base-default { - --background-color: $ion-bg-extended-lime-base-default; - background-color: $ion-bg-extended-lime-base-default; -} -.ion-bg-extended-lime-base-press { - --background-color: $ion-bg-extended-lime-base-press; - background-color: $ion-bg-extended-lime-base-press; -} -.ion-bg-extended-lime-subtle-default { - --background-color: $ion-bg-extended-lime-subtle-default; - background-color: $ion-bg-extended-lime-subtle-default; -} -.ion-bg-extended-lime-subtle-press { - --background-color: $ion-bg-extended-lime-subtle-press; - background-color: $ion-bg-extended-lime-subtle-press; -} -.ion-bg-extended-teal-base-default { - --background-color: $ion-bg-extended-teal-base-default; - background-color: $ion-bg-extended-teal-base-default; -} -.ion-bg-extended-teal-base-press { - --background-color: $ion-bg-extended-teal-base-press; - background-color: $ion-bg-extended-teal-base-press; -} -.ion-bg-extended-teal-subtle-default { - --background-color: $ion-bg-extended-teal-subtle-default; - background-color: $ion-bg-extended-teal-subtle-default; -} -.ion-bg-extended-teal-subtle-press { - --background-color: $ion-bg-extended-teal-subtle-press; - background-color: $ion-bg-extended-teal-subtle-press; -} -.ion-bg-extended-aqua-base-default { - --background-color: $ion-bg-extended-aqua-base-default; - background-color: $ion-bg-extended-aqua-base-default; -} -.ion-bg-extended-aqua-base-press { - --background-color: $ion-bg-extended-aqua-base-press; - background-color: $ion-bg-extended-aqua-base-press; -} -.ion-bg-extended-aqua-subtle-default { - --background-color: $ion-bg-extended-aqua-subtle-default; - background-color: $ion-bg-extended-aqua-subtle-default; -} -.ion-bg-extended-aqua-subtle-press { - --background-color: $ion-bg-extended-aqua-subtle-press; - background-color: $ion-bg-extended-aqua-subtle-press; -} -.ion-bg-extended-indigo-base-default { - --background-color: $ion-bg-extended-indigo-base-default; - background-color: $ion-bg-extended-indigo-base-default; -} -.ion-bg-extended-indigo-base-press { - --background-color: $ion-bg-extended-indigo-base-press; - background-color: $ion-bg-extended-indigo-base-press; -} -.ion-bg-extended-indigo-subtle-default { - --background-color: $ion-bg-extended-indigo-subtle-default; - background-color: $ion-bg-extended-indigo-subtle-default; -} -.ion-bg-extended-indigo-subtle-press { - --background-color: $ion-bg-extended-indigo-subtle-press; - background-color: $ion-bg-extended-indigo-subtle-press; -} -.ion-bg-extended-violet-base-default { - --background-color: $ion-bg-extended-violet-base-default; - background-color: $ion-bg-extended-violet-base-default; -} -.ion-bg-extended-violet-base-press { - --background-color: $ion-bg-extended-violet-base-press; - background-color: $ion-bg-extended-violet-base-press; -} -.ion-bg-extended-violet-subtle-default { - --background-color: $ion-bg-extended-violet-subtle-default; - background-color: $ion-bg-extended-violet-subtle-default; -} -.ion-bg-extended-violet-subtle-press { - --background-color: $ion-bg-extended-violet-subtle-press; - background-color: $ion-bg-extended-violet-subtle-press; -} -.ion-bg-extended-purple-base-default { - --background-color: $ion-bg-extended-purple-base-default; - background-color: $ion-bg-extended-purple-base-default; -} -.ion-bg-extended-purple-base-press { - --background-color: $ion-bg-extended-purple-base-press; - background-color: $ion-bg-extended-purple-base-press; -} -.ion-bg-extended-purple-subtle-default { - --background-color: $ion-bg-extended-purple-subtle-default; - background-color: $ion-bg-extended-purple-subtle-default; -} -.ion-bg-extended-purple-subtle-press { - --background-color: $ion-bg-extended-purple-subtle-press; - background-color: $ion-bg-extended-purple-subtle-press; -} -.ion-bg-extended-magenta-base-default { - --background-color: $ion-bg-extended-magenta-base-default; - background-color: $ion-bg-extended-magenta-base-default; -} -.ion-bg-extended-magenta-base-press { - --background-color: $ion-bg-extended-magenta-base-press; - background-color: $ion-bg-extended-magenta-base-press; -} -.ion-bg-extended-magenta-subtle-default { - --background-color: $ion-bg-extended-magenta-subtle-default; - background-color: $ion-bg-extended-magenta-subtle-default; -} -.ion-bg-extended-magenta-subtle-press { - --background-color: $ion-bg-extended-magenta-subtle-press; - background-color: $ion-bg-extended-magenta-subtle-press; -} -.ion-bg-extended-pink-base-default { - --background-color: $ion-bg-extended-pink-base-default; - background-color: $ion-bg-extended-pink-base-default; -} -.ion-bg-extended-pink-base-press { - --background-color: $ion-bg-extended-pink-base-press; - background-color: $ion-bg-extended-pink-base-press; -} -.ion-bg-extended-pink-subtle-default { - --background-color: $ion-bg-extended-pink-subtle-default; - background-color: $ion-bg-extended-pink-subtle-default; -} -.ion-bg-extended-pink-subtle-press { - --background-color: $ion-bg-extended-pink-subtle-press; - background-color: $ion-bg-extended-pink-subtle-press; -} -.ion-text-default { - --color: $ion-text-default; - color: $ion-text-default; -} -.ion-text-subtle { - --color: $ion-text-subtle; - color: $ion-text-subtle; -} -.ion-text-subtlest { - --color: $ion-text-subtlest; - color: $ion-text-subtlest; -} -.ion-text-primary { - --color: $ion-text-primary; - color: $ion-text-primary; -} -.ion-text-disabled { - --color: $ion-text-disabled; - color: $ion-text-disabled; -} -.ion-text-danger { - --color: $ion-text-danger; - color: $ion-text-danger; -} -.ion-text-info { - --color: $ion-text-info; - color: $ion-text-info; -} -.ion-text-warning { - --color: $ion-text-warning; - color: $ion-text-warning; -} -.ion-text-success { - --color: $ion-text-success; - color: $ion-text-success; -} -.ion-text-link-default { - --color: $ion-text-link-default; - color: $ion-text-link-default; -} -.ion-text-link-press { - --color: $ion-text-link-press; - color: $ion-text-link-press; -} -.ion-text-link-visited { - --color: $ion-text-link-visited; - color: $ion-text-link-visited; -} -.ion-text-inverse { - --color: $ion-text-inverse; - color: $ion-text-inverse; -} -.ion-text-select { - --color: $ion-text-select; - color: $ion-text-select; -} -.ion-text-extended-pumpkin { - --color: $ion-text-extended-pumpkin; - color: $ion-text-extended-pumpkin; -} -.ion-text-extended-orange { - --color: $ion-text-extended-orange; - color: $ion-text-extended-orange; -} -.ion-text-extended-lime { - --color: $ion-text-extended-lime; - color: $ion-text-extended-lime; -} -.ion-text-extended-teal { - --color: $ion-text-extended-teal; - color: $ion-text-extended-teal; -} -.ion-text-extended-aqua { - --color: $ion-text-extended-aqua; - color: $ion-text-extended-aqua; -} -.ion-text-extended-indigo { - --color: $ion-text-extended-indigo; - color: $ion-text-extended-indigo; -} -.ion-text-extended-violet { - --color: $ion-text-extended-violet; - color: $ion-text-extended-violet; -} -.ion-text-extended-purple { - --color: $ion-text-extended-purple; - color: $ion-text-extended-purple; -} -.ion-text-extended-magenta { - --color: $ion-text-extended-magenta; - color: $ion-text-extended-magenta; -} -.ion-text-extended-pink { - --color: $ion-text-extended-pink; - color: $ion-text-extended-pink; -} -.ion-border-default { - --border-color: $ion-border-default; - border-color: $ion-border-default; -} -.ion-border-boldest { - --border-color: $ion-border-boldest; - border-color: $ion-border-boldest; -} -.ion-border-subtle { - --border-color: $ion-border-subtle; - border-color: $ion-border-subtle; -} -.ion-border-subtlest { - --border-color: $ion-border-subtlest; - border-color: $ion-border-subtlest; -} -.ion-border-primary { - --border-color: $ion-border-primary; - border-color: $ion-border-primary; -} -.ion-border-success { - --border-color: $ion-border-success; - border-color: $ion-border-success; -} -.ion-border-warning { - --border-color: $ion-border-warning; - border-color: $ion-border-warning; -} -.ion-border-disabled { - --border-color: $ion-border-disabled; - border-color: $ion-border-disabled; -} -.ion-border-focus-0 { - --border-color: $ion-border-focus-0; - border-color: $ion-border-focus-0; -} -.ion-border-focus-default { - --border-color: $ion-border-focus-default; - border-color: $ion-border-focus-default; -} -.ion-border-focus-error { - --border-color: $ion-border-focus-error; - border-color: $ion-border-focus-error; -} -.ion-border-danger-default { - --border-color: $ion-border-danger-default; - border-color: $ion-border-danger-default; -} -.ion-border-danger-press { - --border-color: $ion-border-danger-press; - border-color: $ion-border-danger-press; -} -.ion-border-input-default { - --border-color: $ion-border-input-default; - border-color: $ion-border-input-default; -} -.ion-border-input-press { - --border-color: $ion-border-input-press; - border-color: $ion-border-input-press; -} -.ion-border-input-read-only { - --border-color: $ion-border-input-read-only; - border-color: $ion-border-input-read-only; -} -.ion-border-style-none { - --border-style: $ion-border-style-none; - border-style: $ion-border-style-none; -} -.ion-border-style-solid { - --border-style: $ion-border-style-solid; - border-style: $ion-border-style-solid; -} -.ion-border-style-dashed { - --border-style: $ion-border-style-dashed; - border-style: $ion-border-style-dashed; -} -.ion-border-style-dotted { - --border-style: $ion-border-style-dotted; - border-style: $ion-border-style-dotted; -} -.ion-border-size-0 { - --border-width: $ion-border-size-0; - border-width: $ion-border-size-0; -} -.ion-border-size-025 { - --border-width: $ion-border-size-025; - border-width: $ion-border-size-025; -} -.ion-border-size-050 { - --border-width: $ion-border-size-050; - border-width: $ion-border-size-050; -} -.ion-border-size-075 { - --border-width: $ion-border-size-075; - border-width: $ion-border-size-075; -} -.ion-border-radius-0 { - --border-radius: $ion-border-radius-0; - border-radius: $ion-border-radius-0; -} -.ion-border-radius-100 { - --border-radius: $ion-border-radius-100; - border-radius: $ion-border-radius-100; -} -.ion-border-radius-200 { - --border-radius: $ion-border-radius-200; - border-radius: $ion-border-radius-200; -} -.ion-border-radius-300 { - --border-radius: $ion-border-radius-300; - border-radius: $ion-border-radius-300; -} -.ion-border-radius-400 { - --border-radius: $ion-border-radius-400; - border-radius: $ion-border-radius-400; -} -.ion-border-radius-500 { - --border-radius: $ion-border-radius-500; - border-radius: $ion-border-radius-500; -} -.ion-border-radius-800 { - --border-radius: $ion-border-radius-800; - border-radius: $ion-border-radius-800; -} -.ion-border-radius-1000 { - --border-radius: $ion-border-radius-1000; - border-radius: $ion-border-radius-1000; -} -.ion-border-radius-full { - --border-radius: $ion-border-radius-full; - border-radius: $ion-border-radius-full; -} -.ion-border-radius-025 { - --border-radius: $ion-border-radius-025; - border-radius: $ion-border-radius-025; -} -.ion-icon-default { - --color: $ion-icon-default; - color: $ion-icon-default; -} -.ion-icon-subtle { - --color: $ion-icon-subtle; - color: $ion-icon-subtle; -} -.ion-icon-subtlest { - --color: $ion-icon-subtlest; - color: $ion-icon-subtlest; -} -.ion-icon-disabled { - --color: $ion-icon-disabled; - color: $ion-icon-disabled; -} -.ion-icon-primary { - --color: $ion-icon-primary; - color: $ion-icon-primary; -} -.ion-icon-select { - --color: $ion-icon-select; - color: $ion-icon-select; -} -.ion-icon-info { - --color: $ion-icon-info; - color: $ion-icon-info; -} -.ion-icon-success { - --color: $ion-icon-success; - color: $ion-icon-success; -} -.ion-icon-danger { - --color: $ion-icon-danger; - color: $ion-icon-danger; -} -.ion-icon-warning { - --color: $ion-icon-warning; - color: $ion-icon-warning; -} -.ion-icon-inverse { - --color: $ion-icon-inverse; - color: $ion-icon-inverse; -} -.ion-icon-link-default { - --color: $ion-icon-link-default; - color: $ion-icon-link-default; -} -.ion-icon-link-press { - --color: $ion-icon-link-press; - color: $ion-icon-link-press; -} -.ion-icon-link-visited { - --color: $ion-icon-link-visited; - color: $ion-icon-link-visited; -} -.ion-icon-extended-pumpkin { - --color: $ion-icon-extended-pumpkin; - color: $ion-icon-extended-pumpkin; -} -.ion-icon-extended-orange { - --color: $ion-icon-extended-orange; - color: $ion-icon-extended-orange; -} -.ion-icon-extended-lime { - --color: $ion-icon-extended-lime; - color: $ion-icon-extended-lime; -} -.ion-icon-extended-teal { - --color: $ion-icon-extended-teal; - color: $ion-icon-extended-teal; -} -.ion-icon-extended-aqua { - --color: $ion-icon-extended-aqua; - color: $ion-icon-extended-aqua; -} -.ion-icon-extended-indigo { - --color: $ion-icon-extended-indigo; - color: $ion-icon-extended-indigo; -} -.ion-icon-extended-violet { - --color: $ion-icon-extended-violet; - color: $ion-icon-extended-violet; -} -.ion-icon-extended-purple { - --color: $ion-icon-extended-purple; - color: $ion-icon-extended-purple; -} -.ion-icon-extended-magenta { - --color: $ion-icon-extended-magenta; - color: $ion-icon-extended-magenta; -} -.ion-icon-extended-pink { - --color: $ion-icon-extended-pink; - color: $ion-icon-extended-pink; -} -.ion-state-disabled { - --color: $ion-state-disabled; - color: $ion-state-disabled; -} -.ion-state-press { - --color: $ion-state-press; - color: $ion-state-press; -} -.ion-elevation-1 { - --box-shadow: $ion-elevation-1; - box-shadow: $ion-elevation-1; -} -.ion-elevation-2 { - --box-shadow: $ion-elevation-2; - box-shadow: $ion-elevation-2; -} -.ion-elevation-3 { - --box-shadow: $ion-elevation-3; - box-shadow: $ion-elevation-3; -} -.ion-elevation-4 { - --box-shadow: $ion-elevation-4; - box-shadow: $ion-elevation-4; -} - -.ion-gap-space-0 { - gap: #{$ion-space-0}; -} - -.ion-margin-space-0 { - --margin-top: #{$ion-space-0}; - --margin-end: #{$ion-space-0}; - --margin-bottom: #{$ion-space-0}; - --margin-start: #{$ion-space-0}; - - @include margin($ion-space-0); -} - -.ion-margin-top-space-0 { - --margin-top: #{$ion-space-0}; - - @include margin($ion-space-0, null, null, null); -} - -.ion-margin-end-space-0 { - --margin-end: #{$ion-space-0}; - - @include margin(null, $ion-space-0, null, null); -} - -.ion-margin-bottom-space-0 { - --margin-bottom: #{$ion-space-0}; - - @include margin(null, null, $ion-space-0, null); -} - -.ion-margin-start-space-0 { - --margin-start: #{$ion-space-0}; - - @include margin(null, null, null, $ion-space-0); -} - -.ion-padding-space-0 { - --padding-top: #{$ion-space-0}; - --padding-end: #{$ion-space-0}; - --padding-bottom: #{$ion-space-0}; - --padding-start: #{$ion-space-0}; - - @include padding($ion-space-0); -} - -.ion-padding-top-space-0 { - --padding-top: #{$ion-space-0}; - - @include padding($ion-space-0, null, null, null); -} - -.ion-padding-end-space-0 { - --padding-end: #{$ion-space-0}; - - @include padding(null, $ion-space-0, null, null); -} - -.ion-padding-bottom-space-0 { - --padding-bottom: #{$ion-space-0}; - - @include padding(null, null, $ion-space-0, null); -} - -.ion-padding-start-space-0 { - --padding-start: #{$ion-space-0}; - - @include padding(null, null, null, $ion-space-0); -} - -.ion-gap-space-100 { - gap: #{$ion-space-100}; -} - -.ion-margin-space-100 { - --margin-top: #{$ion-space-100}; - --margin-end: #{$ion-space-100}; - --margin-bottom: #{$ion-space-100}; - --margin-start: #{$ion-space-100}; - - @include margin($ion-space-100); -} - -.ion-margin-top-space-100 { - --margin-top: #{$ion-space-100}; - - @include margin($ion-space-100, null, null, null); -} - -.ion-margin-end-space-100 { - --margin-end: #{$ion-space-100}; - - @include margin(null, $ion-space-100, null, null); -} - -.ion-margin-bottom-space-100 { - --margin-bottom: #{$ion-space-100}; - - @include margin(null, null, $ion-space-100, null); -} - -.ion-margin-start-space-100 { - --margin-start: #{$ion-space-100}; - - @include margin(null, null, null, $ion-space-100); -} - -.ion-padding-space-100 { - --padding-top: #{$ion-space-100}; - --padding-end: #{$ion-space-100}; - --padding-bottom: #{$ion-space-100}; - --padding-start: #{$ion-space-100}; - - @include padding($ion-space-100); -} - -.ion-padding-top-space-100 { - --padding-top: #{$ion-space-100}; - - @include padding($ion-space-100, null, null, null); -} - -.ion-padding-end-space-100 { - --padding-end: #{$ion-space-100}; - - @include padding(null, $ion-space-100, null, null); -} - -.ion-padding-bottom-space-100 { - --padding-bottom: #{$ion-space-100}; - - @include padding(null, null, $ion-space-100, null); -} - -.ion-padding-start-space-100 { - --padding-start: #{$ion-space-100}; - - @include padding(null, null, null, $ion-space-100); -} - -.ion-gap-space-150 { - gap: #{$ion-space-150}; -} - -.ion-margin-space-150 { - --margin-top: #{$ion-space-150}; - --margin-end: #{$ion-space-150}; - --margin-bottom: #{$ion-space-150}; - --margin-start: #{$ion-space-150}; - - @include margin($ion-space-150); -} - -.ion-margin-top-space-150 { - --margin-top: #{$ion-space-150}; - - @include margin($ion-space-150, null, null, null); -} - -.ion-margin-end-space-150 { - --margin-end: #{$ion-space-150}; - - @include margin(null, $ion-space-150, null, null); -} - -.ion-margin-bottom-space-150 { - --margin-bottom: #{$ion-space-150}; - - @include margin(null, null, $ion-space-150, null); -} - -.ion-margin-start-space-150 { - --margin-start: #{$ion-space-150}; - - @include margin(null, null, null, $ion-space-150); -} - -.ion-padding-space-150 { - --padding-top: #{$ion-space-150}; - --padding-end: #{$ion-space-150}; - --padding-bottom: #{$ion-space-150}; - --padding-start: #{$ion-space-150}; - - @include padding($ion-space-150); -} - -.ion-padding-top-space-150 { - --padding-top: #{$ion-space-150}; - - @include padding($ion-space-150, null, null, null); -} - -.ion-padding-end-space-150 { - --padding-end: #{$ion-space-150}; - - @include padding(null, $ion-space-150, null, null); -} - -.ion-padding-bottom-space-150 { - --padding-bottom: #{$ion-space-150}; - - @include padding(null, null, $ion-space-150, null); -} - -.ion-padding-start-space-150 { - --padding-start: #{$ion-space-150}; - - @include padding(null, null, null, $ion-space-150); -} - -.ion-gap-space-200 { - gap: #{$ion-space-200}; -} - -.ion-margin-space-200 { - --margin-top: #{$ion-space-200}; - --margin-end: #{$ion-space-200}; - --margin-bottom: #{$ion-space-200}; - --margin-start: #{$ion-space-200}; - - @include margin($ion-space-200); -} - -.ion-margin-top-space-200 { - --margin-top: #{$ion-space-200}; - - @include margin($ion-space-200, null, null, null); -} - -.ion-margin-end-space-200 { - --margin-end: #{$ion-space-200}; - - @include margin(null, $ion-space-200, null, null); -} - -.ion-margin-bottom-space-200 { - --margin-bottom: #{$ion-space-200}; - - @include margin(null, null, $ion-space-200, null); -} - -.ion-margin-start-space-200 { - --margin-start: #{$ion-space-200}; - - @include margin(null, null, null, $ion-space-200); -} - -.ion-padding-space-200 { - --padding-top: #{$ion-space-200}; - --padding-end: #{$ion-space-200}; - --padding-bottom: #{$ion-space-200}; - --padding-start: #{$ion-space-200}; - - @include padding($ion-space-200); -} - -.ion-padding-top-space-200 { - --padding-top: #{$ion-space-200}; - - @include padding($ion-space-200, null, null, null); -} - -.ion-padding-end-space-200 { - --padding-end: #{$ion-space-200}; - - @include padding(null, $ion-space-200, null, null); -} - -.ion-padding-bottom-space-200 { - --padding-bottom: #{$ion-space-200}; - - @include padding(null, null, $ion-space-200, null); -} - -.ion-padding-start-space-200 { - --padding-start: #{$ion-space-200}; - - @include padding(null, null, null, $ion-space-200); -} - -.ion-gap-space-250 { - gap: #{$ion-space-250}; -} - -.ion-margin-space-250 { - --margin-top: #{$ion-space-250}; - --margin-end: #{$ion-space-250}; - --margin-bottom: #{$ion-space-250}; - --margin-start: #{$ion-space-250}; - - @include margin($ion-space-250); -} - -.ion-margin-top-space-250 { - --margin-top: #{$ion-space-250}; - - @include margin($ion-space-250, null, null, null); -} - -.ion-margin-end-space-250 { - --margin-end: #{$ion-space-250}; - - @include margin(null, $ion-space-250, null, null); -} - -.ion-margin-bottom-space-250 { - --margin-bottom: #{$ion-space-250}; - - @include margin(null, null, $ion-space-250, null); -} - -.ion-margin-start-space-250 { - --margin-start: #{$ion-space-250}; - - @include margin(null, null, null, $ion-space-250); -} - -.ion-padding-space-250 { - --padding-top: #{$ion-space-250}; - --padding-end: #{$ion-space-250}; - --padding-bottom: #{$ion-space-250}; - --padding-start: #{$ion-space-250}; - - @include padding($ion-space-250); -} - -.ion-padding-top-space-250 { - --padding-top: #{$ion-space-250}; - - @include padding($ion-space-250, null, null, null); -} - -.ion-padding-end-space-250 { - --padding-end: #{$ion-space-250}; - - @include padding(null, $ion-space-250, null, null); -} - -.ion-padding-bottom-space-250 { - --padding-bottom: #{$ion-space-250}; - - @include padding(null, null, $ion-space-250, null); -} - -.ion-padding-start-space-250 { - --padding-start: #{$ion-space-250}; - - @include padding(null, null, null, $ion-space-250); -} - -.ion-gap-space-300 { - gap: #{$ion-space-300}; -} - -.ion-margin-space-300 { - --margin-top: #{$ion-space-300}; - --margin-end: #{$ion-space-300}; - --margin-bottom: #{$ion-space-300}; - --margin-start: #{$ion-space-300}; - - @include margin($ion-space-300); -} - -.ion-margin-top-space-300 { - --margin-top: #{$ion-space-300}; - - @include margin($ion-space-300, null, null, null); -} - -.ion-margin-end-space-300 { - --margin-end: #{$ion-space-300}; - - @include margin(null, $ion-space-300, null, null); -} - -.ion-margin-bottom-space-300 { - --margin-bottom: #{$ion-space-300}; - - @include margin(null, null, $ion-space-300, null); -} - -.ion-margin-start-space-300 { - --margin-start: #{$ion-space-300}; - - @include margin(null, null, null, $ion-space-300); -} - -.ion-padding-space-300 { - --padding-top: #{$ion-space-300}; - --padding-end: #{$ion-space-300}; - --padding-bottom: #{$ion-space-300}; - --padding-start: #{$ion-space-300}; - - @include padding($ion-space-300); -} - -.ion-padding-top-space-300 { - --padding-top: #{$ion-space-300}; - - @include padding($ion-space-300, null, null, null); -} - -.ion-padding-end-space-300 { - --padding-end: #{$ion-space-300}; - - @include padding(null, $ion-space-300, null, null); -} - -.ion-padding-bottom-space-300 { - --padding-bottom: #{$ion-space-300}; - - @include padding(null, null, $ion-space-300, null); -} - -.ion-padding-start-space-300 { - --padding-start: #{$ion-space-300}; - - @include padding(null, null, null, $ion-space-300); -} - -.ion-gap-space-400 { - gap: #{$ion-space-400}; -} - -.ion-margin-space-400 { - --margin-top: #{$ion-space-400}; - --margin-end: #{$ion-space-400}; - --margin-bottom: #{$ion-space-400}; - --margin-start: #{$ion-space-400}; - - @include margin($ion-space-400); -} - -.ion-margin-top-space-400 { - --margin-top: #{$ion-space-400}; - - @include margin($ion-space-400, null, null, null); -} - -.ion-margin-end-space-400 { - --margin-end: #{$ion-space-400}; - - @include margin(null, $ion-space-400, null, null); -} - -.ion-margin-bottom-space-400 { - --margin-bottom: #{$ion-space-400}; - - @include margin(null, null, $ion-space-400, null); -} - -.ion-margin-start-space-400 { - --margin-start: #{$ion-space-400}; - - @include margin(null, null, null, $ion-space-400); -} - -.ion-padding-space-400 { - --padding-top: #{$ion-space-400}; - --padding-end: #{$ion-space-400}; - --padding-bottom: #{$ion-space-400}; - --padding-start: #{$ion-space-400}; - - @include padding($ion-space-400); -} - -.ion-padding-top-space-400 { - --padding-top: #{$ion-space-400}; - - @include padding($ion-space-400, null, null, null); -} - -.ion-padding-end-space-400 { - --padding-end: #{$ion-space-400}; - - @include padding(null, $ion-space-400, null, null); -} - -.ion-padding-bottom-space-400 { - --padding-bottom: #{$ion-space-400}; - - @include padding(null, null, $ion-space-400, null); -} - -.ion-padding-start-space-400 { - --padding-start: #{$ion-space-400}; - - @include padding(null, null, null, $ion-space-400); -} - -.ion-gap-space-500 { - gap: #{$ion-space-500}; -} - -.ion-margin-space-500 { - --margin-top: #{$ion-space-500}; - --margin-end: #{$ion-space-500}; - --margin-bottom: #{$ion-space-500}; - --margin-start: #{$ion-space-500}; - - @include margin($ion-space-500); -} - -.ion-margin-top-space-500 { - --margin-top: #{$ion-space-500}; - - @include margin($ion-space-500, null, null, null); -} - -.ion-margin-end-space-500 { - --margin-end: #{$ion-space-500}; - - @include margin(null, $ion-space-500, null, null); -} - -.ion-margin-bottom-space-500 { - --margin-bottom: #{$ion-space-500}; - - @include margin(null, null, $ion-space-500, null); -} - -.ion-margin-start-space-500 { - --margin-start: #{$ion-space-500}; - - @include margin(null, null, null, $ion-space-500); -} - -.ion-padding-space-500 { - --padding-top: #{$ion-space-500}; - --padding-end: #{$ion-space-500}; - --padding-bottom: #{$ion-space-500}; - --padding-start: #{$ion-space-500}; - - @include padding($ion-space-500); -} - -.ion-padding-top-space-500 { - --padding-top: #{$ion-space-500}; - - @include padding($ion-space-500, null, null, null); -} - -.ion-padding-end-space-500 { - --padding-end: #{$ion-space-500}; - - @include padding(null, $ion-space-500, null, null); -} - -.ion-padding-bottom-space-500 { - --padding-bottom: #{$ion-space-500}; - - @include padding(null, null, $ion-space-500, null); -} - -.ion-padding-start-space-500 { - --padding-start: #{$ion-space-500}; - - @include padding(null, null, null, $ion-space-500); -} - -.ion-gap-space-600 { - gap: #{$ion-space-600}; -} - -.ion-margin-space-600 { - --margin-top: #{$ion-space-600}; - --margin-end: #{$ion-space-600}; - --margin-bottom: #{$ion-space-600}; - --margin-start: #{$ion-space-600}; - - @include margin($ion-space-600); -} - -.ion-margin-top-space-600 { - --margin-top: #{$ion-space-600}; - - @include margin($ion-space-600, null, null, null); -} - -.ion-margin-end-space-600 { - --margin-end: #{$ion-space-600}; - - @include margin(null, $ion-space-600, null, null); -} - -.ion-margin-bottom-space-600 { - --margin-bottom: #{$ion-space-600}; - - @include margin(null, null, $ion-space-600, null); -} - -.ion-margin-start-space-600 { - --margin-start: #{$ion-space-600}; - - @include margin(null, null, null, $ion-space-600); -} - -.ion-padding-space-600 { - --padding-top: #{$ion-space-600}; - --padding-end: #{$ion-space-600}; - --padding-bottom: #{$ion-space-600}; - --padding-start: #{$ion-space-600}; - - @include padding($ion-space-600); -} - -.ion-padding-top-space-600 { - --padding-top: #{$ion-space-600}; - - @include padding($ion-space-600, null, null, null); -} - -.ion-padding-end-space-600 { - --padding-end: #{$ion-space-600}; - - @include padding(null, $ion-space-600, null, null); -} - -.ion-padding-bottom-space-600 { - --padding-bottom: #{$ion-space-600}; - - @include padding(null, null, $ion-space-600, null); -} - -.ion-padding-start-space-600 { - --padding-start: #{$ion-space-600}; - - @include padding(null, null, null, $ion-space-600); -} - -.ion-gap-space-700 { - gap: #{$ion-space-700}; -} - -.ion-margin-space-700 { - --margin-top: #{$ion-space-700}; - --margin-end: #{$ion-space-700}; - --margin-bottom: #{$ion-space-700}; - --margin-start: #{$ion-space-700}; - - @include margin($ion-space-700); -} - -.ion-margin-top-space-700 { - --margin-top: #{$ion-space-700}; - - @include margin($ion-space-700, null, null, null); -} - -.ion-margin-end-space-700 { - --margin-end: #{$ion-space-700}; - - @include margin(null, $ion-space-700, null, null); -} - -.ion-margin-bottom-space-700 { - --margin-bottom: #{$ion-space-700}; - - @include margin(null, null, $ion-space-700, null); -} - -.ion-margin-start-space-700 { - --margin-start: #{$ion-space-700}; - - @include margin(null, null, null, $ion-space-700); -} - -.ion-padding-space-700 { - --padding-top: #{$ion-space-700}; - --padding-end: #{$ion-space-700}; - --padding-bottom: #{$ion-space-700}; - --padding-start: #{$ion-space-700}; - - @include padding($ion-space-700); -} - -.ion-padding-top-space-700 { - --padding-top: #{$ion-space-700}; - - @include padding($ion-space-700, null, null, null); -} - -.ion-padding-end-space-700 { - --padding-end: #{$ion-space-700}; - - @include padding(null, $ion-space-700, null, null); -} - -.ion-padding-bottom-space-700 { - --padding-bottom: #{$ion-space-700}; - - @include padding(null, null, $ion-space-700, null); -} - -.ion-padding-start-space-700 { - --padding-start: #{$ion-space-700}; - - @include padding(null, null, null, $ion-space-700); -} - -.ion-gap-space-800 { - gap: #{$ion-space-800}; -} - -.ion-margin-space-800 { - --margin-top: #{$ion-space-800}; - --margin-end: #{$ion-space-800}; - --margin-bottom: #{$ion-space-800}; - --margin-start: #{$ion-space-800}; - - @include margin($ion-space-800); -} - -.ion-margin-top-space-800 { - --margin-top: #{$ion-space-800}; - - @include margin($ion-space-800, null, null, null); -} - -.ion-margin-end-space-800 { - --margin-end: #{$ion-space-800}; - - @include margin(null, $ion-space-800, null, null); -} - -.ion-margin-bottom-space-800 { - --margin-bottom: #{$ion-space-800}; - - @include margin(null, null, $ion-space-800, null); -} - -.ion-margin-start-space-800 { - --margin-start: #{$ion-space-800}; - - @include margin(null, null, null, $ion-space-800); -} - -.ion-padding-space-800 { - --padding-top: #{$ion-space-800}; - --padding-end: #{$ion-space-800}; - --padding-bottom: #{$ion-space-800}; - --padding-start: #{$ion-space-800}; - - @include padding($ion-space-800); -} - -.ion-padding-top-space-800 { - --padding-top: #{$ion-space-800}; - - @include padding($ion-space-800, null, null, null); -} - -.ion-padding-end-space-800 { - --padding-end: #{$ion-space-800}; - - @include padding(null, $ion-space-800, null, null); -} - -.ion-padding-bottom-space-800 { - --padding-bottom: #{$ion-space-800}; - - @include padding(null, null, $ion-space-800, null); -} - -.ion-padding-start-space-800 { - --padding-start: #{$ion-space-800}; - - @include padding(null, null, null, $ion-space-800); -} - -.ion-gap-space-900 { - gap: #{$ion-space-900}; -} - -.ion-margin-space-900 { - --margin-top: #{$ion-space-900}; - --margin-end: #{$ion-space-900}; - --margin-bottom: #{$ion-space-900}; - --margin-start: #{$ion-space-900}; - - @include margin($ion-space-900); -} - -.ion-margin-top-space-900 { - --margin-top: #{$ion-space-900}; - - @include margin($ion-space-900, null, null, null); -} - -.ion-margin-end-space-900 { - --margin-end: #{$ion-space-900}; - - @include margin(null, $ion-space-900, null, null); -} - -.ion-margin-bottom-space-900 { - --margin-bottom: #{$ion-space-900}; - - @include margin(null, null, $ion-space-900, null); -} - -.ion-margin-start-space-900 { - --margin-start: #{$ion-space-900}; - - @include margin(null, null, null, $ion-space-900); -} - -.ion-padding-space-900 { - --padding-top: #{$ion-space-900}; - --padding-end: #{$ion-space-900}; - --padding-bottom: #{$ion-space-900}; - --padding-start: #{$ion-space-900}; - - @include padding($ion-space-900); -} - -.ion-padding-top-space-900 { - --padding-top: #{$ion-space-900}; - - @include padding($ion-space-900, null, null, null); -} - -.ion-padding-end-space-900 { - --padding-end: #{$ion-space-900}; - - @include padding(null, $ion-space-900, null, null); -} - -.ion-padding-bottom-space-900 { - --padding-bottom: #{$ion-space-900}; - - @include padding(null, null, $ion-space-900, null); -} - -.ion-padding-start-space-900 { - --padding-start: #{$ion-space-900}; - - @include padding(null, null, null, $ion-space-900); -} - -.ion-gap-space-1000 { - gap: #{$ion-space-1000}; -} - -.ion-margin-space-1000 { - --margin-top: #{$ion-space-1000}; - --margin-end: #{$ion-space-1000}; - --margin-bottom: #{$ion-space-1000}; - --margin-start: #{$ion-space-1000}; - - @include margin($ion-space-1000); -} - -.ion-margin-top-space-1000 { - --margin-top: #{$ion-space-1000}; - - @include margin($ion-space-1000, null, null, null); -} - -.ion-margin-end-space-1000 { - --margin-end: #{$ion-space-1000}; - - @include margin(null, $ion-space-1000, null, null); -} - -.ion-margin-bottom-space-1000 { - --margin-bottom: #{$ion-space-1000}; - - @include margin(null, null, $ion-space-1000, null); -} - -.ion-margin-start-space-1000 { - --margin-start: #{$ion-space-1000}; - - @include margin(null, null, null, $ion-space-1000); -} - -.ion-padding-space-1000 { - --padding-top: #{$ion-space-1000}; - --padding-end: #{$ion-space-1000}; - --padding-bottom: #{$ion-space-1000}; - --padding-start: #{$ion-space-1000}; - - @include padding($ion-space-1000); -} - -.ion-padding-top-space-1000 { - --padding-top: #{$ion-space-1000}; - - @include padding($ion-space-1000, null, null, null); -} - -.ion-padding-end-space-1000 { - --padding-end: #{$ion-space-1000}; - - @include padding(null, $ion-space-1000, null, null); -} - -.ion-padding-bottom-space-1000 { - --padding-bottom: #{$ion-space-1000}; - - @include padding(null, null, $ion-space-1000, null); -} - -.ion-padding-start-space-1000 { - --padding-start: #{$ion-space-1000}; - - @include padding(null, null, null, $ion-space-1000); -} - -.ion-gap-space-1200 { - gap: #{$ion-space-1200}; -} - -.ion-margin-space-1200 { - --margin-top: #{$ion-space-1200}; - --margin-end: #{$ion-space-1200}; - --margin-bottom: #{$ion-space-1200}; - --margin-start: #{$ion-space-1200}; - - @include margin($ion-space-1200); -} - -.ion-margin-top-space-1200 { - --margin-top: #{$ion-space-1200}; - - @include margin($ion-space-1200, null, null, null); -} - -.ion-margin-end-space-1200 { - --margin-end: #{$ion-space-1200}; - - @include margin(null, $ion-space-1200, null, null); -} - -.ion-margin-bottom-space-1200 { - --margin-bottom: #{$ion-space-1200}; - - @include margin(null, null, $ion-space-1200, null); -} - -.ion-margin-start-space-1200 { - --margin-start: #{$ion-space-1200}; - - @include margin(null, null, null, $ion-space-1200); -} - -.ion-padding-space-1200 { - --padding-top: #{$ion-space-1200}; - --padding-end: #{$ion-space-1200}; - --padding-bottom: #{$ion-space-1200}; - --padding-start: #{$ion-space-1200}; - - @include padding($ion-space-1200); -} - -.ion-padding-top-space-1200 { - --padding-top: #{$ion-space-1200}; - - @include padding($ion-space-1200, null, null, null); -} - -.ion-padding-end-space-1200 { - --padding-end: #{$ion-space-1200}; - - @include padding(null, $ion-space-1200, null, null); -} - -.ion-padding-bottom-space-1200 { - --padding-bottom: #{$ion-space-1200}; - - @include padding(null, null, $ion-space-1200, null); -} - -.ion-padding-start-space-1200 { - --padding-start: #{$ion-space-1200}; - - @include padding(null, null, null, $ion-space-1200); -} - -.ion-gap-space-050 { - gap: #{$ion-space-050}; -} - -.ion-margin-space-050 { - --margin-top: #{$ion-space-050}; - --margin-end: #{$ion-space-050}; - --margin-bottom: #{$ion-space-050}; - --margin-start: #{$ion-space-050}; - - @include margin($ion-space-050); -} - -.ion-margin-top-space-050 { - --margin-top: #{$ion-space-050}; - - @include margin($ion-space-050, null, null, null); -} - -.ion-margin-end-space-050 { - --margin-end: #{$ion-space-050}; - - @include margin(null, $ion-space-050, null, null); -} - -.ion-margin-bottom-space-050 { - --margin-bottom: #{$ion-space-050}; - - @include margin(null, null, $ion-space-050, null); -} - -.ion-margin-start-space-050 { - --margin-start: #{$ion-space-050}; - - @include margin(null, null, null, $ion-space-050); -} - -.ion-padding-space-050 { - --padding-top: #{$ion-space-050}; - --padding-end: #{$ion-space-050}; - --padding-bottom: #{$ion-space-050}; - --padding-start: #{$ion-space-050}; - - @include padding($ion-space-050); -} - -.ion-padding-top-space-050 { - --padding-top: #{$ion-space-050}; - - @include padding($ion-space-050, null, null, null); -} - -.ion-padding-end-space-050 { - --padding-end: #{$ion-space-050}; - - @include padding(null, $ion-space-050, null, null); -} - -.ion-padding-bottom-space-050 { - --padding-bottom: #{$ion-space-050}; - - @include padding(null, null, $ion-space-050, null); -} - -.ion-padding-start-space-050 { - --padding-start: #{$ion-space-050}; - - @include padding(null, null, null, $ion-space-050); -} - -.ion-transition-curve-linear { - transition: $ion-transition-curve-linear; -} -.ion-transition-curve-quick { - transition: $ion-transition-curve-quick; -} -.ion-transition-curve-base { - transition: $ion-transition-curve-base; -} -.ion-transition-curve-expressive { - transition: $ion-transition-curve-expressive; -} -.ion-transition-curve-bounce { - transition: $ion-transition-curve-bounce; -} -.ion-transition-time-0 { - transition: $ion-transition-time-0; -} -.ion-transition-time-100 { - transition: $ion-transition-time-100; -} -.ion-transition-time-150 { - transition: $ion-transition-time-150; -} -.ion-transition-time-200 { - transition: $ion-transition-time-200; -} -.ion-transition-time-300 { - transition: $ion-transition-time-300; -} -.ion-transition-time-500 { - transition: $ion-transition-time-500; -} -.ion-transition-time-1000 { - transition: $ion-transition-time-1000; -} -.ion-transition-time-1500 { - transition: $ion-transition-time-1500; -} -.ion-font-weight-thin { - font-weight: $ion-font-weight-thin; -} -.ion-font-weight-extra-light { - font-weight: $ion-font-weight-extra-light; -} -.ion-font-weight-light { - font-weight: $ion-font-weight-light; -} -.ion-font-weight-regular { - font-weight: $ion-font-weight-regular; -} -.ion-font-weight-medium { - font-weight: $ion-font-weight-medium; -} -.ion-font-weight-semi-bold { - font-weight: $ion-font-weight-semi-bold; -} -.ion-font-weight-bold { - font-weight: $ion-font-weight-bold; -} -.ion-font-weight-extra-bold { - font-weight: $ion-font-weight-extra-bold; -} -.ion-font-weight-black { - font-weight: $ion-font-weight-black; -} -.ion-font-size-275 { - font-size: $ion-font-size-275; -} -.ion-font-size-300 { - font-size: $ion-font-size-300; -} -.ion-font-size-350 { - font-size: $ion-font-size-350; -} -.ion-font-size-400 { - font-size: $ion-font-size-400; -} -.ion-font-size-450 { - font-size: $ion-font-size-450; -} -.ion-font-size-500 { - font-size: $ion-font-size-500; -} -.ion-font-size-550 { - font-size: $ion-font-size-550; -} -.ion-font-size-600 { - font-size: $ion-font-size-600; -} -.ion-font-size-650 { - font-size: $ion-font-size-650; -} -.ion-font-size-700 { - font-size: $ion-font-size-700; -} -.ion-font-size-800 { - font-size: $ion-font-size-800; -} -.ion-font-size-900 { - font-size: $ion-font-size-900; -} -.ion-font-letter-spacing-0 { - letter-spacing: $ion-font-letter-spacing-0; -} -.ion-font-letter-spacing-1 { - letter-spacing: $ion-font-letter-spacing-1; -} -.ion-font-letter-spacing-2 { - letter-spacing: $ion-font-letter-spacing-2; -} -.ion-font-line-height-300 { - line-height: $ion-font-line-height-300; -} -.ion-font-line-height-400 { - line-height: $ion-font-line-height-400; -} -.ion-font-line-height-500 { - line-height: $ion-font-line-height-500; -} -.ion-font-line-height-600 { - line-height: $ion-font-line-height-600; -} -.ion-font-line-height-700 { - line-height: $ion-font-line-height-700; -} -.ion-font-line-height-800 { - line-height: $ion-font-line-height-800; -} -.ion-font-line-height-900 { - line-height: $ion-font-line-height-900; -} -.ion-font-line-height-1100 { - line-height: $ion-font-line-height-1100; -} -.ion-font-line-height-1200 { - line-height: $ion-font-line-height-1200; -} -.ion-font-line-height-full { - line-height: $ion-font-line-height-full; -} -.ion-z-index-0 { - z-index: $ion-z-index-0; -} -.ion-z-index-100 { - z-index: $ion-z-index-100; -} -.ion-z-index-200 { - z-index: $ion-z-index-200; -} -.ion-z-index-300 { - z-index: $ion-z-index-300; -} -.ion-z-index-400 { - z-index: $ion-z-index-400; -} -.ion-z-index-500 { - z-index: $ion-z-index-500; -} -.ion-z-index-bottom { - z-index: $ion-z-index-bottom; -} -.ion-z-index-top { - z-index: $ion-z-index-top; -} -.ion-rectangular-2xs { - --border-radius: $ion-rectangular-2xs; - border-radius: $ion-rectangular-2xs; -} -.ion-rectangular-xs { - --border-radius: $ion-rectangular-xs; - border-radius: $ion-rectangular-xs; -} -.ion-rectangular-sm { - --border-radius: $ion-rectangular-sm; - border-radius: $ion-rectangular-sm; -} -.ion-rectangular-md { - --border-radius: $ion-rectangular-md; - border-radius: $ion-rectangular-md; -} -.ion-rectangular-lg { - --border-radius: $ion-rectangular-lg; - border-radius: $ion-rectangular-lg; -} -.ion-rectangular-xl { - --border-radius: $ion-rectangular-xl; - border-radius: $ion-rectangular-xl; -} -.ion-rectangular-2xl { - --border-radius: $ion-rectangular-2xl; - border-radius: $ion-rectangular-2xl; -} -.ion-round-2xs { - --border-radius: $ion-round-2xs; - border-radius: $ion-round-2xs; -} -.ion-round-xs { - --border-radius: $ion-round-xs; - border-radius: $ion-round-xs; -} -.ion-round-sm { - --border-radius: $ion-round-sm; - border-radius: $ion-round-sm; -} -.ion-round-md { - --border-radius: $ion-round-md; - border-radius: $ion-round-md; -} -.ion-round-lg { - --border-radius: $ion-round-lg; - border-radius: $ion-round-lg; -} -.ion-round-xl { - --border-radius: $ion-round-xl; - border-radius: $ion-round-xl; -} -.ion-round-2xl { - --border-radius: $ion-round-2xl; - border-radius: $ion-round-2xl; -} -.ion-soft-2xs { - --border-radius: $ion-soft-2xs; - border-radius: $ion-soft-2xs; -} -.ion-soft-xs { - --border-radius: $ion-soft-xs; - border-radius: $ion-soft-xs; -} -.ion-soft-sm { - --border-radius: $ion-soft-sm; - border-radius: $ion-soft-sm; -} -.ion-soft-md { - --border-radius: $ion-soft-md; - border-radius: $ion-soft-md; -} -.ion-soft-lg { - --border-radius: $ion-soft-lg; - border-radius: $ion-soft-lg; -} -.ion-soft-xl { - --border-radius: $ion-soft-xl; - border-radius: $ion-soft-xl; -} -.ion-soft-2xl { - --border-radius: $ion-soft-2xl; - border-radius: $ion-soft-2xl; -} -.ion-primitives-neutral-100 { - --color: $ion-primitives-neutral-100; - color: $ion-primitives-neutral-100; -} -.ion-primitives-neutral-200 { - --color: $ion-primitives-neutral-200; - color: $ion-primitives-neutral-200; -} -.ion-primitives-neutral-300 { - --color: $ion-primitives-neutral-300; - color: $ion-primitives-neutral-300; -} -.ion-primitives-neutral-400 { - --color: $ion-primitives-neutral-400; - color: $ion-primitives-neutral-400; -} -.ion-primitives-neutral-500 { - --color: $ion-primitives-neutral-500; - color: $ion-primitives-neutral-500; -} -.ion-primitives-neutral-600 { - --color: $ion-primitives-neutral-600; - color: $ion-primitives-neutral-600; -} -.ion-primitives-neutral-700 { - --color: $ion-primitives-neutral-700; - color: $ion-primitives-neutral-700; -} -.ion-primitives-neutral-800 { - --color: $ion-primitives-neutral-800; - color: $ion-primitives-neutral-800; -} -.ion-primitives-neutral-900 { - --color: $ion-primitives-neutral-900; - color: $ion-primitives-neutral-900; -} -.ion-primitives-neutral-1000 { - --color: $ion-primitives-neutral-1000; - color: $ion-primitives-neutral-1000; -} -.ion-primitives-neutral-1100 { - --color: $ion-primitives-neutral-1100; - color: $ion-primitives-neutral-1100; -} -.ion-primitives-neutral-1200 { - --color: $ion-primitives-neutral-1200; - color: $ion-primitives-neutral-1200; -} -.ion-primitives-base-white { - --color: $ion-primitives-base-white; - color: $ion-primitives-base-white; -} -.ion-primitives-base-black { - --color: $ion-primitives-base-black; - color: $ion-primitives-base-black; -} -.ion-primitives-red-100 { - --color: $ion-primitives-red-100; - color: $ion-primitives-red-100; -} -.ion-primitives-red-200 { - --color: $ion-primitives-red-200; - color: $ion-primitives-red-200; -} -.ion-primitives-red-300 { - --color: $ion-primitives-red-300; - color: $ion-primitives-red-300; -} -.ion-primitives-red-400 { - --color: $ion-primitives-red-400; - color: $ion-primitives-red-400; -} -.ion-primitives-red-500 { - --color: $ion-primitives-red-500; - color: $ion-primitives-red-500; -} -.ion-primitives-red-600 { - --color: $ion-primitives-red-600; - color: $ion-primitives-red-600; -} -.ion-primitives-red-700 { - --color: $ion-primitives-red-700; - color: $ion-primitives-red-700; -} -.ion-primitives-red-800 { - --color: $ion-primitives-red-800; - color: $ion-primitives-red-800; -} -.ion-primitives-red-900 { - --color: $ion-primitives-red-900; - color: $ion-primitives-red-900; -} -.ion-primitives-red-1000 { - --color: $ion-primitives-red-1000; - color: $ion-primitives-red-1000; -} -.ion-primitives-red-1100 { - --color: $ion-primitives-red-1100; - color: $ion-primitives-red-1100; -} -.ion-primitives-red-1200 { - --color: $ion-primitives-red-1200; - color: $ion-primitives-red-1200; -} -.ion-primitives-pumpkin-100 { - --color: $ion-primitives-pumpkin-100; - color: $ion-primitives-pumpkin-100; -} -.ion-primitives-pumpkin-200 { - --color: $ion-primitives-pumpkin-200; - color: $ion-primitives-pumpkin-200; -} -.ion-primitives-pumpkin-300 { - --color: $ion-primitives-pumpkin-300; - color: $ion-primitives-pumpkin-300; -} -.ion-primitives-pumpkin-400 { - --color: $ion-primitives-pumpkin-400; - color: $ion-primitives-pumpkin-400; -} -.ion-primitives-pumpkin-500 { - --color: $ion-primitives-pumpkin-500; - color: $ion-primitives-pumpkin-500; -} -.ion-primitives-pumpkin-600 { - --color: $ion-primitives-pumpkin-600; - color: $ion-primitives-pumpkin-600; -} -.ion-primitives-pumpkin-700 { - --color: $ion-primitives-pumpkin-700; - color: $ion-primitives-pumpkin-700; -} -.ion-primitives-pumpkin-800 { - --color: $ion-primitives-pumpkin-800; - color: $ion-primitives-pumpkin-800; -} -.ion-primitives-pumpkin-900 { - --color: $ion-primitives-pumpkin-900; - color: $ion-primitives-pumpkin-900; -} -.ion-primitives-pumpkin-1000 { - --color: $ion-primitives-pumpkin-1000; - color: $ion-primitives-pumpkin-1000; -} -.ion-primitives-pumpkin-1100 { - --color: $ion-primitives-pumpkin-1100; - color: $ion-primitives-pumpkin-1100; -} -.ion-primitives-pumpkin-1200 { - --color: $ion-primitives-pumpkin-1200; - color: $ion-primitives-pumpkin-1200; -} -.ion-primitives-orange-100 { - --color: $ion-primitives-orange-100; - color: $ion-primitives-orange-100; -} -.ion-primitives-orange-200 { - --color: $ion-primitives-orange-200; - color: $ion-primitives-orange-200; -} -.ion-primitives-orange-300 { - --color: $ion-primitives-orange-300; - color: $ion-primitives-orange-300; -} -.ion-primitives-orange-400 { - --color: $ion-primitives-orange-400; - color: $ion-primitives-orange-400; -} -.ion-primitives-orange-500 { - --color: $ion-primitives-orange-500; - color: $ion-primitives-orange-500; -} -.ion-primitives-orange-600 { - --color: $ion-primitives-orange-600; - color: $ion-primitives-orange-600; -} -.ion-primitives-orange-700 { - --color: $ion-primitives-orange-700; - color: $ion-primitives-orange-700; -} -.ion-primitives-orange-800 { - --color: $ion-primitives-orange-800; - color: $ion-primitives-orange-800; -} -.ion-primitives-orange-900 { - --color: $ion-primitives-orange-900; - color: $ion-primitives-orange-900; -} -.ion-primitives-orange-1000 { - --color: $ion-primitives-orange-1000; - color: $ion-primitives-orange-1000; -} -.ion-primitives-orange-1100 { - --color: $ion-primitives-orange-1100; - color: $ion-primitives-orange-1100; -} -.ion-primitives-orange-1200 { - --color: $ion-primitives-orange-1200; - color: $ion-primitives-orange-1200; -} -.ion-primitives-yellow-100 { - --color: $ion-primitives-yellow-100; - color: $ion-primitives-yellow-100; -} -.ion-primitives-yellow-200 { - --color: $ion-primitives-yellow-200; - color: $ion-primitives-yellow-200; -} -.ion-primitives-yellow-300 { - --color: $ion-primitives-yellow-300; - color: $ion-primitives-yellow-300; -} -.ion-primitives-yellow-400 { - --color: $ion-primitives-yellow-400; - color: $ion-primitives-yellow-400; -} -.ion-primitives-yellow-500 { - --color: $ion-primitives-yellow-500; - color: $ion-primitives-yellow-500; -} -.ion-primitives-yellow-600 { - --color: $ion-primitives-yellow-600; - color: $ion-primitives-yellow-600; -} -.ion-primitives-yellow-700 { - --color: $ion-primitives-yellow-700; - color: $ion-primitives-yellow-700; -} -.ion-primitives-yellow-800 { - --color: $ion-primitives-yellow-800; - color: $ion-primitives-yellow-800; -} -.ion-primitives-yellow-900 { - --color: $ion-primitives-yellow-900; - color: $ion-primitives-yellow-900; -} -.ion-primitives-yellow-1000 { - --color: $ion-primitives-yellow-1000; - color: $ion-primitives-yellow-1000; -} -.ion-primitives-yellow-1100 { - --color: $ion-primitives-yellow-1100; - color: $ion-primitives-yellow-1100; -} -.ion-primitives-yellow-1200 { - --color: $ion-primitives-yellow-1200; - color: $ion-primitives-yellow-1200; -} -.ion-primitives-lime-100 { - --color: $ion-primitives-lime-100; - color: $ion-primitives-lime-100; -} -.ion-primitives-lime-200 { - --color: $ion-primitives-lime-200; - color: $ion-primitives-lime-200; -} -.ion-primitives-lime-300 { - --color: $ion-primitives-lime-300; - color: $ion-primitives-lime-300; -} -.ion-primitives-lime-400 { - --color: $ion-primitives-lime-400; - color: $ion-primitives-lime-400; -} -.ion-primitives-lime-500 { - --color: $ion-primitives-lime-500; - color: $ion-primitives-lime-500; -} -.ion-primitives-lime-600 { - --color: $ion-primitives-lime-600; - color: $ion-primitives-lime-600; -} -.ion-primitives-lime-700 { - --color: $ion-primitives-lime-700; - color: $ion-primitives-lime-700; -} -.ion-primitives-lime-800 { - --color: $ion-primitives-lime-800; - color: $ion-primitives-lime-800; -} -.ion-primitives-lime-900 { - --color: $ion-primitives-lime-900; - color: $ion-primitives-lime-900; -} -.ion-primitives-lime-1000 { - --color: $ion-primitives-lime-1000; - color: $ion-primitives-lime-1000; -} -.ion-primitives-lime-1100 { - --color: $ion-primitives-lime-1100; - color: $ion-primitives-lime-1100; -} -.ion-primitives-lime-1200 { - --color: $ion-primitives-lime-1200; - color: $ion-primitives-lime-1200; -} -.ion-primitives-green-100 { - --color: $ion-primitives-green-100; - color: $ion-primitives-green-100; -} -.ion-primitives-green-200 { - --color: $ion-primitives-green-200; - color: $ion-primitives-green-200; -} -.ion-primitives-green-300 { - --color: $ion-primitives-green-300; - color: $ion-primitives-green-300; -} -.ion-primitives-green-400 { - --color: $ion-primitives-green-400; - color: $ion-primitives-green-400; -} -.ion-primitives-green-500 { - --color: $ion-primitives-green-500; - color: $ion-primitives-green-500; -} -.ion-primitives-green-600 { - --color: $ion-primitives-green-600; - color: $ion-primitives-green-600; -} -.ion-primitives-green-700 { - --color: $ion-primitives-green-700; - color: $ion-primitives-green-700; -} -.ion-primitives-green-800 { - --color: $ion-primitives-green-800; - color: $ion-primitives-green-800; -} -.ion-primitives-green-900 { - --color: $ion-primitives-green-900; - color: $ion-primitives-green-900; -} -.ion-primitives-green-1000 { - --color: $ion-primitives-green-1000; - color: $ion-primitives-green-1000; -} -.ion-primitives-green-1100 { - --color: $ion-primitives-green-1100; - color: $ion-primitives-green-1100; -} -.ion-primitives-green-1200 { - --color: $ion-primitives-green-1200; - color: $ion-primitives-green-1200; -} -.ion-primitives-teal-100 { - --color: $ion-primitives-teal-100; - color: $ion-primitives-teal-100; -} -.ion-primitives-teal-200 { - --color: $ion-primitives-teal-200; - color: $ion-primitives-teal-200; -} -.ion-primitives-teal-300 { - --color: $ion-primitives-teal-300; - color: $ion-primitives-teal-300; -} -.ion-primitives-teal-400 { - --color: $ion-primitives-teal-400; - color: $ion-primitives-teal-400; -} -.ion-primitives-teal-500 { - --color: $ion-primitives-teal-500; - color: $ion-primitives-teal-500; -} -.ion-primitives-teal-600 { - --color: $ion-primitives-teal-600; - color: $ion-primitives-teal-600; -} -.ion-primitives-teal-700 { - --color: $ion-primitives-teal-700; - color: $ion-primitives-teal-700; -} -.ion-primitives-teal-800 { - --color: $ion-primitives-teal-800; - color: $ion-primitives-teal-800; -} -.ion-primitives-teal-900 { - --color: $ion-primitives-teal-900; - color: $ion-primitives-teal-900; -} -.ion-primitives-teal-1000 { - --color: $ion-primitives-teal-1000; - color: $ion-primitives-teal-1000; -} -.ion-primitives-teal-1100 { - --color: $ion-primitives-teal-1100; - color: $ion-primitives-teal-1100; -} -.ion-primitives-teal-1200 { - --color: $ion-primitives-teal-1200; - color: $ion-primitives-teal-1200; -} -.ion-primitives-aqua-100 { - --color: $ion-primitives-aqua-100; - color: $ion-primitives-aqua-100; -} -.ion-primitives-aqua-200 { - --color: $ion-primitives-aqua-200; - color: $ion-primitives-aqua-200; -} -.ion-primitives-aqua-300 { - --color: $ion-primitives-aqua-300; - color: $ion-primitives-aqua-300; -} -.ion-primitives-aqua-400 { - --color: $ion-primitives-aqua-400; - color: $ion-primitives-aqua-400; -} -.ion-primitives-aqua-500 { - --color: $ion-primitives-aqua-500; - color: $ion-primitives-aqua-500; -} -.ion-primitives-aqua-600 { - --color: $ion-primitives-aqua-600; - color: $ion-primitives-aqua-600; -} -.ion-primitives-aqua-700 { - --color: $ion-primitives-aqua-700; - color: $ion-primitives-aqua-700; -} -.ion-primitives-aqua-800 { - --color: $ion-primitives-aqua-800; - color: $ion-primitives-aqua-800; -} -.ion-primitives-aqua-900 { - --color: $ion-primitives-aqua-900; - color: $ion-primitives-aqua-900; -} -.ion-primitives-aqua-1000 { - --color: $ion-primitives-aqua-1000; - color: $ion-primitives-aqua-1000; -} -.ion-primitives-aqua-1100 { - --color: $ion-primitives-aqua-1100; - color: $ion-primitives-aqua-1100; -} -.ion-primitives-aqua-1200 { - --color: $ion-primitives-aqua-1200; - color: $ion-primitives-aqua-1200; -} -.ion-primitives-blue-100 { - --color: $ion-primitives-blue-100; - color: $ion-primitives-blue-100; -} -.ion-primitives-blue-200 { - --color: $ion-primitives-blue-200; - color: $ion-primitives-blue-200; -} -.ion-primitives-blue-300 { - --color: $ion-primitives-blue-300; - color: $ion-primitives-blue-300; -} -.ion-primitives-blue-400 { - --color: $ion-primitives-blue-400; - color: $ion-primitives-blue-400; -} -.ion-primitives-blue-500 { - --color: $ion-primitives-blue-500; - color: $ion-primitives-blue-500; -} -.ion-primitives-blue-600 { - --color: $ion-primitives-blue-600; - color: $ion-primitives-blue-600; -} -.ion-primitives-blue-700 { - --color: $ion-primitives-blue-700; - color: $ion-primitives-blue-700; -} -.ion-primitives-blue-800 { - --color: $ion-primitives-blue-800; - color: $ion-primitives-blue-800; -} -.ion-primitives-blue-900 { - --color: $ion-primitives-blue-900; - color: $ion-primitives-blue-900; -} -.ion-primitives-blue-1000 { - --color: $ion-primitives-blue-1000; - color: $ion-primitives-blue-1000; -} -.ion-primitives-blue-1100 { - --color: $ion-primitives-blue-1100; - color: $ion-primitives-blue-1100; -} -.ion-primitives-blue-1200 { - --color: $ion-primitives-blue-1200; - color: $ion-primitives-blue-1200; -} -.ion-primitives-indigo-100 { - --color: $ion-primitives-indigo-100; - color: $ion-primitives-indigo-100; -} -.ion-primitives-indigo-200 { - --color: $ion-primitives-indigo-200; - color: $ion-primitives-indigo-200; -} -.ion-primitives-indigo-300 { - --color: $ion-primitives-indigo-300; - color: $ion-primitives-indigo-300; -} -.ion-primitives-indigo-400 { - --color: $ion-primitives-indigo-400; - color: $ion-primitives-indigo-400; -} -.ion-primitives-indigo-500 { - --color: $ion-primitives-indigo-500; - color: $ion-primitives-indigo-500; -} -.ion-primitives-indigo-600 { - --color: $ion-primitives-indigo-600; - color: $ion-primitives-indigo-600; -} -.ion-primitives-indigo-700 { - --color: $ion-primitives-indigo-700; - color: $ion-primitives-indigo-700; -} -.ion-primitives-indigo-800 { - --color: $ion-primitives-indigo-800; - color: $ion-primitives-indigo-800; -} -.ion-primitives-indigo-900 { - --color: $ion-primitives-indigo-900; - color: $ion-primitives-indigo-900; -} -.ion-primitives-indigo-1000 { - --color: $ion-primitives-indigo-1000; - color: $ion-primitives-indigo-1000; -} -.ion-primitives-indigo-1100 { - --color: $ion-primitives-indigo-1100; - color: $ion-primitives-indigo-1100; -} -.ion-primitives-indigo-1200 { - --color: $ion-primitives-indigo-1200; - color: $ion-primitives-indigo-1200; -} -.ion-primitives-violet-100 { - --color: $ion-primitives-violet-100; - color: $ion-primitives-violet-100; -} -.ion-primitives-violet-200 { - --color: $ion-primitives-violet-200; - color: $ion-primitives-violet-200; -} -.ion-primitives-violet-300 { - --color: $ion-primitives-violet-300; - color: $ion-primitives-violet-300; -} -.ion-primitives-violet-400 { - --color: $ion-primitives-violet-400; - color: $ion-primitives-violet-400; -} -.ion-primitives-violet-500 { - --color: $ion-primitives-violet-500; - color: $ion-primitives-violet-500; -} -.ion-primitives-violet-600 { - --color: $ion-primitives-violet-600; - color: $ion-primitives-violet-600; -} -.ion-primitives-violet-700 { - --color: $ion-primitives-violet-700; - color: $ion-primitives-violet-700; -} -.ion-primitives-violet-800 { - --color: $ion-primitives-violet-800; - color: $ion-primitives-violet-800; -} -.ion-primitives-violet-900 { - --color: $ion-primitives-violet-900; - color: $ion-primitives-violet-900; -} -.ion-primitives-violet-1000 { - --color: $ion-primitives-violet-1000; - color: $ion-primitives-violet-1000; -} -.ion-primitives-violet-1100 { - --color: $ion-primitives-violet-1100; - color: $ion-primitives-violet-1100; -} -.ion-primitives-violet-1200 { - --color: $ion-primitives-violet-1200; - color: $ion-primitives-violet-1200; -} -.ion-primitives-purple-100 { - --color: $ion-primitives-purple-100; - color: $ion-primitives-purple-100; -} -.ion-primitives-purple-200 { - --color: $ion-primitives-purple-200; - color: $ion-primitives-purple-200; -} -.ion-primitives-purple-300 { - --color: $ion-primitives-purple-300; - color: $ion-primitives-purple-300; -} -.ion-primitives-purple-400 { - --color: $ion-primitives-purple-400; - color: $ion-primitives-purple-400; -} -.ion-primitives-purple-500 { - --color: $ion-primitives-purple-500; - color: $ion-primitives-purple-500; -} -.ion-primitives-purple-600 { - --color: $ion-primitives-purple-600; - color: $ion-primitives-purple-600; -} -.ion-primitives-purple-700 { - --color: $ion-primitives-purple-700; - color: $ion-primitives-purple-700; -} -.ion-primitives-purple-800 { - --color: $ion-primitives-purple-800; - color: $ion-primitives-purple-800; -} -.ion-primitives-purple-900 { - --color: $ion-primitives-purple-900; - color: $ion-primitives-purple-900; -} -.ion-primitives-purple-1000 { - --color: $ion-primitives-purple-1000; - color: $ion-primitives-purple-1000; -} -.ion-primitives-purple-1100 { - --color: $ion-primitives-purple-1100; - color: $ion-primitives-purple-1100; -} -.ion-primitives-purple-1200 { - --color: $ion-primitives-purple-1200; - color: $ion-primitives-purple-1200; -} -.ion-primitives-magenta-100 { - --color: $ion-primitives-magenta-100; - color: $ion-primitives-magenta-100; -} -.ion-primitives-magenta-200 { - --color: $ion-primitives-magenta-200; - color: $ion-primitives-magenta-200; -} -.ion-primitives-magenta-300 { - --color: $ion-primitives-magenta-300; - color: $ion-primitives-magenta-300; -} -.ion-primitives-magenta-400 { - --color: $ion-primitives-magenta-400; - color: $ion-primitives-magenta-400; -} -.ion-primitives-magenta-500 { - --color: $ion-primitives-magenta-500; - color: $ion-primitives-magenta-500; -} -.ion-primitives-magenta-600 { - --color: $ion-primitives-magenta-600; - color: $ion-primitives-magenta-600; -} -.ion-primitives-magenta-700 { - --color: $ion-primitives-magenta-700; - color: $ion-primitives-magenta-700; -} -.ion-primitives-magenta-800 { - --color: $ion-primitives-magenta-800; - color: $ion-primitives-magenta-800; -} -.ion-primitives-magenta-900 { - --color: $ion-primitives-magenta-900; - color: $ion-primitives-magenta-900; -} -.ion-primitives-magenta-1000 { - --color: $ion-primitives-magenta-1000; - color: $ion-primitives-magenta-1000; -} -.ion-primitives-magenta-1100 { - --color: $ion-primitives-magenta-1100; - color: $ion-primitives-magenta-1100; -} -.ion-primitives-magenta-1200 { - --color: $ion-primitives-magenta-1200; - color: $ion-primitives-magenta-1200; -} -.ion-primitives-pink-100 { - --color: $ion-primitives-pink-100; - color: $ion-primitives-pink-100; -} -.ion-primitives-pink-200 { - --color: $ion-primitives-pink-200; - color: $ion-primitives-pink-200; -} -.ion-primitives-pink-300 { - --color: $ion-primitives-pink-300; - color: $ion-primitives-pink-300; -} -.ion-primitives-pink-400 { - --color: $ion-primitives-pink-400; - color: $ion-primitives-pink-400; -} -.ion-primitives-pink-500 { - --color: $ion-primitives-pink-500; - color: $ion-primitives-pink-500; -} -.ion-primitives-pink-600 { - --color: $ion-primitives-pink-600; - color: $ion-primitives-pink-600; -} -.ion-primitives-pink-700 { - --color: $ion-primitives-pink-700; - color: $ion-primitives-pink-700; -} -.ion-primitives-pink-800 { - --color: $ion-primitives-pink-800; - color: $ion-primitives-pink-800; -} -.ion-primitives-pink-900 { - --color: $ion-primitives-pink-900; - color: $ion-primitives-pink-900; -} -.ion-primitives-pink-1000 { - --color: $ion-primitives-pink-1000; - color: $ion-primitives-pink-1000; -} -.ion-primitives-pink-1100 { - --color: $ion-primitives-pink-1100; - color: $ion-primitives-pink-1100; -} -.ion-primitives-pink-1200 { - --color: $ion-primitives-pink-1200; - color: $ion-primitives-pink-1200; -} -.ion-shadow-1 { - --box-shadow: $ion-shadow-1; - box-shadow: $ion-shadow-1; -} -.ion-shadow-2 { - --box-shadow: $ion-shadow-2; - box-shadow: $ion-shadow-2; -} -.ion-shadow-3 { - --box-shadow: $ion-shadow-3; - box-shadow: $ion-shadow-3; -} -.ion-shadow-4 { - --box-shadow: $ion-shadow-4; - box-shadow: $ion-shadow-4; -} -.ion-shadow-5 { - --box-shadow: $ion-shadow-5; - box-shadow: $ion-shadow-5; -} -.ion-shadow-6 { - --box-shadow: $ion-shadow-6; - box-shadow: $ion-shadow-6; -} -.ion-shadow-7 { - --box-shadow: $ion-shadow-7; - box-shadow: $ion-shadow-7; -} - -.ion-no-margin { - --margin-top: #{$ion-space-0}; - --margin-end: #{$ion-space-0}; - --margin-bottom: #{$ion-space-0}; - --margin-start: #{$ion-space-0}; - - @include margin($ion-space-0); -} - -.ion-margin { - --margin-top: #{$ion-space-400}; - --margin-end: #{$ion-space-400}; - --margin-bottom: #{$ion-space-400}; - --margin-start: #{$ion-space-400}; - - @include margin($ion-space-400); -} - -.ion-margin-top { - --margin-top: #{$ion-space-400}; - - @include margin($ion-space-400, null, null, null); -} - -.ion-margin-end { - --margin-end: #{$ion-space-400}; - - @include margin(null, $ion-space-400, null, null); -} - -.ion-margin-bottom { - --margin-bottom: #{$ion-space-400}; - - @include margin(null, null, $ion-space-400, null); -} - -.ion-margin-start { - --margin-start: #{$ion-space-400}; - - @include margin(null, null, null, $ion-space-400); -} - -.ion-margin-vertical { - --margin-top: #{$ion-space-400}; - --margin-bottom: #{$ion-space-400}; - - @include margin($ion-space-400, null, $ion-space-400, null); -} - -.ion-margin-horizontal { - --margin-start: #{$ion-space-400}; - --margin-end: #{$ion-space-400}; - - @include margin(null, $ion-space-400, null, $ion-space-400); -} - -.ion-no-padding { - --padding-top: #{$ion-space-0}; - --padding-end: #{$ion-space-0}; - --padding-bottom: #{$ion-space-0}; - --padding-start: #{$ion-space-0}; - - @include padding($ion-space-0); -} - -.ion-padding { - --padding-top: #{$ion-space-400}; - --padding-end: #{$ion-space-400}; - --padding-bottom: #{$ion-space-400}; - --padding-start: #{$ion-space-400}; - - @include padding($ion-space-400); -} - -.ion-padding-top { - --padding-top: #{$ion-space-400}; - - @include padding($ion-space-400, null, null, null); -} - -.ion-padding-end { - --padding-end: #{$ion-space-400}; - - @include padding(null, $ion-space-400, null, null); -} - -.ion-padding-bottom { - --padding-bottom: #{$ion-space-400}; - - @include padding(null, null, $ion-space-400, null); -} - -.ion-padding-start { - --padding-start: #{$ion-space-400}; - - @include padding(null, null, null, $ion-space-400); -} - -.ion-padding-vertical { - --padding-top: #{$ion-space-400}; - --padding-bottom: #{$ion-space-400}; - - @include padding($ion-space-400, null, $ion-space-400, null); -} - -.ion-padding-horizontal { - --padding-start: #{$ion-space-400}; - --padding-end: #{$ion-space-400}; - - @include padding(null, $ion-space-400, null, $ion-space-400); -} diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index f5b5c5c4538..6fc027105ca 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -1,10 +1,8 @@ -// Do not edit directly, this file was auto-generated. - -@use "../themes/functions.sizes" as font; -$ion-primitives-neutral-100: var(--token-primitives-neutral-100, #f5f5f5); -$ion-primitives-neutral-100-rgb: var(--token-primitives-neutral-100-rgb, 245, 245, 245); -$ion-primitives-neutral-200: var(--token-primitives-neutral-200, #efefef); -$ion-primitives-neutral-200-rgb: var(--token-primitives-neutral-200-rgb, 239, 239, 239); +// Primitives +$ion-primitives-neutral-100: var(--token-primitives-neutral-100, #f3f3f3); +$ion-primitives-neutral-100-rgb: var(--token-primitives-neutral-100-rgb, 243, 243, 243); +$ion-primitives-neutral-200: var(--token-primitives-neutral-200, #eae9e9); +$ion-primitives-neutral-200-rgb: var(--token-primitives-neutral-200-rgb, 234, 233, 233); $ion-primitives-neutral-300: var(--token-primitives-neutral-300, #e0e0e0); $ion-primitives-neutral-300-rgb: var(--token-primitives-neutral-300-rgb, 224, 224, 224); $ion-primitives-neutral-400: var(--token-primitives-neutral-400, #d5d5d5); @@ -29,10 +27,10 @@ $ion-primitives-base-white: var(--token-primitives-base-white, #ffffff); $ion-primitives-base-white-rgb: var(--token-primitives-base-white-rgb, 255, 255, 255); $ion-primitives-base-black: var(--token-primitives-base-black, #111111); $ion-primitives-base-black-rgb: var(--token-primitives-base-black-rgb, 17, 17, 17); -$ion-primitives-red-100: var(--token-primitives-red-100, #feeded); -$ion-primitives-red-100-rgb: var(--token-primitives-red-100-rgb, 254, 237, 237); -$ion-primitives-red-200: var(--token-primitives-red-200, #fde1e1); -$ion-primitives-red-200-rgb: var(--token-primitives-red-200-rgb, 253, 225, 225); +$ion-primitives-red-100: var(--token-primitives-red-100, #fde1e1); +$ion-primitives-red-100-rgb: var(--token-primitives-red-100-rgb, 253, 225, 225); +$ion-primitives-red-200: var(--token-primitives-red-200, #ffd9d9); +$ion-primitives-red-200-rgb: var(--token-primitives-red-200-rgb, 255, 217, 217); $ion-primitives-red-300: var(--token-primitives-red-300, #fcc1c1); $ion-primitives-red-300-rgb: var(--token-primitives-red-300-rgb, 252, 193, 193); $ion-primitives-red-400: var(--token-primitives-red-400, #faa1a1); @@ -53,10 +51,10 @@ $ion-primitives-red-1100: var(--token-primitives-red-1100, #540f0f); $ion-primitives-red-1100-rgb: var(--token-primitives-red-1100-rgb, 84, 15, 15); $ion-primitives-red-1200: var(--token-primitives-red-1200, #330909); $ion-primitives-red-1200-rgb: var(--token-primitives-red-1200-rgb, 51, 9, 9); -$ion-primitives-pumpkin-100: var(--token-primitives-pumpkin-100, #feedea); -$ion-primitives-pumpkin-100-rgb: var(--token-primitives-pumpkin-100-rgb, 254, 237, 234); -$ion-primitives-pumpkin-200: var(--token-primitives-pumpkin-200, #fde0db); -$ion-primitives-pumpkin-200-rgb: var(--token-primitives-pumpkin-200-rgb, 253, 224, 219); +$ion-primitives-pumpkin-100: var(--token-primitives-pumpkin-100, #ffe0db); +$ion-primitives-pumpkin-100-rgb: var(--token-primitives-pumpkin-100-rgb, 255, 224, 219); +$ion-primitives-pumpkin-200: var(--token-primitives-pumpkin-200, #ffd6d0); +$ion-primitives-pumpkin-200-rgb: var(--token-primitives-pumpkin-200-rgb, 255, 214, 208); $ion-primitives-pumpkin-300: var(--token-primitives-pumpkin-300, #fbbdb1); $ion-primitives-pumpkin-300-rgb: var(--token-primitives-pumpkin-300-rgb, 251, 189, 177); $ion-primitives-pumpkin-400: var(--token-primitives-pumpkin-400, #f9947c); @@ -77,10 +75,10 @@ $ion-primitives-pumpkin-1100: var(--token-primitives-pumpkin-1100, #401802); $ion-primitives-pumpkin-1100-rgb: var(--token-primitives-pumpkin-1100-rgb, 64, 24, 2); $ion-primitives-pumpkin-1200: var(--token-primitives-pumpkin-1200, #210c01); $ion-primitives-pumpkin-1200-rgb: var(--token-primitives-pumpkin-1200-rgb, 33, 12, 1); -$ion-primitives-orange-100: var(--token-primitives-orange-100, #fff1ea); -$ion-primitives-orange-100-rgb: var(--token-primitives-orange-100-rgb, 255, 241, 234); -$ion-primitives-orange-200: var(--token-primitives-orange-200, #ffe8db); -$ion-primitives-orange-200-rgb: var(--token-primitives-orange-200-rgb, 255, 232, 219); +$ion-primitives-orange-100: var(--token-primitives-orange-100, #ffe8db); +$ion-primitives-orange-100-rgb: var(--token-primitives-orange-100-rgb, 255, 232, 219); +$ion-primitives-orange-200: var(--token-primitives-orange-200, #ffe0d0); +$ion-primitives-orange-200-rgb: var(--token-primitives-orange-200-rgb, 255, 224, 208); $ion-primitives-orange-300: var(--token-primitives-orange-300, #ffcfb1); $ion-primitives-orange-300-rgb: var(--token-primitives-orange-300-rgb, 255, 207, 177); $ion-primitives-orange-400: var(--token-primitives-orange-400, #ffb37b); @@ -101,10 +99,10 @@ $ion-primitives-orange-1100: var(--token-primitives-orange-1100, #422700); $ion-primitives-orange-1100-rgb: var(--token-primitives-orange-1100-rgb, 66, 39, 0); $ion-primitives-orange-1200: var(--token-primitives-orange-1200, #221400); $ion-primitives-orange-1200-rgb: var(--token-primitives-orange-1200-rgb, 34, 20, 0); -$ion-primitives-yellow-100: var(--token-primitives-yellow-100, #fff9ea); -$ion-primitives-yellow-100-rgb: var(--token-primitives-yellow-100-rgb, 255, 249, 234); -$ion-primitives-yellow-200: var(--token-primitives-yellow-200, #fff5db); -$ion-primitives-yellow-200-rgb: var(--token-primitives-yellow-200-rgb, 255, 245, 219); +$ion-primitives-yellow-100: var(--token-primitives-yellow-100, #fff3d5); +$ion-primitives-yellow-100-rgb: var(--token-primitives-yellow-100-rgb, 255, 243, 213); +$ion-primitives-yellow-200: var(--token-primitives-yellow-200, #fff0c7); +$ion-primitives-yellow-200-rgb: var(--token-primitives-yellow-200-rgb, 255, 240, 199); $ion-primitives-yellow-300: var(--token-primitives-yellow-300, #ffebb1); $ion-primitives-yellow-300-rgb: var(--token-primitives-yellow-300-rgb, 255, 235, 177); $ion-primitives-yellow-400: var(--token-primitives-yellow-400, #ffe07b); @@ -125,10 +123,10 @@ $ion-primitives-yellow-1100: var(--token-primitives-yellow-1100, #533802); $ion-primitives-yellow-1100-rgb: var(--token-primitives-yellow-1100-rgb, 83, 56, 2); $ion-primitives-yellow-1200: var(--token-primitives-yellow-1200, #2c1e02); $ion-primitives-yellow-1200-rgb: var(--token-primitives-yellow-1200-rgb, 44, 30, 2); -$ion-primitives-lime-100: var(--token-primitives-lime-100, #f3faea); -$ion-primitives-lime-100-rgb: var(--token-primitives-lime-100-rgb, 243, 250, 234); -$ion-primitives-lime-200: var(--token-primitives-lime-200, #eaf7db); -$ion-primitives-lime-200-rgb: var(--token-primitives-lime-200-rgb, 234, 247, 219); +$ion-primitives-lime-100: var(--token-primitives-lime-100, #ebfcd4); +$ion-primitives-lime-100-rgb: var(--token-primitives-lime-100-rgb, 235, 252, 212); +$ion-primitives-lime-200: var(--token-primitives-lime-200, #e4f7cb); +$ion-primitives-lime-200-rgb: var(--token-primitives-lime-200-rgb, 228, 247, 203); $ion-primitives-lime-300: var(--token-primitives-lime-300, #d3efb2); $ion-primitives-lime-300-rgb: var(--token-primitives-lime-300-rgb, 211, 239, 178); $ion-primitives-lime-400: var(--token-primitives-lime-400, #bbe77d); @@ -149,10 +147,10 @@ $ion-primitives-lime-1100: var(--token-primitives-lime-1100, #2a3a06); $ion-primitives-lime-1100-rgb: var(--token-primitives-lime-1100-rgb, 42, 58, 6); $ion-primitives-lime-1200: var(--token-primitives-lime-1200, #151e03); $ion-primitives-lime-1200-rgb: var(--token-primitives-lime-1200-rgb, 21, 30, 3); -$ion-primitives-green-100: var(--token-primitives-green-100, #ebf9ec); -$ion-primitives-green-100-rgb: var(--token-primitives-green-100-rgb, 235, 249, 236); -$ion-primitives-green-200: var(--token-primitives-green-200, #dcf5de); -$ion-primitives-green-200-rgb: var(--token-primitives-green-200-rgb, 220, 245, 222); +$ion-primitives-green-100: var(--token-primitives-green-100, #e2f9e4); +$ion-primitives-green-100-rgb: var(--token-primitives-green-100-rgb, 226, 249, 228); +$ion-primitives-green-200: var(--token-primitives-green-200, #d1f7d4); +$ion-primitives-green-200-rgb: var(--token-primitives-green-200-rgb, 209, 247, 212); $ion-primitives-green-300: var(--token-primitives-green-300, #b3ebb7); $ion-primitives-green-300-rgb: var(--token-primitives-green-300-rgb, 179, 235, 183); $ion-primitives-green-400: var(--token-primitives-green-400, #7fe089); @@ -173,10 +171,10 @@ $ion-primitives-green-1100: var(--token-primitives-green-1100, #093811); $ion-primitives-green-1100-rgb: var(--token-primitives-green-1100-rgb, 9, 56, 17); $ion-primitives-green-1200: var(--token-primitives-green-1200, #051d09); $ion-primitives-green-1200-rgb: var(--token-primitives-green-1200-rgb, 5, 29, 9); -$ion-primitives-teal-100: var(--token-primitives-teal-100, #eaf8f5); -$ion-primitives-teal-100-rgb: var(--token-primitives-teal-100-rgb, 234, 248, 245); -$ion-primitives-teal-200: var(--token-primitives-teal-200, #dbf3ee); -$ion-primitives-teal-200-rgb: var(--token-primitives-teal-200-rgb, 219, 243, 238); +$ion-primitives-teal-100: var(--token-primitives-teal-100, #d5f9f1); +$ion-primitives-teal-100-rgb: var(--token-primitives-teal-100-rgb, 213, 249, 241); +$ion-primitives-teal-200: var(--token-primitives-teal-200, #c7f1e8); +$ion-primitives-teal-200-rgb: var(--token-primitives-teal-200-rgb, 199, 241, 232); $ion-primitives-teal-300: var(--token-primitives-teal-300, #b1e7dd); $ion-primitives-teal-300-rgb: var(--token-primitives-teal-300-rgb, 177, 231, 221); $ion-primitives-teal-400: var(--token-primitives-teal-400, #7bdbca); @@ -197,10 +195,10 @@ $ion-primitives-teal-1100: var(--token-primitives-teal-1100, #003630); $ion-primitives-teal-1100-rgb: var(--token-primitives-teal-1100-rgb, 0, 54, 48); $ion-primitives-teal-1200: var(--token-primitives-teal-1200, #001c19); $ion-primitives-teal-1200-rgb: var(--token-primitives-teal-1200-rgb, 0, 28, 25); -$ion-primitives-aqua-100: var(--token-primitives-aqua-100, #ebf9fe); -$ion-primitives-aqua-100-rgb: var(--token-primitives-aqua-100-rgb, 235, 249, 254); -$ion-primitives-aqua-200: var(--token-primitives-aqua-200, #dcf4fd); -$ion-primitives-aqua-200-rgb: var(--token-primitives-aqua-200-rgb, 220, 244, 253); +$ion-primitives-aqua-100: var(--token-primitives-aqua-100, #d9f5ff); +$ion-primitives-aqua-100-rgb: var(--token-primitives-aqua-100-rgb, 217, 245, 255); +$ion-primitives-aqua-200: var(--token-primitives-aqua-200, #cbeffc); +$ion-primitives-aqua-200-rgb: var(--token-primitives-aqua-200-rgb, 203, 239, 252); $ion-primitives-aqua-300: var(--token-primitives-aqua-300, #b3e9fc); $ion-primitives-aqua-300-rgb: var(--token-primitives-aqua-300-rgb, 179, 233, 252); $ion-primitives-aqua-400: var(--token-primitives-aqua-400, #80defa); @@ -221,10 +219,10 @@ $ion-primitives-aqua-1100: var(--token-primitives-aqua-1100, #0a3741); $ion-primitives-aqua-1100-rgb: var(--token-primitives-aqua-1100-rgb, 10, 55, 65); $ion-primitives-aqua-1200: var(--token-primitives-aqua-1200, #051c21); $ion-primitives-aqua-1200-rgb: var(--token-primitives-aqua-1200-rgb, 5, 28, 33); -$ion-primitives-blue-100: var(--token-primitives-blue-100, #f2f4fd); -$ion-primitives-blue-100-rgb: var(--token-primitives-blue-100-rgb, 242, 244, 253); -$ion-primitives-blue-200: var(--token-primitives-blue-200, #e9ecfc); -$ion-primitives-blue-200-rgb: var(--token-primitives-blue-200-rgb, 233, 236, 252); +$ion-primitives-blue-100: var(--token-primitives-blue-100, #e9ecfc); +$ion-primitives-blue-100-rgb: var(--token-primitives-blue-100-rgb, 233, 236, 252); +$ion-primitives-blue-200: var(--token-primitives-blue-200, #e4e8ff); +$ion-primitives-blue-200-rgb: var(--token-primitives-blue-200-rgb, 228, 232, 255); $ion-primitives-blue-300: var(--token-primitives-blue-300, #d0d7fa); $ion-primitives-blue-300-rgb: var(--token-primitives-blue-300-rgb, 208, 215, 250); $ion-primitives-blue-400: var(--token-primitives-blue-400, #b5c0f7); @@ -245,10 +243,10 @@ $ion-primitives-blue-1100: var(--token-primitives-blue-1100, #09358a); $ion-primitives-blue-1100-rgb: var(--token-primitives-blue-1100-rgb, 9, 53, 138); $ion-primitives-blue-1200: var(--token-primitives-blue-1200, #072561); $ion-primitives-blue-1200-rgb: var(--token-primitives-blue-1200-rgb, 7, 37, 97); -$ion-primitives-indigo-100: var(--token-primitives-indigo-100, #f3f2fb); -$ion-primitives-indigo-100-rgb: var(--token-primitives-indigo-100-rgb, 243, 242, 251); -$ion-primitives-indigo-200: var(--token-primitives-indigo-200, #eae9f9); -$ion-primitives-indigo-200-rgb: var(--token-primitives-indigo-200-rgb, 234, 233, 249); +$ion-primitives-indigo-100: var(--token-primitives-indigo-100, #ebe8ff); +$ion-primitives-indigo-100-rgb: var(--token-primitives-indigo-100-rgb, 235, 232, 255); +$ion-primitives-indigo-200: var(--token-primitives-indigo-200, #e6e2fe); +$ion-primitives-indigo-200-rgb: var(--token-primitives-indigo-200-rgb, 230, 226, 254); $ion-primitives-indigo-300: var(--token-primitives-indigo-300, #d3d1f2); $ion-primitives-indigo-300-rgb: var(--token-primitives-indigo-300-rgb, 211, 209, 242); $ion-primitives-indigo-400: var(--token-primitives-indigo-400, #bab5eb); @@ -269,10 +267,10 @@ $ion-primitives-indigo-1100: var(--token-primitives-indigo-1100, #26107b); $ion-primitives-indigo-1100-rgb: var(--token-primitives-indigo-1100-rgb, 38, 16, 123); $ion-primitives-indigo-1200: var(--token-primitives-indigo-1200, #1a0b57); $ion-primitives-indigo-1200-rgb: var(--token-primitives-indigo-1200-rgb, 26, 11, 87); -$ion-primitives-violet-100: var(--token-primitives-violet-100, #f5f2fe); -$ion-primitives-violet-100-rgb: var(--token-primitives-violet-100-rgb, 245, 242, 254); -$ion-primitives-violet-200: var(--token-primitives-violet-200, #eee9fd); -$ion-primitives-violet-200-rgb: var(--token-primitives-violet-200-rgb, 238, 233, 253); +$ion-primitives-violet-100: var(--token-primitives-violet-100, #ece6ff); +$ion-primitives-violet-100-rgb: var(--token-primitives-violet-100-rgb, 236, 230, 255); +$ion-primitives-violet-200: var(--token-primitives-violet-200, #e5defc); +$ion-primitives-violet-200-rgb: var(--token-primitives-violet-200-rgb, 229, 222, 252); $ion-primitives-violet-300: var(--token-primitives-violet-300, #dcd1fb); $ion-primitives-violet-300-rgb: var(--token-primitives-violet-300-rgb, 220, 209, 251); $ion-primitives-violet-400: var(--token-primitives-violet-400, #c9b6f9); @@ -293,10 +291,10 @@ $ion-primitives-violet-1100: var(--token-primitives-violet-1100, #48128c); $ion-primitives-violet-1100-rgb: var(--token-primitives-violet-1100-rgb, 72, 18, 140); $ion-primitives-violet-1200: var(--token-primitives-violet-1200, #330d63); $ion-primitives-violet-1200-rgb: var(--token-primitives-violet-1200-rgb, 51, 13, 99); -$ion-primitives-purple-100: var(--token-primitives-purple-100, #f9f3fe); -$ion-primitives-purple-100-rgb: var(--token-primitives-purple-100-rgb, 249, 243, 254); -$ion-primitives-purple-200: var(--token-primitives-purple-200, #f5eafd); -$ion-primitives-purple-200-rgb: var(--token-primitives-purple-200-rgb, 245, 234, 253); +$ion-primitives-purple-100: var(--token-primitives-purple-100, #f5eafd); +$ion-primitives-purple-100-rgb: var(--token-primitives-purple-100-rgb, 245, 234, 253); +$ion-primitives-purple-200: var(--token-primitives-purple-200, #f2e2ff); +$ion-primitives-purple-200-rgb: var(--token-primitives-purple-200-rgb, 242, 226, 255); $ion-primitives-purple-300: var(--token-primitives-purple-300, #e9d3fa); $ion-primitives-purple-300-rgb: var(--token-primitives-purple-300-rgb, 233, 211, 250); $ion-primitives-purple-400: var(--token-primitives-purple-400, #deb9f8); @@ -317,10 +315,10 @@ $ion-primitives-purple-1100: var(--token-primitives-purple-1100, #6a238b); $ion-primitives-purple-1100-rgb: var(--token-primitives-purple-1100-rgb, 106, 35, 139); $ion-primitives-purple-1200: var(--token-primitives-purple-1200, #4b1862); $ion-primitives-purple-1200-rgb: var(--token-primitives-purple-1200-rgb, 75, 24, 98); -$ion-primitives-magenta-100: var(--token-primitives-magenta-100, #fdf3fb); -$ion-primitives-magenta-100-rgb: var(--token-primitives-magenta-100-rgb, 253, 243, 251); -$ion-primitives-magenta-200: var(--token-primitives-magenta-200, #fcebf8); -$ion-primitives-magenta-200-rgb: var(--token-primitives-magenta-200-rgb, 252, 235, 248); +$ion-primitives-magenta-100: var(--token-primitives-magenta-100, #ffecfb); +$ion-primitives-magenta-100-rgb: var(--token-primitives-magenta-100-rgb, 255, 236, 251); +$ion-primitives-magenta-200: var(--token-primitives-magenta-200, #ffe5fa); +$ion-primitives-magenta-200-rgb: var(--token-primitives-magenta-200-rgb, 255, 229, 250); $ion-primitives-magenta-300: var(--token-primitives-magenta-300, #f9d4f1); $ion-primitives-magenta-300-rgb: var(--token-primitives-magenta-300-rgb, 249, 212, 241); $ion-primitives-magenta-400: var(--token-primitives-magenta-400, #f6bcea); @@ -341,10 +339,10 @@ $ion-primitives-magenta-1100: var(--token-primitives-magenta-1100, #892b7a); $ion-primitives-magenta-1100-rgb: var(--token-primitives-magenta-1100-rgb, 137, 43, 122); $ion-primitives-magenta-1200: var(--token-primitives-magenta-1200, #611e56); $ion-primitives-magenta-1200-rgb: var(--token-primitives-magenta-1200-rgb, 97, 30, 86); -$ion-primitives-pink-100: var(--token-primitives-pink-100, #fef3f5); -$ion-primitives-pink-100-rgb: var(--token-primitives-pink-100-rgb, 254, 243, 245); -$ion-primitives-pink-200: var(--token-primitives-pink-200, #fdeaee); -$ion-primitives-pink-200-rgb: var(--token-primitives-pink-200-rgb, 253, 234, 238); +$ion-primitives-pink-100: var(--token-primitives-pink-100, #fdeaee); +$ion-primitives-pink-100-rgb: var(--token-primitives-pink-100-rgb, 253, 234, 238); +$ion-primitives-pink-200: var(--token-primitives-pink-200, #ffe3e9); +$ion-primitives-pink-200-rgb: var(--token-primitives-pink-200-rgb, 255, 227, 233); $ion-primitives-pink-300: var(--token-primitives-pink-300, #fad3dc); $ion-primitives-pink-300-rgb: var(--token-primitives-pink-300-rgb, 250, 211, 220); $ion-primitives-pink-400: var(--token-primitives-pink-400, #f8b9c9); @@ -365,10 +363,46 @@ $ion-primitives-pink-1100: var(--token-primitives-pink-1100, #8b2248); $ion-primitives-pink-1100-rgb: var(--token-primitives-pink-1100-rgb, 139, 34, 72); $ion-primitives-pink-1200: var(--token-primitives-pink-1200, #621833); $ion-primitives-pink-1200-rgb: var(--token-primitives-pink-1200-rgb, 98, 24, 51); + +// Scale +$ion-scale-0: var(--token-scale-0, 0px); +$ion-scale-100: var(--token-scale-100, 4px); +$ion-scale-150: var(--token-scale-150, 6px); +$ion-scale-200: var(--token-scale-200, 8px); +$ion-scale-250: var(--token-scale-250, 10px); +$ion-scale-300: var(--token-scale-300, 12px); +$ion-scale-400: var(--token-scale-400, 16px); +$ion-scale-500: var(--token-scale-500, 20px); +$ion-scale-600: var(--token-scale-600, 24px); +$ion-scale-700: var(--token-scale-700, 28px); +$ion-scale-800: var(--token-scale-800, 32px); +$ion-scale-900: var(--token-scale-900, 36px); +$ion-scale-1000: var(--token-scale-1000, 40px); +$ion-scale-1100: var(--token-scale-1100, 44px); +$ion-scale-1200: var(--token-scale-1200, 48px); +$ion-scale-1400: var(--token-scale-1400, 56px); +$ion-scale-1600: var(--token-scale-1600, 64px); +$ion-scale-1800: var(--token-scale-1800, 72px); +$ion-scale-2000: var(--token-scale-2000, 80px); +$ion-scale-2400: var(--token-scale-2400, 96px); +$ion-scale-2800: var(--token-scale-2800, 112px); +$ion-scale-3200: var(--token-scale-3200, 128px); +$ion-scale-3400: var(--token-scale-3400, 136px); +$ion-scale-3600: var(--token-scale-3600, 144px); +$ion-scale-4000: var(--token-scale-4000, 160px); +$ion-scale-5000: var(--token-scale-5000, 200px); +$ion-scale-6200: var(--token-scale-6200, 248px); +$ion-scale-7400: var(--token-scale-7400, 296px); +$ion-scale-9000: var(--token-scale-9000, 360px); +$ion-scale-025: var(--token-scale-025, 1px); +$ion-scale-050: var(--token-scale-050, 2px); +$ion-scale-075: var(--token-scale-075, 3px); + +// Semantics $ion-semantics-primary-100: var(--token-semantics-primary-100, $ion-primitives-blue-100); -$ion-semantics-primary-100-rgb: var(--token-semantics-primary-100-rgb, 242, 244, 253); +$ion-semantics-primary-100-rgb: var(--token-semantics-primary-100-rgb, 233, 236, 252); $ion-semantics-primary-200: var(--token-semantics-primary-200, $ion-primitives-blue-200); -$ion-semantics-primary-200-rgb: var(--token-semantics-primary-200-rgb, 233, 236, 252); +$ion-semantics-primary-200-rgb: var(--token-semantics-primary-200-rgb, 228, 232, 255); $ion-semantics-primary-300: var(--token-semantics-primary-300, $ion-primitives-blue-300); $ion-semantics-primary-300-rgb: var(--token-semantics-primary-300-rgb, 208, 215, 250); $ion-semantics-primary-400: var(--token-semantics-primary-400, $ion-primitives-blue-400); @@ -392,9 +426,9 @@ $ion-semantics-primary-1200-rgb: var(--token-semantics-primary-1200-rgb, 7, 37, $ion-semantics-primary-base: var(--token-semantics-primary-base, $ion-semantics-primary-700); $ion-semantics-primary-base-rgb: var(--token-semantics-primary-base-rgb, 16, 92, 239); $ion-semantics-info-100: var(--token-semantics-info-100, $ion-primitives-blue-100); -$ion-semantics-info-100-rgb: var(--token-semantics-info-100-rgb, 242, 244, 253); +$ion-semantics-info-100-rgb: var(--token-semantics-info-100-rgb, 233, 236, 252); $ion-semantics-info-200: var(--token-semantics-info-200, $ion-primitives-blue-200); -$ion-semantics-info-200-rgb: var(--token-semantics-info-200-rgb, 233, 236, 252); +$ion-semantics-info-200-rgb: var(--token-semantics-info-200-rgb, 228, 232, 255); $ion-semantics-info-300: var(--token-semantics-info-300, $ion-primitives-blue-300); $ion-semantics-info-300-rgb: var(--token-semantics-info-300-rgb, 208, 215, 250); $ion-semantics-info-400: var(--token-semantics-info-400, $ion-primitives-blue-400); @@ -418,9 +452,9 @@ $ion-semantics-info-1200-rgb: var(--token-semantics-info-1200-rgb, 7, 37, 97); $ion-semantics-info-base: var(--token-semantics-info-base, $ion-semantics-info-700); $ion-semantics-info-base-rgb: var(--token-semantics-info-base-rgb, 16, 92, 239); $ion-semantics-success-100: var(--token-semantics-success-100, $ion-primitives-green-100); -$ion-semantics-success-100-rgb: var(--token-semantics-success-100-rgb, 235, 249, 236); +$ion-semantics-success-100-rgb: var(--token-semantics-success-100-rgb, 226, 249, 228); $ion-semantics-success-200: var(--token-semantics-success-200, $ion-primitives-green-200); -$ion-semantics-success-200-rgb: var(--token-semantics-success-200-rgb, 220, 245, 222); +$ion-semantics-success-200-rgb: var(--token-semantics-success-200-rgb, 209, 247, 212); $ion-semantics-success-300: var(--token-semantics-success-300, $ion-primitives-green-300); $ion-semantics-success-300-rgb: var(--token-semantics-success-300-rgb, 179, 235, 183); $ion-semantics-success-400: var(--token-semantics-success-400, $ion-primitives-green-400); @@ -444,9 +478,9 @@ $ion-semantics-success-1200-rgb: var(--token-semantics-success-1200-rgb, 5, 29, $ion-semantics-success-base: var(--token-semantics-success-base, $ion-semantics-success-700); $ion-semantics-success-base-rgb: var(--token-semantics-success-base-rgb, 27, 164, 51); $ion-semantics-danger-100: var(--token-semantics-danger-100, $ion-primitives-red-100); -$ion-semantics-danger-100-rgb: var(--token-semantics-danger-100-rgb, 254, 237, 237); +$ion-semantics-danger-100-rgb: var(--token-semantics-danger-100-rgb, 253, 225, 225); $ion-semantics-danger-200: var(--token-semantics-danger-200, $ion-primitives-red-200); -$ion-semantics-danger-200-rgb: var(--token-semantics-danger-200-rgb, 253, 225, 225); +$ion-semantics-danger-200-rgb: var(--token-semantics-danger-200-rgb, 255, 217, 217); $ion-semantics-danger-300: var(--token-semantics-danger-300, $ion-primitives-red-300); $ion-semantics-danger-300-rgb: var(--token-semantics-danger-300-rgb, 252, 193, 193); $ion-semantics-danger-400: var(--token-semantics-danger-400, $ion-primitives-red-400); @@ -470,9 +504,9 @@ $ion-semantics-danger-1200-rgb: var(--token-semantics-danger-1200-rgb, 51, 9, 9) $ion-semantics-danger-base: var(--token-semantics-danger-base, $ion-semantics-danger-700); $ion-semantics-danger-base-rgb: var(--token-semantics-danger-base-rgb, 229, 41, 41); $ion-semantics-warning-100: var(--token-semantics-warning-100, $ion-primitives-yellow-100); -$ion-semantics-warning-100-rgb: var(--token-semantics-warning-100-rgb, 255, 249, 234); +$ion-semantics-warning-100-rgb: var(--token-semantics-warning-100-rgb, 255, 243, 213); $ion-semantics-warning-200: var(--token-semantics-warning-200, $ion-primitives-yellow-200); -$ion-semantics-warning-200-rgb: var(--token-semantics-warning-200-rgb, 255, 245, 219); +$ion-semantics-warning-200-rgb: var(--token-semantics-warning-200-rgb, 255, 240, 199); $ion-semantics-warning-300: var(--token-semantics-warning-300, $ion-primitives-yellow-300); $ion-semantics-warning-300-rgb: var(--token-semantics-warning-300-rgb, 255, 235, 177); $ion-semantics-warning-400: var(--token-semantics-warning-400, $ion-primitives-yellow-400); @@ -495,93 +529,64 @@ $ion-semantics-warning-1200: var(--token-semantics-warning-1200, $ion-primitives $ion-semantics-warning-1200-rgb: var(--token-semantics-warning-1200-rgb, 44, 30, 2); $ion-semantics-warning-base: var(--token-semantics-warning-base, $ion-semantics-warning-500); $ion-semantics-warning-base-rgb: var(--token-semantics-warning-base-rgb, 255, 214, 0); -$ion-scale-0: var(--token-scale-0, 0px); -$ion-scale-100: var(--token-scale-100, 4px); -$ion-scale-150: var(--token-scale-150, 6px); -$ion-scale-200: var(--token-scale-200, 8px); -$ion-scale-250: var(--token-scale-250, 10px); -$ion-scale-300: var(--token-scale-300, 12px); -$ion-scale-400: var(--token-scale-400, 16px); -$ion-scale-500: var(--token-scale-500, 20px); -$ion-scale-600: var(--token-scale-600, 24px); -$ion-scale-700: var(--token-scale-700, 28px); -$ion-scale-800: var(--token-scale-800, 32px); -$ion-scale-900: var(--token-scale-900, 36px); -$ion-scale-1000: var(--token-scale-1000, 40px); -$ion-scale-1100: var(--token-scale-1100, 44px); -$ion-scale-1200: var(--token-scale-1200, 48px); -$ion-scale-1400: var(--token-scale-1400, 56px); -$ion-scale-1600: var(--token-scale-1600, 64px); -$ion-scale-1800: var(--token-scale-1800, 72px); -$ion-scale-2000: var(--token-scale-2000, 80px); -$ion-scale-2400: var(--token-scale-2400, 96px); -$ion-scale-2800: var(--token-scale-2800, 112px); -$ion-scale-3200: var(--token-scale-3200, 128px); -$ion-scale-3400: var(--token-scale-3400, 136px); -$ion-scale-3600: var(--token-scale-3600, 144px); -$ion-scale-4000: var(--token-scale-4000, 160px); -$ion-scale-5000: var(--token-scale-5000, 200px); -$ion-scale-6200: var(--token-scale-6200, 248px); -$ion-scale-7400: var(--token-scale-7400, 296px); -$ion-scale-9000: var(--token-scale-9000, 360px); -$ion-scale-025: var(--token-scale-025, 1px); -$ion-scale-050: var(--token-scale-050, 2px); -$ion-scale-075: var(--token-scale-075, 3px); -$ion-border-default: var(--token-border-default, $ion-primitives-neutral-400); -$ion-border-default-rgb: var(--token-border-default-rgb, 213, 213, 213); -$ion-border-boldest: var(--token-border-boldest, $ion-primitives-neutral-1200); -$ion-border-boldest-rgb: var(--token-border-boldest-rgb, 36, 36, 36); -$ion-border-subtle: var(--token-border-subtle, $ion-primitives-neutral-100); -$ion-border-subtle-rgb: var(--token-border-subtle-rgb, 245, 245, 245); -$ion-border-subtlest: var(--token-border-subtlest, $ion-primitives-base-white); -$ion-border-subtlest-rgb: var(--token-border-subtlest-rgb, 255, 255, 255); -$ion-border-primary: var(--token-border-primary, $ion-semantics-primary-base); -$ion-border-primary-rgb: var(--token-border-primary-rgb, 16, 92, 239); -$ion-border-success: var(--token-border-success, $ion-semantics-success-900); -$ion-border-success-rgb: var(--token-border-success-rgb, 18, 111, 35); -$ion-border-warning: var(--token-border-warning, $ion-semantics-warning-900); -$ion-border-warning-rgb: var(--token-border-warning-rgb, 150, 101, 3); -$ion-border-disabled: var(--token-border-disabled, $ion-primitives-neutral-300); -$ion-border-disabled-rgb: var(--token-border-disabled-rgb, 224, 224, 224); -$ion-border-focus-0: var(--token-border-focus-0, none); -$ion-border-focus-default: var(--token-border-focus-default, $ion-primitives-blue-400); -$ion-border-focus-default-rgb: var(--token-border-focus-default-rgb, 181, 192, 247); -$ion-border-focus-error: var(--token-border-focus-error, $ion-primitives-red-400); -$ion-border-focus-error-rgb: var(--token-border-focus-error-rgb, 250, 161, 161); -$ion-border-danger-default: var(--token-border-danger-default, $ion-semantics-danger-800); -$ion-border-danger-default-rgb: var(--token-border-danger-default-rgb, 191, 34, 34); -$ion-border-danger-press: var(--token-border-danger-press, $ion-semantics-danger-1000); -$ion-border-danger-press-rgb: var(--token-border-danger-press-rgb, 118, 21, 21); -$ion-border-input-default: var(--token-border-input-default, $ion-primitives-neutral-500); -$ion-border-input-default-rgb: var(--token-border-input-default-rgb, 162, 162, 162); -$ion-border-input-press: var(--token-border-input-press, $ion-primitives-neutral-700); -$ion-border-input-press-rgb: var(--token-border-input-press-rgb, 119, 119, 119); -$ion-border-input-read-only: var(--token-border-input-read-only, $ion-primitives-neutral-500); -$ion-border-input-read-only-rgb: var(--token-border-input-read-only-rgb, 162, 162, 162); -$ion-border-style-none: var(--token-border-style-none, none); -$ion-border-style-solid: var(--token-border-style-solid, solid); -$ion-border-style-dashed: var(--token-border-style-dashed, dashed); -$ion-border-style-dotted: var(--token-border-style-dotted, dotted); -$ion-border-size-0: var(--token-border-size-0, $ion-scale-0); -$ion-border-size-025: var(--token-border-size-025, $ion-scale-025); -$ion-border-size-050: var(--token-border-size-050, $ion-scale-050); -$ion-border-size-075: var(--token-border-size-075, $ion-scale-075); -$ion-border-radius-0: var(--token-border-radius-0, $ion-scale-0); -$ion-border-radius-100: var(--token-border-radius-100, $ion-scale-100); -$ion-border-radius-200: var(--token-border-radius-200, $ion-scale-200); -$ion-border-radius-300: var(--token-border-radius-300, $ion-scale-300); -$ion-border-radius-400: var(--token-border-radius-400, $ion-scale-400); -$ion-border-radius-500: var(--token-border-radius-500, $ion-scale-500); -$ion-border-radius-800: var(--token-border-radius-800, $ion-scale-800); -$ion-border-radius-1000: var(--token-border-radius-1000, $ion-scale-1000); -$ion-border-radius-full: var(--token-border-radius-full, 999px); -$ion-border-radius-025: var(--token-border-radius-025, $ion-scale-050); + +// Text +$ion-text-default: var(--token-text-default, $ion-primitives-neutral-1200); +$ion-text-default-rgb: var(--token-text-default-rgb, 36, 36, 36); +$ion-text-subtle: var(--token-text-subtle, $ion-primitives-neutral-1000); +$ion-text-subtle-rgb: var(--token-text-subtle-rgb, 59, 59, 59); +$ion-text-subtlest: var(--token-text-subtlest, $ion-primitives-neutral-800); +$ion-text-subtlest-rgb: var(--token-text-subtlest-rgb, 98, 98, 98); +$ion-text-primary: var(--token-text-primary, $ion-semantics-primary-900); +$ion-text-primary-rgb: var(--token-text-primary-rgb, 13, 75, 195); +$ion-text-disabled: var(--token-text-disabled, $ion-primitives-neutral-500); +$ion-text-disabled-rgb: var(--token-text-disabled-rgb, 162, 162, 162); +$ion-text-danger: var(--token-text-danger, $ion-semantics-danger-900); +$ion-text-danger-rgb: var(--token-text-danger-rgb, 153, 27, 27); +$ion-text-info: var(--token-text-info, $ion-semantics-info-900); +$ion-text-info-rgb: var(--token-text-info-rgb, 13, 75, 195); +$ion-text-warning: var(--token-text-warning, $ion-semantics-warning-1000); +$ion-text-warning-rgb: var(--token-text-warning-rgb, 112, 75, 2); +$ion-text-success: var(--token-text-success, $ion-semantics-success-900); +$ion-text-success-rgb: var(--token-text-success-rgb, 18, 111, 35); +$ion-text-link-default: var(--token-text-link-default, $ion-semantics-primary-900); +$ion-text-link-default-rgb: var(--token-text-link-default-rgb, 13, 75, 195); +$ion-text-link-press: var(--token-text-link-press, $ion-semantics-primary-1100); +$ion-text-link-press-rgb: var(--token-text-link-press-rgb, 9, 53, 138); +$ion-text-link-visited: var(--token-text-link-visited, $ion-semantics-primary-1100); +$ion-text-link-visited-rgb: var(--token-text-link-visited-rgb, 9, 53, 138); +$ion-text-inverse: var(--token-text-inverse, $ion-primitives-base-white); +$ion-text-inverse-rgb: var(--token-text-inverse-rgb, 255, 255, 255); +$ion-text-select: var(--token-text-select, $ion-semantics-primary-800); +$ion-text-select-rgb: var(--token-text-select-rgb, 15, 84, 218); +$ion-text-extended-pumpkin: var(--token-text-extended-pumpkin, $ion-primitives-pumpkin-900); +$ion-text-extended-pumpkin-rgb: var(--token-text-extended-pumpkin-rgb, 128, 48, 4); +$ion-text-extended-orange: var(--token-text-extended-orange, $ion-primitives-orange-900); +$ion-text-extended-orange-rgb: var(--token-text-extended-orange-rgb, 132, 77, 0); +$ion-text-extended-lime: var(--token-text-extended-lime, $ion-primitives-lime-1000); +$ion-text-extended-lime-rgb: var(--token-text-extended-lime-rgb, 62, 87, 9); +$ion-text-extended-teal: var(--token-text-extended-teal, $ion-primitives-teal-900); +$ion-text-extended-teal-rgb: var(--token-text-extended-teal-rgb, 0, 107, 95); +$ion-text-extended-aqua: var(--token-text-extended-aqua, $ion-primitives-aqua-900); +$ion-text-extended-aqua-rgb: var(--token-text-extended-aqua-rgb, 20, 109, 129); +$ion-text-extended-indigo: var(--token-text-extended-indigo, $ion-primitives-indigo-900); +$ion-text-extended-indigo-rgb: var(--token-text-extended-indigo-rgb, 53, 22, 174); +$ion-text-extended-violet: var(--token-text-extended-violet, $ion-primitives-violet-900); +$ion-text-extended-violet-rgb: var(--token-text-extended-violet-rgb, 101, 26, 197); +$ion-text-extended-purple: var(--token-text-extended-purple, $ion-primitives-purple-1000); +$ion-text-extended-purple-rgb: var(--token-text-extended-purple-rgb, 129, 42, 170); +$ion-text-extended-magenta: var(--token-text-extended-magenta, $ion-primitives-magenta-1100); +$ion-text-extended-magenta-rgb: var(--token-text-extended-magenta-rgb, 137, 43, 122); +$ion-text-extended-pink: var(--token-text-extended-pink, $ion-primitives-pink-1000); +$ion-text-extended-pink-rgb: var(--token-text-extended-pink-rgb, 170, 42, 88); + +// Bg $ion-bg-primary-base-default: var(--token-bg-primary-base-default, $ion-semantics-primary-base); $ion-bg-primary-base-default-rgb: var(--token-bg-primary-base-default-rgb, 16, 92, 239); $ion-bg-primary-base-press: var(--token-bg-primary-base-press, $ion-semantics-primary-900); $ion-bg-primary-base-press-rgb: var(--token-bg-primary-base-press-rgb, 13, 75, 195); $ion-bg-primary-subtle-default: var(--token-bg-primary-subtle-default, $ion-semantics-primary-100); -$ion-bg-primary-subtle-default-rgb: var(--token-bg-primary-subtle-default-rgb, 242, 244, 253); +$ion-bg-primary-subtle-default-rgb: var(--token-bg-primary-subtle-default-rgb, 233, 236, 252); $ion-bg-primary-subtle-press: var(--token-bg-primary-subtle-press, $ion-semantics-primary-300); $ion-bg-primary-subtle-press-rgb: var(--token-bg-primary-subtle-press-rgb, 208, 215, 250); $ion-bg-danger-base-default: var(--token-bg-danger-base-default, $ion-semantics-danger-800); @@ -589,7 +594,7 @@ $ion-bg-danger-base-default-rgb: var(--token-bg-danger-base-default-rgb, 191, 34 $ion-bg-danger-base-press: var(--token-bg-danger-base-press, $ion-semantics-danger-1000); $ion-bg-danger-base-press-rgb: var(--token-bg-danger-base-press-rgb, 118, 21, 21); $ion-bg-danger-subtle-default: var(--token-bg-danger-subtle-default, $ion-semantics-danger-100); -$ion-bg-danger-subtle-default-rgb: var(--token-bg-danger-subtle-default-rgb, 254, 237, 237); +$ion-bg-danger-subtle-default-rgb: var(--token-bg-danger-subtle-default-rgb, 253, 225, 225); $ion-bg-danger-subtle-press: var(--token-bg-danger-subtle-press, $ion-semantics-danger-300); $ion-bg-danger-subtle-press-rgb: var(--token-bg-danger-subtle-press-rgb, 252, 193, 193); $ion-bg-success-base-default: var(--token-bg-success-base-default, $ion-semantics-success-900); @@ -597,7 +602,7 @@ $ion-bg-success-base-default-rgb: var(--token-bg-success-base-default-rgb, 18, 1 $ion-bg-success-base-press: var(--token-bg-success-base-press, $ion-semantics-success-1100); $ion-bg-success-base-press-rgb: var(--token-bg-success-base-press-rgb, 9, 56, 17); $ion-bg-success-subtle-default: var(--token-bg-success-subtle-default, $ion-semantics-success-100); -$ion-bg-success-subtle-default-rgb: var(--token-bg-success-subtle-default-rgb, 235, 249, 236); +$ion-bg-success-subtle-default-rgb: var(--token-bg-success-subtle-default-rgb, 226, 249, 228); $ion-bg-success-subtle-press: var(--token-bg-success-subtle-press, $ion-semantics-success-300); $ion-bg-success-subtle-press-rgb: var(--token-bg-success-subtle-press-rgb, 179, 235, 183); $ion-bg-info-base-default: var(--token-bg-info-base-default, $ion-semantics-info-900); @@ -605,7 +610,7 @@ $ion-bg-info-base-default-rgb: var(--token-bg-info-base-default-rgb, 13, 75, 195 $ion-bg-info-base-press: var(--token-bg-info-base-press, $ion-semantics-info-1100); $ion-bg-info-base-press-rgb: var(--token-bg-info-base-press-rgb, 9, 53, 138); $ion-bg-info-subtle-default: var(--token-bg-info-subtle-default, $ion-semantics-info-100); -$ion-bg-info-subtle-default-rgb: var(--token-bg-info-subtle-default-rgb, 242, 244, 253); +$ion-bg-info-subtle-default-rgb: var(--token-bg-info-subtle-default-rgb, 233, 236, 252); $ion-bg-info-subtle-press: var(--token-bg-info-subtle-press, $ion-semantics-info-300); $ion-bg-info-subtle-press-rgb: var(--token-bg-info-subtle-press-rgb, 208, 215, 250); $ion-bg-warning-base-default: var(--token-bg-warning-base-default, $ion-semantics-warning-500); @@ -613,13 +618,13 @@ $ion-bg-warning-base-default-rgb: var(--token-bg-warning-base-default-rgb, 255, $ion-bg-warning-base-press: var(--token-bg-warning-base-press, $ion-semantics-warning-700); $ion-bg-warning-base-press-rgb: var(--token-bg-warning-base-press-rgb, 223, 156, 0); $ion-bg-warning-subtle-default: var(--token-bg-warning-subtle-default, $ion-semantics-warning-200); -$ion-bg-warning-subtle-default-rgb: var(--token-bg-warning-subtle-default-rgb, 255, 245, 219); +$ion-bg-warning-subtle-default-rgb: var(--token-bg-warning-subtle-default-rgb, 255, 240, 199); $ion-bg-warning-subtle-press: var(--token-bg-warning-subtle-press, $ion-semantics-warning-400); $ion-bg-warning-subtle-press-rgb: var(--token-bg-warning-subtle-press-rgb, 255, 224, 123); $ion-bg-body: var(--token-bg-body, $ion-primitives-base-white); $ion-bg-body-rgb: var(--token-bg-body-rgb, 255, 255, 255); $ion-bg-neutral-subtle-default: var(--token-bg-neutral-subtle-default, $ion-primitives-neutral-200); -$ion-bg-neutral-subtle-default-rgb: var(--token-bg-neutral-subtle-default-rgb, 239, 239, 239); +$ion-bg-neutral-subtle-default-rgb: var(--token-bg-neutral-subtle-default-rgb, 234, 233, 233); $ion-bg-neutral-subtle-press: var(--token-bg-neutral-subtle-press, $ion-primitives-neutral-400); $ion-bg-neutral-subtle-press-rgb: var(--token-bg-neutral-subtle-press-rgb, 213, 213, 213); $ion-bg-neutral-base-default: var(--token-bg-neutral-base-default, $ion-primitives-neutral-500); @@ -629,7 +634,7 @@ $ion-bg-neutral-base-press-rgb: var(--token-bg-neutral-base-press-rgb, 119, 119, $ion-bg-neutral-subtlest-default: var(--token-bg-neutral-subtlest-default, $ion-primitives-base-white); $ion-bg-neutral-subtlest-default-rgb: var(--token-bg-neutral-subtlest-default-rgb, 255, 255, 255); $ion-bg-neutral-subtlest-press: var(--token-bg-neutral-subtlest-press, $ion-primitives-neutral-200); -$ion-bg-neutral-subtlest-press-rgb: var(--token-bg-neutral-subtlest-press-rgb, 239, 239, 239); +$ion-bg-neutral-subtlest-press-rgb: var(--token-bg-neutral-subtlest-press-rgb, 234, 233, 233); $ion-bg-neutral-bold-default: var(--token-bg-neutral-bold-default, $ion-primitives-neutral-1000); $ion-bg-neutral-bold-default-rgb: var(--token-bg-neutral-bold-default-rgb, 59, 59, 59); $ion-bg-neutral-bold-press: var(--token-bg-neutral-bold-press, $ion-primitives-neutral-1200); @@ -645,13 +650,13 @@ $ion-bg-surface-inverse-rgb: var(--token-bg-surface-inverse-rgb, 255, 255, 255); $ion-bg-input-default: var(--token-bg-input-default, $ion-primitives-base-white); $ion-bg-input-default-rgb: var(--token-bg-input-default-rgb, 255, 255, 255); $ion-bg-input-read-only: var(--token-bg-input-read-only, $ion-primitives-neutral-100); -$ion-bg-input-read-only-rgb: var(--token-bg-input-read-only-rgb, 245, 245, 245); +$ion-bg-input-read-only-rgb: var(--token-bg-input-read-only-rgb, 243, 243, 243); $ion-bg-input-press: var(--token-bg-input-press, $ion-primitives-neutral-200); -$ion-bg-input-press-rgb: var(--token-bg-input-press-rgb, 239, 239, 239); +$ion-bg-input-press-rgb: var(--token-bg-input-press-rgb, 234, 233, 233); $ion-bg-input-disabled: var(--token-bg-input-disabled, $ion-primitives-neutral-100); -$ion-bg-input-disabled-rgb: var(--token-bg-input-disabled-rgb, 245, 245, 245); +$ion-bg-input-disabled-rgb: var(--token-bg-input-disabled-rgb, 243, 243, 243); $ion-bg-input-bold-default: var(--token-bg-input-bold-default, $ion-primitives-neutral-200); -$ion-bg-input-bold-default-rgb: var(--token-bg-input-bold-default-rgb, 239, 239, 239); +$ion-bg-input-bold-default-rgb: var(--token-bg-input-bold-default-rgb, 234, 233, 233); $ion-bg-input-bold-press: var(--token-bg-input-bold-press, $ion-primitives-neutral-400); $ion-bg-input-bold-press-rgb: var(--token-bg-input-bold-press-rgb, 213, 213, 213); $ion-bg-input-bold-read-only: var(--token-bg-input-bold-read-only, $ion-primitives-neutral-300); @@ -659,7 +664,7 @@ $ion-bg-input-bold-read-only-rgb: var(--token-bg-input-bold-read-only-rgb, 224, $ion-bg-input-bold-disabled: var(--token-bg-input-bold-disabled, $ion-primitives-neutral-300); $ion-bg-input-bold-disabled-rgb: var(--token-bg-input-bold-disabled-rgb, 224, 224, 224); $ion-bg-select-default: var(--token-bg-select-default, $ion-semantics-primary-100); -$ion-bg-select-default-rgb: var(--token-bg-select-default-rgb, 242, 244, 253); +$ion-bg-select-default-rgb: var(--token-bg-select-default-rgb, 233, 236, 252); $ion-bg-select-press: var(--token-bg-select-press, $ion-semantics-primary-300); $ion-bg-select-press-rgb: var(--token-bg-select-press-rgb, 208, 215, 250); $ion-bg-extended-pumpkin-base-default: var(--token-bg-extended-pumpkin-base-default, $ion-primitives-pumpkin-700); @@ -667,7 +672,7 @@ $ion-bg-extended-pumpkin-base-default-rgb: var(--token-bg-extended-pumpkin-base- $ion-bg-extended-pumpkin-base-press: var(--token-bg-extended-pumpkin-base-press, $ion-primitives-pumpkin-900); $ion-bg-extended-pumpkin-base-press-rgb: var(--token-bg-extended-pumpkin-base-press-rgb, 128, 48, 4); $ion-bg-extended-pumpkin-subtle-default: var(--token-bg-extended-pumpkin-subtle-default, $ion-primitives-pumpkin-100); -$ion-bg-extended-pumpkin-subtle-default-rgb: var(--token-bg-extended-pumpkin-subtle-default-rgb, 254, 237, 234); +$ion-bg-extended-pumpkin-subtle-default-rgb: var(--token-bg-extended-pumpkin-subtle-default-rgb, 255, 224, 219); $ion-bg-extended-pumpkin-subtle-press: var(--token-bg-extended-pumpkin-subtle-press, $ion-primitives-pumpkin-300); $ion-bg-extended-pumpkin-subtle-press-rgb: var(--token-bg-extended-pumpkin-subtle-press-rgb, 251, 189, 177); $ion-bg-extended-orange-base-default: var(--token-bg-extended-orange-base-default, $ion-primitives-orange-800); @@ -675,7 +680,7 @@ $ion-bg-extended-orange-base-default-rgb: var(--token-bg-extended-orange-base-de $ion-bg-extended-orange-base-press: var(--token-bg-extended-orange-base-press, $ion-primitives-orange-1000); $ion-bg-extended-orange-base-press-rgb: var(--token-bg-extended-orange-base-press-rgb, 99, 58, 0); $ion-bg-extended-orange-subtle-default: var(--token-bg-extended-orange-subtle-default, $ion-primitives-orange-100); -$ion-bg-extended-orange-subtle-default-rgb: var(--token-bg-extended-orange-subtle-default-rgb, 255, 241, 234); +$ion-bg-extended-orange-subtle-default-rgb: var(--token-bg-extended-orange-subtle-default-rgb, 255, 232, 219); $ion-bg-extended-orange-subtle-press: var(--token-bg-extended-orange-subtle-press, $ion-primitives-orange-300); $ion-bg-extended-orange-subtle-press-rgb: var(--token-bg-extended-orange-subtle-press-rgb, 255, 207, 177); $ion-bg-extended-lime-base-default: var(--token-bg-extended-lime-base-default, $ion-primitives-lime-900); @@ -683,7 +688,7 @@ $ion-bg-extended-lime-base-default-rgb: var(--token-bg-extended-lime-base-defaul $ion-bg-extended-lime-base-press: var(--token-bg-extended-lime-base-press, $ion-primitives-lime-1100); $ion-bg-extended-lime-base-press-rgb: var(--token-bg-extended-lime-base-press-rgb, 42, 58, 6); $ion-bg-extended-lime-subtle-default: var(--token-bg-extended-lime-subtle-default, $ion-primitives-lime-100); -$ion-bg-extended-lime-subtle-default-rgb: var(--token-bg-extended-lime-subtle-default-rgb, 243, 250, 234); +$ion-bg-extended-lime-subtle-default-rgb: var(--token-bg-extended-lime-subtle-default-rgb, 235, 252, 212); $ion-bg-extended-lime-subtle-press: var(--token-bg-extended-lime-subtle-press, $ion-primitives-lime-300); $ion-bg-extended-lime-subtle-press-rgb: var(--token-bg-extended-lime-subtle-press-rgb, 211, 239, 178); $ion-bg-extended-teal-base-default: var(--token-bg-extended-teal-base-default, $ion-primitives-teal-800); @@ -691,7 +696,7 @@ $ion-bg-extended-teal-base-default-rgb: var(--token-bg-extended-teal-base-defaul $ion-bg-extended-teal-base-press: var(--token-bg-extended-teal-base-press, $ion-primitives-teal-1000); $ion-bg-extended-teal-base-press-rgb: var(--token-bg-extended-teal-base-press-rgb, 0, 81, 71); $ion-bg-extended-teal-subtle-default: var(--token-bg-extended-teal-subtle-default, $ion-primitives-teal-100); -$ion-bg-extended-teal-subtle-default-rgb: var(--token-bg-extended-teal-subtle-default-rgb, 234, 248, 245); +$ion-bg-extended-teal-subtle-default-rgb: var(--token-bg-extended-teal-subtle-default-rgb, 213, 249, 241); $ion-bg-extended-teal-subtle-press: var(--token-bg-extended-teal-subtle-press, $ion-primitives-teal-300); $ion-bg-extended-teal-subtle-press-rgb: var(--token-bg-extended-teal-subtle-press-rgb, 177, 231, 221); $ion-bg-extended-aqua-base-default: var(--token-bg-extended-aqua-base-default, $ion-primitives-aqua-900); @@ -699,7 +704,7 @@ $ion-bg-extended-aqua-base-default-rgb: var(--token-bg-extended-aqua-base-defaul $ion-bg-extended-aqua-base-press: var(--token-bg-extended-aqua-base-press, $ion-primitives-aqua-1100); $ion-bg-extended-aqua-base-press-rgb: var(--token-bg-extended-aqua-base-press-rgb, 10, 55, 65); $ion-bg-extended-aqua-subtle-default: var(--token-bg-extended-aqua-subtle-default, $ion-primitives-aqua-100); -$ion-bg-extended-aqua-subtle-default-rgb: var(--token-bg-extended-aqua-subtle-default-rgb, 235, 249, 254); +$ion-bg-extended-aqua-subtle-default-rgb: var(--token-bg-extended-aqua-subtle-default-rgb, 217, 245, 255); $ion-bg-extended-aqua-subtle-press: var(--token-bg-extended-aqua-subtle-press, $ion-primitives-aqua-300); $ion-bg-extended-aqua-subtle-press-rgb: var(--token-bg-extended-aqua-subtle-press-rgb, 179, 233, 252); $ion-bg-extended-indigo-base-default: var(--token-bg-extended-indigo-base-default, $ion-primitives-indigo-700); @@ -707,7 +712,7 @@ $ion-bg-extended-indigo-base-default-rgb: var(--token-bg-extended-indigo-base-de $ion-bg-extended-indigo-base-press: var(--token-bg-extended-indigo-base-press, $ion-primitives-indigo-900); $ion-bg-extended-indigo-base-press-rgb: var(--token-bg-extended-indigo-base-press-rgb, 53, 22, 174); $ion-bg-extended-indigo-subtle-default: var(--token-bg-extended-indigo-subtle-default, $ion-primitives-indigo-100); -$ion-bg-extended-indigo-subtle-default-rgb: var(--token-bg-extended-indigo-subtle-default-rgb, 243, 242, 251); +$ion-bg-extended-indigo-subtle-default-rgb: var(--token-bg-extended-indigo-subtle-default-rgb, 235, 232, 255); $ion-bg-extended-indigo-subtle-press: var(--token-bg-extended-indigo-subtle-press, $ion-primitives-indigo-300); $ion-bg-extended-indigo-subtle-press-rgb: var(--token-bg-extended-indigo-subtle-press-rgb, 211, 209, 242); $ion-bg-extended-violet-base-default: var(--token-bg-extended-violet-base-default, $ion-primitives-violet-700); @@ -715,7 +720,7 @@ $ion-bg-extended-violet-base-default-rgb: var(--token-bg-extended-violet-base-de $ion-bg-extended-violet-base-press: var(--token-bg-extended-violet-base-press, $ion-primitives-violet-900); $ion-bg-extended-violet-base-press-rgb: var(--token-bg-extended-violet-base-press-rgb, 101, 26, 197); $ion-bg-extended-violet-subtle-default: var(--token-bg-extended-violet-subtle-default, $ion-primitives-violet-100); -$ion-bg-extended-violet-subtle-default-rgb: var(--token-bg-extended-violet-subtle-default-rgb, 245, 242, 254); +$ion-bg-extended-violet-subtle-default-rgb: var(--token-bg-extended-violet-subtle-default-rgb, 236, 230, 255); $ion-bg-extended-violet-subtle-press: var(--token-bg-extended-violet-subtle-press, $ion-primitives-violet-300); $ion-bg-extended-violet-subtle-press-rgb: var(--token-bg-extended-violet-subtle-press-rgb, 220, 209, 251); $ion-bg-extended-purple-base-default: var(--token-bg-extended-purple-base-default, $ion-primitives-purple-800); @@ -723,7 +728,7 @@ $ion-bg-extended-purple-base-default-rgb: var(--token-bg-extended-purple-base-de $ion-bg-extended-purple-base-press: var(--token-bg-extended-purple-base-press, $ion-primitives-purple-1000); $ion-bg-extended-purple-base-press-rgb: var(--token-bg-extended-purple-base-press-rgb, 129, 42, 170); $ion-bg-extended-purple-subtle-default: var(--token-bg-extended-purple-subtle-default, $ion-primitives-purple-100); -$ion-bg-extended-purple-subtle-default-rgb: var(--token-bg-extended-purple-subtle-default-rgb, 249, 243, 254); +$ion-bg-extended-purple-subtle-default-rgb: var(--token-bg-extended-purple-subtle-default-rgb, 245, 234, 253); $ion-bg-extended-purple-subtle-press: var(--token-bg-extended-purple-subtle-press, $ion-primitives-purple-300); $ion-bg-extended-purple-subtle-press-rgb: var(--token-bg-extended-purple-subtle-press-rgb, 233, 211, 250); $ion-bg-extended-magenta-base-default: var(--token-bg-extended-magenta-base-default, $ion-primitives-magenta-900); @@ -731,7 +736,7 @@ $ion-bg-extended-magenta-base-default-rgb: var(--token-bg-extended-magenta-base- $ion-bg-extended-magenta-base-press: var(--token-bg-extended-magenta-base-press, $ion-primitives-magenta-1100); $ion-bg-extended-magenta-base-press-rgb: var(--token-bg-extended-magenta-base-press-rgb, 137, 43, 122); $ion-bg-extended-magenta-subtle-default: var(--token-bg-extended-magenta-subtle-default, $ion-primitives-magenta-100); -$ion-bg-extended-magenta-subtle-default-rgb: var(--token-bg-extended-magenta-subtle-default-rgb, 253, 243, 251); +$ion-bg-extended-magenta-subtle-default-rgb: var(--token-bg-extended-magenta-subtle-default-rgb, 255, 236, 251); $ion-bg-extended-magenta-subtle-press: var(--token-bg-extended-magenta-subtle-press, $ion-primitives-magenta-300); $ion-bg-extended-magenta-subtle-press-rgb: var(--token-bg-extended-magenta-subtle-press-rgb, 249, 212, 241); $ion-bg-extended-pink-base-default: var(--token-bg-extended-pink-base-default, $ion-primitives-pink-900); @@ -739,57 +744,11 @@ $ion-bg-extended-pink-base-default-rgb: var(--token-bg-extended-pink-base-defaul $ion-bg-extended-pink-base-press: var(--token-bg-extended-pink-base-press, $ion-primitives-pink-1100); $ion-bg-extended-pink-base-press-rgb: var(--token-bg-extended-pink-base-press-rgb, 139, 34, 72); $ion-bg-extended-pink-subtle-default: var(--token-bg-extended-pink-subtle-default, $ion-primitives-pink-100); -$ion-bg-extended-pink-subtle-default-rgb: var(--token-bg-extended-pink-subtle-default-rgb, 254, 243, 245); +$ion-bg-extended-pink-subtle-default-rgb: var(--token-bg-extended-pink-subtle-default-rgb, 253, 234, 238); $ion-bg-extended-pink-subtle-press: var(--token-bg-extended-pink-subtle-press, $ion-primitives-pink-300); $ion-bg-extended-pink-subtle-press-rgb: var(--token-bg-extended-pink-subtle-press-rgb, 250, 211, 220); -$ion-text-default: var(--token-text-default, $ion-primitives-neutral-1200); -$ion-text-default-rgb: var(--token-text-default-rgb, 36, 36, 36); -$ion-text-subtle: var(--token-text-subtle, $ion-primitives-neutral-1000); -$ion-text-subtle-rgb: var(--token-text-subtle-rgb, 59, 59, 59); -$ion-text-subtlest: var(--token-text-subtlest, $ion-primitives-neutral-800); -$ion-text-subtlest-rgb: var(--token-text-subtlest-rgb, 98, 98, 98); -$ion-text-primary: var(--token-text-primary, $ion-semantics-primary-900); -$ion-text-primary-rgb: var(--token-text-primary-rgb, 13, 75, 195); -$ion-text-disabled: var(--token-text-disabled, $ion-primitives-neutral-500); -$ion-text-disabled-rgb: var(--token-text-disabled-rgb, 162, 162, 162); -$ion-text-danger: var(--token-text-danger, $ion-semantics-danger-900); -$ion-text-danger-rgb: var(--token-text-danger-rgb, 153, 27, 27); -$ion-text-info: var(--token-text-info, $ion-semantics-info-900); -$ion-text-info-rgb: var(--token-text-info-rgb, 13, 75, 195); -$ion-text-warning: var(--token-text-warning, $ion-semantics-warning-1000); -$ion-text-warning-rgb: var(--token-text-warning-rgb, 112, 75, 2); -$ion-text-success: var(--token-text-success, $ion-semantics-success-900); -$ion-text-success-rgb: var(--token-text-success-rgb, 18, 111, 35); -$ion-text-link-default: var(--token-text-link-default, $ion-semantics-primary-base); -$ion-text-link-default-rgb: var(--token-text-link-default-rgb, 16, 92, 239); -$ion-text-link-press: var(--token-text-link-press, $ion-semantics-primary-800); -$ion-text-link-press-rgb: var(--token-text-link-press-rgb, 15, 84, 218); -$ion-text-link-visited: var(--token-text-link-visited, $ion-semantics-primary-900); -$ion-text-link-visited-rgb: var(--token-text-link-visited-rgb, 13, 75, 195); -$ion-text-inverse: var(--token-text-inverse, $ion-primitives-base-white); -$ion-text-inverse-rgb: var(--token-text-inverse-rgb, 255, 255, 255); -$ion-text-select: var(--token-text-select, $ion-semantics-primary-800); -$ion-text-select-rgb: var(--token-text-select-rgb, 15, 84, 218); -$ion-text-extended-pumpkin: var(--token-text-extended-pumpkin, $ion-primitives-pumpkin-900); -$ion-text-extended-pumpkin-rgb: var(--token-text-extended-pumpkin-rgb, 128, 48, 4); -$ion-text-extended-orange: var(--token-text-extended-orange, $ion-primitives-orange-900); -$ion-text-extended-orange-rgb: var(--token-text-extended-orange-rgb, 132, 77, 0); -$ion-text-extended-lime: var(--token-text-extended-lime, $ion-primitives-lime-1000); -$ion-text-extended-lime-rgb: var(--token-text-extended-lime-rgb, 62, 87, 9); -$ion-text-extended-teal: var(--token-text-extended-teal, $ion-primitives-teal-900); -$ion-text-extended-teal-rgb: var(--token-text-extended-teal-rgb, 0, 107, 95); -$ion-text-extended-aqua: var(--token-text-extended-aqua, $ion-primitives-aqua-900); -$ion-text-extended-aqua-rgb: var(--token-text-extended-aqua-rgb, 20, 109, 129); -$ion-text-extended-indigo: var(--token-text-extended-indigo, $ion-primitives-indigo-900); -$ion-text-extended-indigo-rgb: var(--token-text-extended-indigo-rgb, 53, 22, 174); -$ion-text-extended-violet: var(--token-text-extended-violet, $ion-primitives-violet-900); -$ion-text-extended-violet-rgb: var(--token-text-extended-violet-rgb, 101, 26, 197); -$ion-text-extended-purple: var(--token-text-extended-purple, $ion-primitives-purple-1000); -$ion-text-extended-purple-rgb: var(--token-text-extended-purple-rgb, 129, 42, 170); -$ion-text-extended-magenta: var(--token-text-extended-magenta, $ion-primitives-magenta-1100); -$ion-text-extended-magenta-rgb: var(--token-text-extended-magenta-rgb, 137, 43, 122); -$ion-text-extended-pink: var(--token-text-extended-pink, $ion-primitives-pink-1000); -$ion-text-extended-pink-rgb: var(--token-text-extended-pink-rgb, 170, 42, 88); + +// Icon $ion-icon-default: var(--token-icon-default, $ion-primitives-neutral-1200); $ion-icon-default-rgb: var(--token-icon-default-rgb, 36, 36, 36); $ion-icon-subtle: var(--token-icon-subtle, $ion-primitives-neutral-1000); @@ -813,11 +772,11 @@ $ion-icon-warning-rgb: var(--token-icon-warning-rgb, 112, 75, 2); $ion-icon-inverse: var(--token-icon-inverse, $ion-primitives-base-white); $ion-icon-inverse-rgb: var(--token-icon-inverse-rgb, 255, 255, 255); $ion-icon-link-default: var(--token-icon-link-default, $ion-text-link-default); -$ion-icon-link-default-rgb: var(--token-icon-link-default-rgb, 16, 92, 239); +$ion-icon-link-default-rgb: var(--token-icon-link-default-rgb, 13, 75, 195); $ion-icon-link-press: var(--token-icon-link-press, $ion-text-link-press); -$ion-icon-link-press-rgb: var(--token-icon-link-press-rgb, 15, 84, 218); +$ion-icon-link-press-rgb: var(--token-icon-link-press-rgb, 9, 53, 138); $ion-icon-link-visited: var(--token-icon-link-visited, $ion-text-link-visited); -$ion-icon-link-visited-rgb: var(--token-icon-link-visited-rgb, 13, 75, 195); +$ion-icon-link-visited-rgb: var(--token-icon-link-visited-rgb, 9, 53, 138); $ion-icon-extended-pumpkin: var(--token-icon-extended-pumpkin, $ion-primitives-pumpkin-900); $ion-icon-extended-pumpkin-rgb: var(--token-icon-extended-pumpkin-rgb, 128, 48, 4); $ion-icon-extended-orange: var(--token-icon-extended-orange, $ion-primitives-orange-900); @@ -838,13 +797,112 @@ $ion-icon-extended-magenta: var(--token-icon-extended-magenta, $ion-primitives-m $ion-icon-extended-magenta-rgb: var(--token-icon-extended-magenta-rgb, 137, 43, 122); $ion-icon-extended-pink: var(--token-icon-extended-pink, $ion-primitives-pink-1000); $ion-icon-extended-pink-rgb: var(--token-icon-extended-pink-rgb, 170, 42, 88); + +// State $ion-state-disabled: var(--token-state-disabled, rgba(255, 255, 255, 0.6)); $ion-state-press: var(--token-state-press, rgba(36, 36, 36, 0.08)); -$ion-elevation-1: var(--token-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07)); -$ion-elevation-2: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08)); -$ion-elevation-3: var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16)); -$ion-elevation-4: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18)); -$ion-backdrop: var(--token-backdrop, [object Object]); + +// Border +$ion-border-default: var(--token-border-default, $ion-primitives-neutral-400); +$ion-border-default-rgb: var(--token-border-default-rgb, 213, 213, 213); +$ion-border-boldest: var(--token-border-boldest, $ion-primitives-neutral-1200); +$ion-border-boldest-rgb: var(--token-border-boldest-rgb, 36, 36, 36); +$ion-border-subtle: var(--token-border-subtle, $ion-primitives-neutral-100); +$ion-border-subtle-rgb: var(--token-border-subtle-rgb, 243, 243, 243); +$ion-border-subtlest: var(--token-border-subtlest, $ion-primitives-base-white); +$ion-border-subtlest-rgb: var(--token-border-subtlest-rgb, 255, 255, 255); +$ion-border-primary: var(--token-border-primary, $ion-semantics-primary-base); +$ion-border-primary-rgb: var(--token-border-primary-rgb, 16, 92, 239); +$ion-border-success: var(--token-border-success, $ion-semantics-success-900); +$ion-border-success-rgb: var(--token-border-success-rgb, 18, 111, 35); +$ion-border-warning: var(--token-border-warning, $ion-semantics-warning-900); +$ion-border-warning-rgb: var(--token-border-warning-rgb, 150, 101, 3); +$ion-border-disabled: var(--token-border-disabled, $ion-primitives-neutral-300); +$ion-border-disabled-rgb: var(--token-border-disabled-rgb, 224, 224, 224); +$ion-border-focus-0: var(--token-border-focus-0, none); +$ion-border-focus-default: var(--token-border-focus-default, $ion-primitives-blue-400); +$ion-border-focus-default-rgb: var(--token-border-focus-default-rgb, 181, 192, 247); +$ion-border-focus-error: var(--token-border-focus-error, $ion-primitives-red-400); +$ion-border-focus-error-rgb: var(--token-border-focus-error-rgb, 250, 161, 161); +$ion-border-danger-default: var(--token-border-danger-default, $ion-semantics-danger-800); +$ion-border-danger-default-rgb: var(--token-border-danger-default-rgb, 191, 34, 34); +$ion-border-danger-press: var(--token-border-danger-press, $ion-semantics-danger-1000); +$ion-border-danger-press-rgb: var(--token-border-danger-press-rgb, 118, 21, 21); +$ion-border-input-default: var(--token-border-input-default, $ion-primitives-neutral-600); +$ion-border-input-default-rgb: var(--token-border-input-default-rgb, 140, 140, 140); +$ion-border-input-press: var(--token-border-input-press, $ion-primitives-neutral-800); +$ion-border-input-press-rgb: var(--token-border-input-press-rgb, 98, 98, 98); +$ion-border-input-read-only: var(--token-border-input-read-only, $ion-primitives-neutral-800); +$ion-border-input-read-only-rgb: var(--token-border-input-read-only-rgb, 98, 98, 98); +$ion-border-style-none: var(--token-border-style-none, none); +$ion-border-style-solid: var(--token-border-style-solid, solid); +$ion-border-style-dashed: var(--token-border-style-dashed, dashed); +$ion-border-style-dotted: var(--token-border-style-dotted, dotted); +$ion-border-size-0: var(--token-border-size-0, $ion-scale-0); +$ion-border-size-025: var(--token-border-size-025, $ion-scale-025); +$ion-border-size-050: var(--token-border-size-050, $ion-scale-050); +$ion-border-size-075: var(--token-border-size-075, $ion-scale-075); +$ion-border-radius-0: var(--token-border-radius-0, $ion-scale-0); +$ion-border-radius-100: var(--token-border-radius-100, $ion-scale-100); +$ion-border-radius-200: var(--token-border-radius-200, $ion-scale-200); +$ion-border-radius-300: var(--token-border-radius-300, $ion-scale-300); +$ion-border-radius-400: var(--token-border-radius-400, $ion-scale-400); +$ion-border-radius-500: var(--token-border-radius-500, $ion-scale-500); +$ion-border-radius-800: var(--token-border-radius-800, $ion-scale-800); +$ion-border-radius-1000: var(--token-border-radius-1000, $ion-scale-1000); +$ion-border-radius-full: var(--token-border-radius-full, 999px); +$ion-border-radius-025: var(--token-border-radius-025, $ion-scale-050); + +// Font +$ion-font-family: var( + --token-font-family, + -apple-system, + system-ui, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol" +); +$ion-font-weight-thin: var(--token-font-weight-thin, 100); +$ion-font-weight-extra-light: var(--token-font-weight-extra-light, 200); +$ion-font-weight-light: var(--token-font-weight-light, 300); +$ion-font-weight-regular: var(--token-font-weight-regular, 400); +$ion-font-weight-medium: var(--token-font-weight-medium, 500); +$ion-font-weight-semi-bold: var(--token-font-weight-semi-bold, 600); +$ion-font-weight-bold: var(--token-font-weight-bold, 700); +$ion-font-weight-extra-bold: var(--token-font-weight-extra-bold, 800); +$ion-font-weight-black: var(--token-font-weight-black, 900); +$ion-font-size-275: var(--token-font-size-275, 11px); +$ion-font-size-300: var(--token-font-size-300, 12px); +$ion-font-size-350: var(--token-font-size-350, 14px); +$ion-font-size-400: var(--token-font-size-400, 16px); +$ion-font-size-450: var(--token-font-size-450, 18px); +$ion-font-size-500: var(--token-font-size-500, 20px); +$ion-font-size-550: var(--token-font-size-550, 22px); +$ion-font-size-600: var(--token-font-size-600, 24px); +$ion-font-size-650: var(--token-font-size-650, 26px); +$ion-font-size-700: var(--token-font-size-700, 28px); +$ion-font-size-800: var(--token-font-size-800, 32px); +$ion-font-size-900: var(--token-font-size-900, 36px); +$ion-font-letter-spacing-0: var(--token-font-letter-spacing-0, 0%); +$ion-font-letter-spacing-1: var(--token-font-letter-spacing-1, 1%); +$ion-font-letter-spacing-2: var(--token-font-letter-spacing-2, 1.5%); +$ion-font-line-height-300: var(--token-font-line-height-300, $ion-scale-300); +$ion-font-line-height-400: var(--token-font-line-height-400, $ion-scale-400); +$ion-font-line-height-500: var(--token-font-line-height-500, $ion-scale-500); +$ion-font-line-height-600: var(--token-font-line-height-600, $ion-scale-600); +$ion-font-line-height-700: var(--token-font-line-height-700, $ion-scale-700); +$ion-font-line-height-800: var(--token-font-line-height-800, $ion-scale-800); +$ion-font-line-height-900: var(--token-font-line-height-900, $ion-scale-900); +$ion-font-line-height-1100: var(--token-font-line-height-1100, $ion-scale-1100); +$ion-font-line-height-1200: var(--token-font-line-height-1200, $ion-scale-1200); +$ion-font-line-height-full: var(--token-font-line-height-full, 100%); + +// Space $ion-space-0: var(--token-space-0, $ion-scale-0); $ion-space-100: var(--token-space-100, $ion-scale-100); $ion-space-150: var(--token-space-150, $ion-scale-150); @@ -860,6 +918,23 @@ $ion-space-900: var(--token-space-900, $ion-scale-900); $ion-space-1000: var(--token-space-1000, $ion-scale-1000); $ion-space-1200: var(--token-space-1200, $ion-scale-1200); $ion-space-050: var(--token-space-050, $ion-scale-050); + +// Shadow +$ion-shadow-1: var(--token-shadow-1, rgba(0, 0, 0, 0.04)); +$ion-shadow-2: var(--token-shadow-2, rgba(0, 0, 0, 0.05)); +$ion-shadow-3: var(--token-shadow-3, rgba(0, 0, 0, 0.07)); +$ion-shadow-4: var(--token-shadow-4, rgba(0, 0, 0, 0.08)); +$ion-shadow-5: var(--token-shadow-5, rgba(0, 0, 0, 0.12)); +$ion-shadow-6: var(--token-shadow-6, rgba(0, 0, 0, 0.16)); +$ion-shadow-7: var(--token-shadow-7, rgba(0, 0, 0, 0.18)); + +// Elevation +$ion-elevation-1: var(--token-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07)); +$ion-elevation-2: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08)); +$ion-elevation-3: var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16)); +$ion-elevation-4: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18)); + +// Transition $ion-transition-curve-linear: var(--token-transition-curve-linear, linear); $ion-transition-curve-quick: var(--token-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1)); $ion-transition-curve-base: var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)); @@ -873,46 +948,8 @@ $ion-transition-time-300: var(--token-transition-time-300, 300ms); $ion-transition-time-500: var(--token-transition-time-500, 500ms); $ion-transition-time-1000: var(--token-transition-time-1000, 1000ms); $ion-transition-time-1500: var(--token-transition-time-1500, 1500ms); -$ion-font-family: var( - --token-font-family, - "-apple-system, system-ui, " Segoe UI ", Roboto, Helvetica, Arial, sans-serif, " Apple Color Emoji ", " Segoe UI Emoji - ", " Segoe UI Symbol "", - sans-serif -); -$ion-font-weight-thin: var(--token-font-weight-thin, 100); -$ion-font-weight-extra-light: var(--token-font-weight-extra-light, 200); -$ion-font-weight-light: var(--token-font-weight-light, 300); -$ion-font-weight-regular: var(--token-font-weight-regular, 400); -$ion-font-weight-medium: var(--token-font-weight-medium, 500); -$ion-font-weight-semi-bold: var(--token-font-weight-semi-bold, 600); -$ion-font-weight-bold: var(--token-font-weight-bold, 700); -$ion-font-weight-extra-bold: var(--token-font-weight-extra-bold, 800); -$ion-font-weight-black: var(--token-font-weight-black, 900); -$ion-font-size-275: var(--token-font-size-275, font.px-to-rem(11)); -$ion-font-size-300: var(--token-font-size-300, font.px-to-rem(12)); -$ion-font-size-350: var(--token-font-size-350, font.px-to-rem(14)); -$ion-font-size-400: var(--token-font-size-400, font.px-to-rem(16)); -$ion-font-size-450: var(--token-font-size-450, font.px-to-rem(18)); -$ion-font-size-500: var(--token-font-size-500, font.px-to-rem(20)); -$ion-font-size-550: var(--token-font-size-550, font.px-to-rem(22)); -$ion-font-size-600: var(--token-font-size-600, font.px-to-rem(24)); -$ion-font-size-650: var(--token-font-size-650, font.px-to-rem(26)); -$ion-font-size-700: var(--token-font-size-700, font.px-to-rem(28)); -$ion-font-size-800: var(--token-font-size-800, font.px-to-rem(32)); -$ion-font-size-900: var(--token-font-size-900, font.px-to-rem(36)); -$ion-font-letter-spacing-0: var(--token-font-letter-spacing-0, 0%); -$ion-font-letter-spacing-1: var(--token-font-letter-spacing-1, 1%); -$ion-font-letter-spacing-2: var(--token-font-letter-spacing-2, 1.5%); -$ion-font-line-height-300: var(--token-font-line-height-300, $ion-scale-300); -$ion-font-line-height-400: var(--token-font-line-height-400, $ion-scale-400); -$ion-font-line-height-500: var(--token-font-line-height-500, $ion-scale-500); -$ion-font-line-height-600: var(--token-font-line-height-600, $ion-scale-600); -$ion-font-line-height-700: var(--token-font-line-height-700, $ion-scale-700); -$ion-font-line-height-800: var(--token-font-line-height-800, $ion-scale-800); -$ion-font-line-height-900: var(--token-font-line-height-900, $ion-scale-900); -$ion-font-line-height-1100: var(--token-font-line-height-1100, $ion-scale-1100); -$ion-font-line-height-1200: var(--token-font-line-height-1200, $ion-scale-1200); -$ion-font-line-height-full: var(--token-font-line-height-full, 100%); + +// Z-index $ion-z-index-0: var(--token-z-index-0, 0); $ion-z-index-100: var(--token-z-index-100, 100); $ion-z-index-200: var(--token-z-index-200, 200); @@ -921,6 +958,8 @@ $ion-z-index-400: var(--token-z-index-400, 400); $ion-z-index-500: var(--token-z-index-500, 500); $ion-z-index-bottom: var(--token-z-index-bottom, -99999); $ion-z-index-top: var(--token-z-index-top, 99999); + +// Rectangular $ion-rectangular-2xs: var(--token-rectangular-2xs, $ion-border-radius-0); $ion-rectangular-xs: var(--token-rectangular-xs, $ion-border-radius-0); $ion-rectangular-sm: var(--token-rectangular-sm, $ion-border-radius-0); @@ -928,6 +967,8 @@ $ion-rectangular-md: var(--token-rectangular-md, $ion-border-radius-0); $ion-rectangular-lg: var(--token-rectangular-lg, $ion-border-radius-0); $ion-rectangular-xl: var(--token-rectangular-xl, $ion-border-radius-0); $ion-rectangular-2xl: var(--token-rectangular-2xl, $ion-border-radius-0); + +// Round $ion-round-2xs: var(--token-round-2xs, $ion-border-radius-full); $ion-round-xs: var(--token-round-xs, $ion-border-radius-full); $ion-round-sm: var(--token-round-sm, $ion-border-radius-full); @@ -935,6 +976,8 @@ $ion-round-md: var(--token-round-md, $ion-border-radius-full); $ion-round-lg: var(--token-round-lg, $ion-border-radius-300); $ion-round-xl: var(--token-round-xl, $ion-border-radius-400); $ion-round-2xl: var(--token-round-2xl, $ion-border-radius-1000); + +// Soft $ion-soft-2xs: var(--token-soft-2xs, $ion-border-radius-100); $ion-soft-xs: var(--token-soft-xs, $ion-border-radius-200); $ion-soft-sm: var(--token-soft-sm, $ion-border-radius-300); @@ -942,13 +985,8 @@ $ion-soft-md: var(--token-soft-md, $ion-border-radius-400); $ion-soft-lg: var(--token-soft-lg, $ion-border-radius-200); $ion-soft-xl: var(--token-soft-xl, $ion-border-radius-200); $ion-soft-2xl: var(--token-soft-2xl, $ion-border-radius-400); -$ion-shadow-1: var(--token-shadow-1, rgba(0, 0, 0, 0.04)); -$ion-shadow-2: var(--token-shadow-2, rgba(0, 0, 0, 0.05)); -$ion-shadow-3: var(--token-shadow-3, rgba(0, 0, 0, 0.07)); -$ion-shadow-4: var(--token-shadow-4, rgba(0, 0, 0, 0.08)); -$ion-shadow-5: var(--token-shadow-5, rgba(0, 0, 0, 0.12)); -$ion-shadow-6: var(--token-shadow-6, rgba(0, 0, 0, 0.16)); -$ion-shadow-7: var(--token-shadow-7, rgba(0, 0, 0, 0.18)); + +// Typography $ion-display-sm-regular: ( font-size: $ion-font-size-800, diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts index d24bddfaa77..682811ed643 100644 --- a/core/src/utils/forms/index.ts +++ b/core/src/utils/forms/index.ts @@ -1,2 +1,3 @@ export * from './notch-controller'; export * from './compare-with-utils'; +export * from './validity'; diff --git a/core/src/utils/forms/validity.ts b/core/src/utils/forms/validity.ts new file mode 100644 index 00000000000..5c2adabe675 --- /dev/null +++ b/core/src/utils/forms/validity.ts @@ -0,0 +1,21 @@ +type FormElement = + | HTMLIonInputElement + | HTMLIonTextareaElement + | HTMLIonSelectElement + | HTMLIonCheckboxElement + | HTMLIonToggleElement + | HTMLElement; + +/** + * Checks if the form element is in an invalid state based on + * Ionic validation classes. + * + * @param el The form element to check. + * @returns `true` if the element is invalid, `false` otherwise. + */ +export const checkInvalidState = (el: FormElement): boolean => { + const hasIonTouched = el.classList.contains('ion-touched'); + const hasIonInvalid = el.classList.contains('ion-invalid'); + + return hasIonTouched && hasIonInvalid; +}; diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts index 57b91cd33a6..7ee403d2e4e 100644 --- a/core/src/utils/test/playwright/page/utils/set-content.ts +++ b/core/src/utils/test/playwright/page/utils/set-content.ts @@ -43,6 +43,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o theme === 'ionic' ? ` + ` : ` @@ -56,6 +57,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o theme === 'ionic' ? ` + ` : ` @@ -126,6 +128,13 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o } }); + /** + * URL query parameters cause the custom Playwright `page.route` + * interceptor to fail, which is necessary to inject the test HTML. + * + * To avoid this, the final navigation URL is kept simple by using + * hash params to ensure the route interceptor always works. + */ await page.goto(`${baseUrl}#`, options); } }; diff --git a/core/src/utils/test/playwright/page/utils/spy-on-event.ts b/core/src/utils/test/playwright/page/utils/spy-on-event.ts index a34f7194027..bc6891dc1cd 100644 --- a/core/src/utils/test/playwright/page/utils/spy-on-event.ts +++ b/core/src/utils/test/playwright/page/utils/spy-on-event.ts @@ -2,6 +2,40 @@ import type { E2EPage } from '../../playwright-declarations'; import { addE2EListener, EventSpy } from '../event-spy'; export const spyOnEvent = async (page: E2EPage, eventName: string): Promise => { + /** + * Tabbing out of the page boundary can lead to unreliable `ionBlur events, + * particularly in Firefox. + * + * This occurs because Playwright may incorrectly maintain focus state on the + * last element, even after a Tab press attempts to shift focus outside the + * viewport. To reliably trigger the necessary blur event, add a visually + * hidden, focusable element at the end of the page to receive focus instead of + * the browser. + * + * Playwright issue reference: + * https://github.com/microsoft/playwright/issues/32269 + */ + if (eventName === 'ionBlur') { + const hiddenInput = await page.$('#hidden-input-for-ion-blur'); + if (!hiddenInput) { + await page.evaluate(() => { + const input = document.createElement('input'); + input.id = 'hidden-input-for-ion-blur'; + input.style.position = 'absolute'; + input.style.opacity = '0'; + input.style.height = '0'; + input.style.width = '0'; + input.style.pointerEvents = 'none'; + document.body.appendChild(input); + + // Clean up the element when the page is unloaded. + window.addEventListener('unload', () => { + input.remove(); + }); + }); + } + } + const spy = new EventSpy(eventName); const handle = await page.evaluateHandle(() => window); diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts index 69789bf862d..e74e7318c82 100644 --- a/core/src/utils/transition/index.ts +++ b/core/src/utils/transition/index.ts @@ -18,34 +18,51 @@ const focusController = createFocusController(); // TODO(FW-2832): types +/** + * Executes the main page transition. + * It also manages the lifecycle of header visibility (if any) + * to prevent visual flickering in iOS. The flickering only + * occurs for a condensed header that is placed above the content. + * + * @param opts Options for the transition. + * @returns A promise that resolves when the transition is complete. + */ export const transition = (opts: TransitionOptions): Promise => { return new Promise((resolve, reject) => { writeTask(() => { - beforeTransition(opts); - runTransition(opts).then( - (result) => { - if (result.animation) { - result.animation.destroy(); + const transitioningInactiveHeader = getIosIonHeader(opts); + beforeTransition(opts, transitioningInactiveHeader); + runTransition(opts) + .then( + (result) => { + if (result.animation) { + result.animation.destroy(); + } + afterTransition(opts); + resolve(result); + }, + (error) => { + afterTransition(opts); + reject(error); } - afterTransition(opts); - resolve(result); - }, - (error) => { - afterTransition(opts); - reject(error); - } - ); + ) + .finally(() => { + // Ensure that the header is restored to its original state. + setHeaderTransitionClass(transitioningInactiveHeader, false); + }); }); }); }; -const beforeTransition = (opts: TransitionOptions) => { +const beforeTransition = (opts: TransitionOptions, transitioningInactiveHeader: HTMLElement | null) => { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; focusController.saveViewFocus(leavingEl); setZIndex(enteringEl, leavingEl, opts.direction); + // Prevent flickering of the header by adding a class. + setHeaderTransitionClass(transitioningInactiveHeader, true); if (opts.showGoBack) { enteringEl.classList.add('can-go-back'); @@ -278,6 +295,40 @@ const setZIndex = ( } }; +/** + * Add a class to ensure that the header (if any) + * does not flicker during the transition. By adding the + * transitioning class, we ensure that the header has + * the necessary styles to prevent the following flickers: + * 1. When entering a page with a condensed header, the + * header should never be visible. However, + * it briefly renders the background color while + * the transition is occurring. + * 2. When leaving a page with a condensed header, the + * header has an opacity of 0 and the pages + * have a z-index which causes the entering page to + * briefly show it's content underneath the leaving page. + * 3. When entering a page or leaving a page with a fade + * header, the header should not have a background color. + * However, it briefly shows the background color while + * the transition is occurring. + * + * @param header The header element to modify. + * @param isTransitioning Whether the transition is occurring. + */ +const setHeaderTransitionClass = (header: HTMLElement | null, isTransitioning: boolean) => { + if (!header) { + return; + } + + const transitionClass = 'header-transitioning'; + if (isTransitioning) { + header.classList.add(transitionClass); + } else { + header.classList.remove(transitionClass); + } +}; + export const getIonPageElement = (element: HTMLElement) => { if (element.classList.contains('ion-page')) { return element; @@ -291,6 +342,32 @@ export const getIonPageElement = (element: HTMLElement) => { return element; }; +/** + * Retrieves the ion-header element from a page based on the + * direction of the transition. + * + * @param opts Options for the transition. + * @returns The ion-header element or null if not found or not in 'ios' mode. + */ +const getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => { + const enteringEl = opts.enteringEl; + const leavingEl = opts.leavingEl; + const direction = opts.direction; + const mode = opts.mode; + + if (mode !== 'ios') { + return null; + } + + const element = direction === 'back' ? leavingEl : enteringEl; + + if (!element) { + return null; + } + + return element.querySelector('ion-header'); +}; + export interface TransitionOptions extends NavOptions { progressCallback?: (ani: Animation | undefined) => void; baseEl: any; diff --git a/lerna.json b/lerna.json index 283bc5a42ef..5134a3baffe 100644 --- a/lerna.json +++ b/lerna.json @@ -3,5 +3,5 @@ "core", "packages/*" ], - "version": "8.7.5" + "version": "8.7.11" } \ No newline at end of file diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 2286ed5513c..55109a07286 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index 58d98508f35..fdddce185b1 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular-server", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/core": "^8.7.5" + "@ionic/core": "^8.7.11" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^16.0.0", @@ -1031,12 +1031,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -1386,9 +1386,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -7306,11 +7306,11 @@ "dev": true }, "@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "requires": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -7529,9 +7529,9 @@ "optional": true }, "@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "requires": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index f17037d02ba..47aafb0182f 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "8.7.5", + "version": "8.7.11", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -62,6 +62,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^8.7.5" + "@ionic/core": "^8.7.11" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 79e9b64e6d3..af9a74674e4 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,60 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + + +### Bug Fixes + +* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2)) + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + + +### Bug Fixes + +* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367)) + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index e840282dae0..2f8f71c7358 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -32,7 +32,7 @@ "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@schematics/angular": "^17.0.0", - "@types/node": "12.12.5", + "@types/node": "20.19.25", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.0", @@ -41,7 +41,7 @@ "ng-packagr": "^16.0.0", "prettier": "^2.4.1", "rxjs": "~7.5.0", - "typescript": "~4.9.3", + "typescript": "~5.0.2", "typescript-eslint-language-service": "^5.0.0", "zone.js": "~0.13.0" }, @@ -1398,12 +1398,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -2308,9 +2308,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -2402,9 +2402,14 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "12.12.5", + "version": "20.19.25", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.25.tgz", + "integrity": "sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==", "dev": true, - "license": "MIT" + "license": "MIT", + "dependencies": { + "undici-types": "~6.21.0" + } }, "node_modules/@types/resolve": { "version": "1.20.2", @@ -8719,16 +8724,17 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz", + "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==", "dev": true, + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=12.20" } }, "node_modules/typescript-eslint-language-service": { @@ -8756,6 +8762,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", + "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", + "dev": true, + "license": "MIT" + }, "node_modules/unique-filename": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz", diff --git a/packages/angular/package.json b/packages/angular/package.json index bfdef31fd6e..6dc90b223c4 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "8.7.5", + "version": "8.7.11", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -48,7 +48,7 @@ } }, "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -78,7 +78,7 @@ "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@schematics/angular": "^17.0.0", - "@types/node": "12.12.5", + "@types/node": "20.19.25", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.0", @@ -87,7 +87,7 @@ "ng-packagr": "^16.0.0", "prettier": "^2.4.1", "rxjs": "~7.5.0", - "typescript": "~4.9.3", + "typescript": "~5.0.2", "typescript-eslint-language-service": "^5.0.0", "zone.js": "~0.13.0" }, diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html index d33aa4ae1e5..870f53872f2 100644 --- a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html +++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.html @@ -77,6 +77,105 @@

MinLength Errors: {{minLengthField.errors | json}}

+ + + + + Option 1 + Option 2 + + + + + + +

Select Touched: {{selectField.touched}}

+

Select Invalid: {{selectField.invalid}}

+

Select Errors: {{selectField.errors | json}}

+ + + + + + + I agree to the terms and conditions + + + + + + +

Checkbox Touched: {{checkboxField.touched}}

+

Checkbox Invalid: {{checkboxField.invalid}}

+

Checkbox Errors: {{checkboxField.errors | json}}

+ + + + + + + Tap to turn on + + + + + + +

Toggle Touched: {{toggleField.touched}}

+

Toggle Invalid: {{toggleField.invalid}}

+

Toggle Errors: {{toggleField.errors | json}}

+ + + + + + + Grapes
+ Strawberries + + + + + + +

Radio Group Touched: {{radioGroupField.touched}}

+

Radio Group Invalid: {{radioGroupField.invalid}}

+

Radio Group Errors: {{radioGroupField.errors | json}}

+ +
diff --git a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.ts b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.ts index 1ecdaa5e5d0..d26e1a6cc4a 100644 --- a/packages/angular/test/base/src/app/lazy/template-form/template-form.component.ts +++ b/packages/angular/test/base/src/app/lazy/template-form/template-form.component.ts @@ -9,6 +9,10 @@ export class TemplateFormComponent { inputValue = ''; textareaValue = ''; minLengthValue = ''; + selectValue = ''; + checkboxValue = false; + toggleValue = false; + radioGroupValue = ''; // Track if form has been submitted submitted = false; diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts index ed9628ae7c9..007743f905f 100644 --- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts +++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts @@ -47,6 +47,10 @@ export const routes: Routes = [ children: [ { path: 'input-validation', loadComponent: () => import('../validation/input-validation/input-validation.component').then(c => c.InputValidationComponent) }, { path: 'textarea-validation', loadComponent: () => import('../validation/textarea-validation/textarea-validation.component').then(c => c.TextareaValidationComponent) }, + { path: 'select-validation', loadComponent: () => import('../validation/select-validation/select-validation.component').then(c => c.SelectValidationComponent) }, + { path: 'checkbox-validation', loadComponent: () => import('../validation/checkbox-validation/checkbox-validation.component').then(c => c.CheckboxValidationComponent) }, + { path: 'toggle-validation', loadComponent: () => import('../validation/toggle-validation/toggle-validation.component').then(c => c.ToggleValidationComponent) }, + { path: 'radio-group-validation', loadComponent: () => import('../validation/radio-group-validation/radio-group-validation.component').then(c => c.RadioGroupValidationComponent) }, { path: '**', redirectTo: 'input-validation' } ] }, diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html index fd6ae409a3b..7ac9c619180 100644 --- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html +++ b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html @@ -121,16 +121,36 @@ Validation Tests + + + Checkbox Validation Test + + Input Validation Test + + + Radio Group Validation Test + + + + + Select Validation Test + + Textarea Validation Test + + + Toggle Validation Test + + diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.html b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.html new file mode 100644 index 00000000000..86a8425e0cb --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.html @@ -0,0 +1,53 @@ + + + Checkbox - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+
+

Required Field

+ + {{ fieldMetadata.terms.label }} + +
+ +
+

Optional Field (No Validation)

+ + {{ fieldMetadata.optional.label }} + +
+
+
+ +
+ Submit Form + Reset Form +
+ diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss new file mode 100644 index 00000000000..d8b2a267e5a --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss @@ -0,0 +1,36 @@ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-row-gap: 50px; + grid-column-gap: 50px; +} + +h2 { + font-size: 12px; + font-weight: normal; + color: var(--ion-color-step-600); + margin-top: 10px; + margin-bottom: 5px; +} + +.validation-info { + margin: 20px; + padding: 10px; + background: var(--ion-color-light); + border-radius: 4px; +} + +.validation-info h2 { + font-size: 14px; + font-weight: 600; + margin-bottom: 10px; +} + +.validation-info ol { + margin: 0; + padding-left: 20px; +} + +.validation-info li { + margin-bottom: 5px; +} diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.ts new file mode 100644 index 00000000000..48bf8a935f1 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.ts @@ -0,0 +1,61 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { + FormBuilder, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { + IonButton, + IonContent, + IonHeader, + IonCheckbox, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-checkbox-validation', + templateUrl: './checkbox-validation.component.html', + styleUrls: ['./checkbox-validation.component.scss'], + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule, + IonCheckbox, + IonButton, + IonHeader, + IonToolbar, + IonTitle, + IonContent + ] +}) +export class CheckboxValidationComponent { + // Field metadata for labels and error messages + fieldMetadata = { + terms: { + label: 'I agree to the terms and conditions', + helperText: "You must agree to continue", + errorText: 'This field is required' + }, + optional: { + label: 'Optional Checkbox', + helperText: 'You can skip this field', + errorText: '' + } + }; + + form = this.fb.group({ + terms: [false, Validators.requiredTrue], + optional: [false] + }); + + constructor(private fb: FormBuilder) {} + + // Submit form + onSubmit(): void { + if (this.form.valid) { + alert('Form submitted successfully!'); + } + } +} diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.html b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.html new file mode 100644 index 00000000000..b7c90ba1ce6 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.html @@ -0,0 +1,57 @@ + + + Radio Group - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+
+

Required Field

+ + {{ fieldMetadata.fruits.firstRadio }}
+ {{ fieldMetadata.fruits.secondRadio }} + +
+ +
+

Optional Field (No Validation)

+ + {{ fieldMetadata.optional.firstRadio }}
+ {{ fieldMetadata.optional.secondRadio }} + +
+
+
+ +
+ Submit Form + Reset Form +
+ diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss new file mode 100644 index 00000000000..add228ccab1 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss @@ -0,0 +1,36 @@ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-row-gap: 20px; + grid-column-gap: 20px; +} + +h2 { + font-size: 12px; + font-weight: normal; + color: var(--ion-color-step-600); + margin-top: 10px; + margin-bottom: 5px; +} + +.validation-info { + margin: 20px; + padding: 10px; + background: var(--ion-color-light); + border-radius: 4px; +} + +.validation-info h2 { + font-size: 14px; + font-weight: 600; + margin-bottom: 10px; +} + +.validation-info ol { + margin: 0; + padding-left: 20px; +} + +.validation-info li { + margin-bottom: 5px; +} diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.ts new file mode 100644 index 00000000000..aa4ee109a50 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.ts @@ -0,0 +1,66 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { + FormBuilder, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { + IonButton, + IonContent, + IonHeader, + IonRadioGroup, + IonRadio, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-radio-group-validation', + templateUrl: './radio-group-validation.component.html', + styleUrls: ['./radio-group-validation.component.scss'], + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule, + IonRadioGroup, + IonRadio, + IonButton, + IonHeader, + IonToolbar, + IonTitle, + IonContent + ] +}) +export class RadioGroupValidationComponent { + // Field metadata for labels and error messages + fieldMetadata = { + fruits: { + helperText: "You must select one to continue", + errorText: 'This field is required', + firstRadio: "Grapes", + secondRadio: "Strawberries" + }, + optional: { + label: 'Optional Radio', + helperText: 'You can skip this field', + errorText: '', + firstRadio: "Option A", + secondRadio: "Option B" + } + }; + + form = this.fb.group({ + fruits: ['', Validators.required], + optional: [''] + }); + + constructor(private fb: FormBuilder) {} + + // Submit form + onSubmit(): void { + if (this.form.valid) { + alert('Form submitted successfully!'); + } + } +} diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.html b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.html new file mode 100644 index 00000000000..15993edc803 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.html @@ -0,0 +1,63 @@ + + + Select - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+
+

Required Field

+ + Apples + Oranges + Pears + +
+ +
+

Optional Field (No Validation)

+ + Red + Blue + Green + +
+
+
+ +
+ Submit Form + Reset Form +
+ diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss new file mode 100644 index 00000000000..add228ccab1 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss @@ -0,0 +1,36 @@ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-row-gap: 20px; + grid-column-gap: 20px; +} + +h2 { + font-size: 12px; + font-weight: normal; + color: var(--ion-color-step-600); + margin-top: 10px; + margin-bottom: 5px; +} + +.validation-info { + margin: 20px; + padding: 10px; + background: var(--ion-color-light); + border-radius: 4px; +} + +.validation-info h2 { + font-size: 14px; + font-weight: 600; + margin-bottom: 10px; +} + +.validation-info ol { + margin: 0; + padding-left: 20px; +} + +.validation-info li { + margin-bottom: 5px; +} diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.ts new file mode 100644 index 00000000000..1ae4a239ef4 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.ts @@ -0,0 +1,63 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { + FormBuilder, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { + IonButton, + IonContent, + IonHeader, + IonSelect, + IonSelectOption, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-select-validation', + templateUrl: './select-validation.component.html', + styleUrls: ['./select-validation.component.scss'], + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule, + IonSelect, + IonSelectOption, + IonButton, + IonHeader, + IonToolbar, + IonTitle, + IonContent + ] +}) +export class SelectValidationComponent { + // Field metadata for labels and error messages + fieldMetadata = { + fruits: { + label: 'Fruits', + helperText: "Select an option", + errorText: 'This field is required' + }, + optional: { + label: 'Colors', + helperText: 'You can skip this field', + errorText: '' + } + }; + + form = this.fb.group({ + fruits: ['', Validators.required], + optional: [''] + }); + + constructor(private fb: FormBuilder) {} + + // Submit form + onSubmit(): void { + if (this.form.valid) { + alert('Form submitted successfully!'); + } + } +} diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.html b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.html new file mode 100644 index 00000000000..1bf6ac67e75 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.html @@ -0,0 +1,54 @@ + + + Toggle - Validation Test + + + + +
+

Screen Reader Testing Instructions:

+
    +
  1. Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)
    2. +
  2. Tab through the form fields
    3. +
  3. When you tab away from an empty required field, the error should be announced immediately
    4. +
  4. The error text should be announced BEFORE the next field is announced
    5. +
  5. Test in Chrome, Safari, and Firefox to verify consistent behavior
    6. +
+
+ +
+
+
+

Required Field

+ + {{ fieldMetadata.on.label }} + +
+ +
+

Optional Field (No Validation)

+ + {{ fieldMetadata.optional.label }} + + +
+
+
+ +
+ Submit Form + Reset Form +
+ diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss new file mode 100644 index 00000000000..add228ccab1 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss @@ -0,0 +1,36 @@ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-row-gap: 20px; + grid-column-gap: 20px; +} + +h2 { + font-size: 12px; + font-weight: normal; + color: var(--ion-color-step-600); + margin-top: 10px; + margin-bottom: 5px; +} + +.validation-info { + margin: 20px; + padding: 10px; + background: var(--ion-color-light); + border-radius: 4px; +} + +.validation-info h2 { + font-size: 14px; + font-weight: 600; + margin-bottom: 10px; +} + +.validation-info ol { + margin: 0; + padding-left: 20px; +} + +.validation-info li { + margin-bottom: 5px; +} diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.ts b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.ts new file mode 100644 index 00000000000..d756ac150be --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.ts @@ -0,0 +1,61 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { + FormBuilder, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { + IonButton, + IonContent, + IonHeader, + IonToggle, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-toggle-validation', + templateUrl: './toggle-validation.component.html', + styleUrls: ['./toggle-validation.component.scss'], + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule, + IonToggle, + IonButton, + IonHeader, + IonToolbar, + IonTitle, + IonContent + ] +}) +export class ToggleValidationComponent { + // Field metadata for labels and error messages + fieldMetadata = { + on: { + label: 'Tap to turn on', + helperText: "You must turn on to continue", + errorText: 'This field is required' + }, + optional: { + label: 'Optional Toggle', + helperText: 'You can skip this field', + errorText: '' + } + }; + + form = this.fb.group({ + on: [false, Validators.requiredTrue], + optional: [false] + }); + + constructor(private fb: FormBuilder) {} + + // Submit form + onSubmit(): void { + if (this.form.valid) { + alert('Form submitted successfully!'); + } + } +} diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md index 942e8829315..63638865fae 100644 --- a/packages/docs/CHANGELOG.md +++ b/packages/docs/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) **Note:** Version bump only for package @ionic/docs diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json index 0ea9a4f7398..3c1391b8cf3 100644 --- a/packages/docs/package-lock.json +++ b/packages/docs/package-lock.json @@ -1,13 +1,13 @@ { "name": "@ionic/docs", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT" } } -} +} \ No newline at end of file diff --git a/packages/docs/package.json b/packages/docs/package.json index 3b1eec2020f..018947033c8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "8.7.5", + "version": "8.7.11", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index dcff3c6e956..dcc56dc20c8 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index b0abc70ecd2..ca60000c58b 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react-router", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/react": "^8.7.5", + "@ionic/react": "^8.7.11", "tslib": "*" }, "devDependencies": { @@ -238,12 +238,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -415,12 +415,12 @@ } }, "node_modules/@ionic/react": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.5.tgz", - "integrity": "sha512-ID1in1YhmjlpLUF1aMv9zSEVc+ZiXs1fNWKJLK4U02LRQoNxmKagwYLxItAuls0KqduCErcqfC5pOcBJDtMl4Q==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz", + "integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==", "license": "MIT", "dependencies": { - "@ionic/core": "8.7.5", + "@ionic/core": "8.7.11", "ionicons": "^8.0.13", "tslib": "*" }, @@ -669,9 +669,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -4175,11 +4175,11 @@ "dev": true }, "@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "requires": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -4281,11 +4281,11 @@ "requires": {} }, "@ionic/react": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.5.tgz", - "integrity": "sha512-ID1in1YhmjlpLUF1aMv9zSEVc+ZiXs1fNWKJLK4U02LRQoNxmKagwYLxItAuls0KqduCErcqfC5pOcBJDtMl4Q==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz", + "integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==", "requires": { - "@ionic/core": "8.7.5", + "@ionic/core": "8.7.11", "ionicons": "^8.0.13", "tslib": "*" } @@ -4422,9 +4422,9 @@ "optional": true }, "@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "requires": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 840cfe017a6..6caca04b3dc 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "8.7.5", + "version": "8.7.11", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -36,7 +36,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^8.7.5", + "@ionic/react": "^8.7.11", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 6c7b05c0a33..d0dfb6d60de 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,57 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/react + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/react + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + + +### Bug Fixes + +* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613) + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/react + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/react + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/react + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 68c8d93aab3..909959cda1b 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "ionicons": "^8.0.13", "tslib": "*" }, @@ -736,12 +736,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -1726,9 +1726,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" diff --git a/packages/react/package.json b/packages/react/package.json index bfb5516c651..f9407abde68 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "8.7.5", + "version": "8.7.11", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -40,7 +40,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "ionicons": "^8.0.13", "tslib": "*" }, diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx index 2f7f4a63ded..634af89f075 100644 --- a/packages/react/test/base/src/App.tsx +++ b/packages/react/test/base/src/App.tsx @@ -37,6 +37,7 @@ import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted' import OverlayComponents from './pages/overlay-components/OverlayComponents'; import OverlayHooks from './pages/overlay-hooks/OverlayHooks'; import ReorderGroup from './pages/ReorderGroup'; +import AccordionGroup from './pages/AccordionGroup'; setupIonicReact(); @@ -69,6 +70,7 @@ const App: React.FC = () => ( + diff --git a/packages/react/test/base/src/pages/AccordionGroup.tsx b/packages/react/test/base/src/pages/AccordionGroup.tsx new file mode 100644 index 00000000000..ffcfaca8bd2 --- /dev/null +++ b/packages/react/test/base/src/pages/AccordionGroup.tsx @@ -0,0 +1,54 @@ +import { IonHeader, IonTitle, IonToolbar, IonPage, IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel } from '@ionic/react'; +import { useEffect, useRef } from 'react'; + +const AccordionGroup: React.FC = () => { + const accordionGroup = useRef(null); + + useEffect(() => { + if (!accordionGroup.current) { + return; + } + + accordionGroup.current.value = ['first', 'third']; + }, []); + + return ( + + + + Accordion Group + + + + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + + + ); +}; + +export default AccordionGroup; diff --git a/packages/react/test/base/src/pages/Main.tsx b/packages/react/test/base/src/pages/Main.tsx index dd87350d9be..3873cd3d5b5 100644 --- a/packages/react/test/base/src/pages/Main.tsx +++ b/packages/react/test/base/src/pages/Main.tsx @@ -22,6 +22,9 @@ const Main: React.FC = () => { + + Accordion Group + Overlay Hooks diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index cf6cdfedb4a..21cc70cb953 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index 5c9e6036d55..fa908748990 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue-router", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/vue": "^8.7.5" + "@ionic/vue": "^8.7.11" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -673,12 +673,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -865,12 +865,12 @@ } }, "node_modules/@ionic/vue": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.5.tgz", - "integrity": "sha512-wx7o+ABDDTWLM47CIjxueoZtKbvMQ9AolqGY4/2JvAJds/JlSs4kOEes/AzQ/1dREEp+4sOapmTtJnyauErY3A==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz", + "integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==", "license": "MIT", "dependencies": { - "@ionic/core": "8.7.5", + "@ionic/core": "8.7.11", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } @@ -1523,9 +1523,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -8041,11 +8041,11 @@ "dev": true }, "@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "requires": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -8156,11 +8156,11 @@ "requires": {} }, "@ionic/vue": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.5.tgz", - "integrity": "sha512-wx7o+ABDDTWLM47CIjxueoZtKbvMQ9AolqGY4/2JvAJds/JlSs4kOEes/AzQ/1dREEp+4sOapmTtJnyauErY3A==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz", + "integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==", "requires": { - "@ionic/core": "8.7.5", + "@ionic/core": "8.7.11", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } @@ -8624,9 +8624,9 @@ } }, "@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "requires": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index ba2858d5e3d..2d7e95b40f6 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "8.7.5", + "version": "8.7.11", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic-framework#readme", "dependencies": { - "@ionic/vue": "^8.7.5" + "@ionic/vue": "^8.7.11" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index d0850bccee8..2d82d381e83 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 29f867b7894..1c127c6af94 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "8.7.5", + "version": "8.7.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "8.7.5", + "version": "8.7.11", "license": "MIT", "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" }, @@ -222,12 +222,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.5.tgz", - "integrity": "sha512-Uk1qdGPoLHaVhd2FnYSAvRehd3VwwcPIfXaR51qiC7C2L5VhD27VyLSgDetc15G4U+VAIFjgUSR/pKdLFEuMPA==", + "version": "8.7.11", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz", + "integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==", "license": "MIT", "dependencies": { - "@stencil/core": "4.36.2", + "@stencil/core": "4.38.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } @@ -674,9 +674,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.36.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", - "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", + "version": "4.38.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz", + "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" diff --git a/packages/vue/package.json b/packages/vue/package.json index d3469d121f5..b10b5b65a00 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "8.7.5", + "version": "8.7.11", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -68,7 +68,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^8.7.5", + "@ionic/core": "^8.7.11", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" }, diff --git a/renovate.json5 b/renovate.json5 index 672f8fc461d..a14bdb1860c 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -8,12 +8,19 @@ groupName: "Download + Upload Artifacts" }, { - matchPackagePatterns: ["@stencil/core", "@stencil/angular-output-target", "@stencil/react-output-target", "@stencil/sass", "@stencil/vue-output-target"], + matchPackagePatterns: ["@stencil/core", "@stencil/sass"], groupName: "stencil", matchFileNames: [ "core/package.json" ] }, + { + matchPackagePatterns: ["@stencil/angular-output-target", "@stencil/react-output-target", "@stencil/vue-output-target"], + groupName: "stencil-output-targets", + matchFileNames: [ + "core/package.json" + ] + }, // TODO(ROU-11172): unpin React output target version { matchPackageNames: ["@stencil/react-output-target"],