@vardot/varbase-e2e 2.0.0

package/docs/14-recipes-cookbook.md

@@ -0,0 +1,255 @@
+# Recipes Cookbook
+
+20 paste-and-go scenarios covering the most common testing needs. Drop
+them straight into a `.feature` file, swap selectors / text for your
+app, run.
+
+---
+
+## 1. Sign in (happy path)
+
+```gherkin
+Scenario: Sign in with valid credentials
+  Given I am on "/login"
+  When I fill in "Email" with "alice@example.com"
+   And I fill in "Password" with "s3cret"
+   And I press "Sign in"
+  Then I should see "Dashboard"
+```
+
+## 2. Sign in (validation error)
+
+```gherkin
+Scenario: Sign in fails with empty password
+  Given I am on "/login"
+  When I fill in "Email" with "alice@example.com"
+   And I press "Sign in"
+  Then I should see "Password is required"
+   And I should be on "/login"
+```
+
+## 3. Sign up with required fields
+
+```gherkin
+Scenario: Sign up
+  Given I am on "/signup"
+  When I fill in the following:
+    | Name      | Alice              |
+    | Email     | alice@example.com  |
+    | Password  | s3cret             |
+   And I check "I agree to terms"
+   And I press "Create account"
+  Then I should see "Welcome, Alice"
+```
+
+## 4. Search
+
+```gherkin
+Scenario: Find a product by keyword
+  Given I am on the homepage
+  When I fill in "Search" with "laptop"
+   And I press the key "Enter"
+  Then ".product-card" should have a count of 12 within 5 seconds
+   And I should see "Results for \"laptop\""
+```
+
+## 5. Logout
+
+```gherkin
+Scenario: Logout returns to homepage
+  Given I restore the auth state from "tests/auth/admin.json"
+   And I am on "/dashboard"
+  When I click "Sign out"
+  Then I should be on the homepage
+   And I should see "Sign in"
+```
+
+## 6. Add to cart
+
+```gherkin
+Scenario: Add a product to cart
+  Given I am on "/products/laptop-pro"
+  When I press "Add to cart"
+   And I follow "View cart"
+  Then I should see "Laptop Pro" in the "Cart" element
+   And the URL should match "/cart"
+```
+
+## 7. Modal open + close
+
+```gherkin
+Scenario: Open and close the help modal
+  Given I am on the homepage
+  When I click "Help"
+   And I wait for the modal to appear
+  Then I should see "How can we help?" in the modal
+  When I close the modal
+  Then I should not see the modal
+```
+
+## 8. Native confirm dialog
+
+```gherkin
+Scenario: Confirm deletion
+  Given I am on "/admin/users"
+   And I will accept the next dialog
+  When I click "Delete" in the "alice@example.com" row
+  Then the last dialog message should contain "delete"
+   And I should see "User removed"
+```
+
+## 9. Pagination
+
+```gherkin
+Scenario: Navigate to second page of results
+  Given I am on "/blog"
+  When I follow "Next"
+  Then current url should have the "page" parameter with the "2" value
+   And ".post" should have a count of 10
+```
+
+## 10. Sortable table
+
+```gherkin
+Scenario: Sort orders by total descending
+  Given I restore the auth state from "tests/auth/admin.json"
+   And I am on "/admin/orders"
+  When I click "Total"
+   And I click "Total"
+  Then the table "#orders" should be sorted by "Total" in "descending" order
+```
+
+## 11. Form file upload
+
+```gherkin
+Scenario: Upload a profile photo
+  Given I restore the auth state from "tests/auth/customer.json"
+   And I am on "/account"
+  When I attach the file "avatar.png" to "#avatar"
+   And I press "Save"
+  Then I should see "Avatar updated"
+```
+
+## 12. API mock + UI assertion
+
+```gherkin
+Scenario: Dashboard renders mocked user list
+  Given the URL "**/api/users" returns the JSON:
+    """
+    {"users": [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]}
+    """
+  When I am on "/users"
+  Then ".user" should have a count of 2 within 5 seconds
+   And I should see "Alice"
+   And I should see "Bob"
+```
+
+## 13. Block third-party tracking
+
+```gherkin
+Scenario: Page renders without tracking scripts
+  Given the URL "**/google-analytics.com/**" is blocked
+   And I start recording network requests
+  When I am on the homepage
+  Then no request to "**/google-analytics.com/**" should have been made
+```
+
+## 14. Mobile viewport smoke
+
+```gherkin
+Scenario: Mobile menu collapses
+  Given I am on the homepage
+  When I set the viewport to the "mobile" breakpoint
+  Then "<nav .mobile-toggle>" should be visible
+   And "<nav .desktop-menu>" should not be visible
+```
+
+## 15. Accessibility AA gate
+
+```gherkin
+@a11y
+Scenario: Page meets WCAG 2.1 AA
+  Given I am on "/checkout"
+  Then the page should pass an accessibility audit at level "AA"
+   And the page should have a title
+   And user zoom should be allowed
+```
+
+## 16. Keyboard navigation
+
+```gherkin
+Scenario: Tab order is correct on the login form
+  Given I am on "/login"
+   And I focus on the element "body"
+  When I press the key "Tab"
+  Then the focused element should match "#email"
+  When I press the key "Tab"
+  Then the focused element should match "#password"
+  When I press the key "Tab"
+  Then the focused element should match "button[type=submit]"
+```
+
+## 17. SPA navigation without full reload
+
+```gherkin
+Scenario: SPA route changes without full page load
+  Given I am on the homepage
+  When I follow "Pricing"
+   And I wait until the URL contains "/pricing"
+  Then I should see "Plans"
+   And the page should have exactly one h1
+```
+
+## 18. Wait for AJAX-loaded content
+
+```gherkin
+Scenario: Live search returns results
+  Given I am on "/search"
+  When I fill in "Search" with "laptops"
+  Then I wait until at least 1 element matches ".result"
+   And I should see "results"
+```
+
+## 19. JSON-API response check
+
+```gherkin
+Scenario: Health endpoint returns OK
+  When I send a GET request to "/api/health"
+  Then the API response code should be 200
+   And the JSON property "status" should be "ok"
+```
+
+## 20. End-to-end checkout (composite)
+
+```gherkin
+Scenario: Customer completes checkout
+  Given I restore the auth state from "tests/auth/customer.json"
+   And I am on "/products/laptop-pro"
+  When I press "Add to cart"
+   And I follow "Checkout"
+   And I fill in the following:
+     | Card number | 4242 4242 4242 4242 |
+     | Expiry      | 12/30               |
+     | CVV         | 123                 |
+   And I press "Place order"
+   And I wait until the URL contains "/orders/"
+  Then I should see "Order confirmed"
+   And I send a GET request to "/api/orders?latest=1"
+   And the API response code should be 200
+   And the JSON property "orders.0.status" should be "Pending"
+```
+
+---
+
+## How to adapt these
+
+1. Find the scenario closest to your goal.
+2. Swap selectors (`#email`, `.product-card`, …) for your real ones.
+3. Swap text labels (`"Sign in"`, `"Add to cart"`) for your real copy.
+4. Run. Fix any red. Iterate.
+
+If you find yourself rewriting the same setup three times, extract it
+into a `Background:` block. If you find yourself rewriting the same
+selector three times, register it in `tests/selectors/your-app.json`.
+
+That's the entire cookbook.

package/docs/15-tag-conventions.md

@@ -0,0 +1,76 @@
+# Tag Conventions
+
+Tags drive what runs in CI, what gets retried, what's currently broken.
+Keep them consistent across the suite.
+
+## Standard tags
+
+| Tag | Meaning |
+| --- | --- |
+| `@critical` | Must pass on every PR. Smoke set. Run with `--tags "@critical"` first in CI. |
+| `@smoke` | Synonym for `@critical` when feature owners prefer it. Pick one and stick with it. |
+| `@auth` | Touches authentication / sessions. |
+| `@security` | Asserts a Safeguard (CSRF, rate limit, token expiry). |
+| `@a11y` | Accessibility check (axe-core, focus order, ARIA). Run with `--tags "@a11y"` to gate the a11y suite. |
+| `@i18n` | Multi-locale check (Arabic / RTL / French / etc). |
+| `@perf` | Performance budget (page load, request count). |
+| `@flaky` | Known-unstable. CI retries it once via `--retry` + `--retryTagFilter "@flaky"`. **Never** ship long-term `@flaky` — fix the root cause. |
+| `@wip` | Work in progress. CI excludes with `--tags "not @wip"`. |
+| `@desktop` / `@mobile` | Viewport-locked variants. |
+| `@external` | Hits a third-party service. Skip in offline test runs. |
+| `@auth-setup` | One-shot scenarios that produce auth state files. Run manually after credential rotation. |
+
+## How to apply
+
+Tags go on `Feature:` (apply to every scenario) or on a single
+`Scenario:`.
+
+```gherkin
+@auth
+Feature: Sign in
+
+  @critical
+  Scenario: Successful login
+    Given I am on "/login"
+    ...
+
+  @flaky
+  Scenario: Concurrent login from two devices
+    ...
+
+  @wip
+  Scenario: Sign in with Apple
+    ...
+```
+
+## Recommended CI lanes
+
+```bash
+# Smoke gate — every PR.
+npx cucumber-js --tags "@critical and not @wip"
+
+# Full suite — main branch / nightly.
+npx cucumber-js --tags "not @wip and not @auth-setup"
+
+# Accessibility lane.
+npx cucumber-js --tags "@a11y"
+
+# Flaky lane — separate report, allowed to fail without blocking.
+npx cucumber-js --tags "@flaky" --retry 2
+
+# Pre-release security gate.
+npx cucumber-js --tags "@security or @auth"
+```
+
+## Tag hygiene rules
+
+1. **No `@skip`.** If a scenario should not run, fix it or delete it.
+   `@wip` is a temporary excuse, not a bin.
+2. **`@flaky` is a debt marker.** Each `@flaky` should have an open
+   issue. Removing the tag is part of the fix.
+3. **Don't tag what's obvious.** Every scenario in `auth.feature`
+   doesn't need `@auth` — tag the file.
+4. **One source of truth.** Don't invent project-specific synonyms
+   (`@blocker`, `@must-pass`, `@p0`). Pick `@critical` and stick with it.
+5. **Document custom tags.** If your project needs a tag not in this
+   list, add a row to this page.

package/docs/16-ci-cd.md

@@ -0,0 +1,90 @@
+# CI / CD setup
+
+Varbase E2E ships one ready-to-use CI config: **GitHub Actions**. The pattern is
+install Node 20, install Playwright's chromium with its system deps, start the
+fixture server on port 8080, run `npm test`. No build step — `tsx` transpiles
+`.ts` step files on the fly.
+
+| Provider | File | Account needed | Badge |
+| --- | --- | --- | --- |
+| GitHub Actions | `.github/workflows/github-actions.yml` | GitHub | yes |
+
+---
+
+## GitHub Actions
+
+**File**: `.github/workflows/github-actions.yml`.
+
+GitHub's native CI/CD. Free tier: 2,000 minutes per month for private repos,
+**unlimited** for public repos. Linux minutes count 1:1, macOS 10:1, Windows 2:1.
+
+### Setup steps — open account + connect repo
+
+1. **Sign up for GitHub** at <https://github.com/signup>. Free.
+2. **Fork or push the repo**. Workflows under `.github/workflows/` are picked up automatically — no UI step needed.
+3. **Enable Actions** if you forked: `repo → Settings → Actions → General → Allow all actions`. New repos have Actions enabled by default.
+4. **Add secrets** (optional, only if a step needs them): `Settings → Secrets and variables → Actions → New repository secret`. None are required for the shipped workflow.
+
+### Workflow contents
+
+Single job `build` on `ubuntu-latest`:
+
+1. `actions/checkout@v4` — pulls the repo.
+2. `actions/setup-node@v4` — Node 20.x.
+3. `npm install`.
+4. `npx playwright install --with-deps chromium`.
+5. `npm start &` — backgrounds the fixture server.
+6. `sleep 3`.
+7. `npm test`.
+8. `actions/upload-artifact@v4` — the HTML/JSON report and the failure screenshots, on every run.
+
+Triggers: `push`, `pull_request` and `workflow_dispatch`. The `pull_request` trigger is what puts a check on a PR; `workflow_dispatch` lets you start a run from the Actions tab or over the API.
+
+`FORCE_COLOR=1` is set on the job so cucumber-js v10 emits ANSI colours.
+
+### Badge
+
+Already shipped in `README.md`:
+
+```markdown
+[![Github Actions](https://github.com/Vardot/varbase-e2e/actions/workflows/github-actions.yml/badge.svg?branch=2.0.x)](https://github.com/Vardot/varbase-e2e/actions)
+```
+
+The badge follows the workflow file name and branch — no extra setup.
+
+### Reports
+
+The workflow uploads a `cucumber-report` artifact on every run, pass or fail:
+
+```yaml
+- name: Upload the report and screenshots
+  if: always()
+  uses: actions/upload-artifact@v4
+  with:
+    name: cucumber-report
+    path: |
+      tests/reports/cucumber_report.html
+      tests/reports/cucumber_report.json
+      screenshots/
+    if-no-files-found: ignore
+```
+
+### Notes
+
+- **A fork does not run workflows until someone says so.** If this repository is still a fork, GitHub blocks every run until the owner presses "I understand my workflows, go ahead and enable them" once in the Actions tab. There is no API for that button, and enabling Actions in the repository settings does not replace it.
+- The fixture server is a tiny `http-server` static site on port 8080 — no Docker daemon required on the runner.
+- For a per-browser matrix: add `strategy.matrix.browser: [chromium, firefox, webkit]` + `BROWSER: ${{ matrix.browser }}` to the env block, and replace `chromium` in the playwright install line with `${{ matrix.browser }}`.
+
+### Running the suite on another provider
+
+Nothing in Varbase E2E is GitHub-specific. Any runner that can do
+
+```bash
+npm install
+npx playwright install --with-deps chromium
+npm start &
+npm test
+```
+
+on Node 20+ will work — GitLab CI, CircleCI, Jenkins, Azure Pipelines and the
+rest only need that four-line shape translated into their own YAML.

package/docs/README.md

@@ -0,0 +1,125 @@
+# Varbase E2E Documentation
+
+Varbase E2E is a BDD-first browser-automation harness built on Playwright + Cucumber-js. Feature files in plain Gherkin; selectors that survive redesigns; smart waits that never sleep.
+
+**495 built-in steps** across **44 step files**, including the Drupal and Varbase packs. **282 example scenarios / 1,372 step executions** in the bundled suite, all green on chromium.
+
+The full step catalogue — one page per category, generated from the step definitions themselves — is in **[`steps/`](steps/README.md)**.
+
+## Reading order
+
+### Varbase E2E essentials (custom)
+
+| Doc | Topic |
+| --- | --- |
+| [00 Quick start](00-quick-start.md) | 5-minute path for newcomers |
+| [01 Getting started](01-getting-started.md) | Install, project layout, run modes |
+| [02 BBR smart waits](02-bbr-smart-waits.md) | Why we never `sleep N seconds` |
+| [03 Selector registry](03-selector-registry.md) | Named selectors + CMS / framework presets |
+| [04 Step reference](04-step-reference.md) | Every built-in step, by topic (full catalogue: [`steps/`](steps/README.md)) |
+| [05 Web-first assertions](05-web-first-assertions.md) | Auto-retrying matchers |
+| [06 Networking & dialogs](06-network-and-dialogs.md) | Request mocking, alerts, prompts |
+| [07 Auth state](07-auth-state.md) | Save / restore login |
+| [08 Clock mocking](08-clock-mocking.md) | Control time |
+| [09 API testing](09-api-testing.md) | Direct HTTP from BDD |
+| [10 Accessibility](10-accessibility.md) | POUR smoke checks |
+| [11 Debugging](11-debugging.md) | Screenshots, headed, traces, reports |
+| [12 AI agent guide](12-ai-agent-guide.md) | Wisdom + recipes from the Recipes book v1.0.30 (TDD AI / SPDD / Three Amigos / golden rules) |
+| [13 FAQ](13-faq.md) | Common questions for newcomers |
+| [14 Recipes cookbook](14-recipes-cookbook.md) | 20 paste-and-go scenarios |
+| [15 Tag conventions](15-tag-conventions.md) | Standard tags + CI lane patterns |
+| [16 CI / CD setup](16-ci-cd.md) | GitHub Actions setup steps and config notes |
+
+### Reference
+
+| Doc | Topic |
+| --- | --- |
+| [Overview](overview.md) | Varbase E2E v2.0.x at a glance |
+| [Install](install-varbase-e2e.md) | Install Varbase E2E |
+| [Install — DDEV](install-varbase-e2e/ddev-varbase-e2e.md) | DDEV-Varbase-E2E variant |
+| [Global settings](global-settings.md) | `cucumber.js` `worldParameters` reference |
+| [Step definitions](step-definitions.md) | Step-definition hub — what a step is, the rules, where the catalogue lives |
+| [Step catalogue](steps/README.md) | All 495 steps, 44 category pages under `steps/`, generated from the source |
+| [API step definitions](api-step-definitions.md) | REST step definitions |
+| [Advanced screenshots](advanced-screenshots.md) | Per-size, full-page, named (3 sub-pages under `advanced-screenshots/`) |
+| [Advanced selectors](advanced-selectors.md) | Named selector registry, position assertions |
+
+> **Visual regression moved out.** The Diffy step-pack now ships as its own
+> plugin, [`diffy-steps`](https://github.com/webship/diffy-steps) — install it
+> alongside varbase-e2e and add its step-definition path to `cucumber.js`.
+
+## At a glance
+
+```gherkin
+Feature: Smoke
+
+  Background:
+    Given I restore the auth state from "tests/auth/admin.json"
+
+  @javascript
+  Scenario: Dashboard renders without JS errors
+    Given I am on "/dashboard"
+     And I wait until the network is idle
+    Then the page should have a main landmark
+     And "<#user-list>" should have a count of 5 within 5 seconds
+     And "<.notification>" should not be visible
+```
+
+## Source layout
+
+```
+varbase-e2e/
+├── docs/                       <— You are here
+├── tests/
+│   ├── features/               <— Your *.feature files
+│   ├── selectors/              <— CMS / framework JSON presets
+│   └── step-definitions/                  <— Built-in steps (auto-loaded)
+│       ├── varbase-e2e.js                          # World setup, hooks, shared helpers (smartSettle, modal, selectors, date tokens)
+│       ├── a11y.steps.js               (26)   # axe-core audits + WCAG hygiene probes
+│       ├── action.steps.js              (7)   # press / click / follow / attach
+│       ├── api.steps.js                (22)   # REST long form (base URL, headers, query, body, JSON Pointer)
+│       ├── assertion.steps.js          (14)   # see / not see, in row, in element, response, count
+│       ├── auth.steps.js                (3)   # save / restore / clear storageState
+│       ├── clock.steps.js               (7)   # install / advance / pause / set system time
+│       ├── cookie.steps.js             (12)   # cookie exists / equals / contains
+│       ├── debug.steps.js               (2)   # print URL / last response (diagnostic)
+│       ├── dialog.steps.js              (8)   # native alert / confirm / prompt
+│       ├── element.steps.js            (19)   # focus / scroll-to / dispatch / count / position
+│       ├── field.steps.js              (27)   # field state, checkbox, radio, select-list
+│       ├── file-download.steps.js       (8)   # capture + assert filename / mime / path
+│       ├── form.steps.js               (13)   # fill / select / check / uncheck / radio
+│       ├── iframe.steps.js             (10)   # frameLocator switch + scoped click / fill / assert
+│       ├── input.steps.js               (9)   # hover / drag / dbl / right-click / tap / viewport
+│       ├── javascript.steps.js          (4)   # JS error tracker + assertion (warn / fail / off)
+│       ├── keyboard.steps.js            (4)   # single key + combos with alias normalisation
+│       ├── link.steps.js                (9)   # href / title / target / rel
+│       ├── metatag.steps.js             (3)   # description / keywords / OG / Twitter
+│       ├── modal.steps.js               (9)   # HTML modal visibility / content / interactions
+│       ├── navigation.steps.js         (11)   # homepage / paths / history / URL assertions
+│       ├── network.steps.js            (10)   # route stubs / mocks / delays / offline
+│       ├── path.steps.js                (8)   # URL path / query / fragment
+│       ├── response.steps.js            (4)   # response header inspection
+│       ├── responsive.steps.js          (5)   # named breakpoints + explicit viewport
+│       ├── rest.steps.js                (5)   # REST short form
+│       ├── screenshot.steps.js          (6)   # manual + auto-on-failure + per-step capture
+│       ├── scroll.steps.js             (12)   # page + scoped element scroll
+│       ├── selectors.steps.js          (22)   # named CSS / XPath registry + 22 CMS / framework presets
+│       ├── storage.steps.js             (9)   # local / session storage
+│       ├── table.steps.js               (8)   # data-table row / column assertions
+│       ├── video.steps.js               (4)   # start / stop / save webm recording
+│       ├── wait.steps.js               (21)   # every wait phrasing — all BBR-backed
+│       ├── web-first.steps.js          (12)   # auto-retrying matchers (`within N seconds`)
+│       ├── drupal-canvas.steps.js      (12)   # Canvas editor + authoring API
+│       ├── drupal-ckeditor.steps.js     (4)   # CKEditor 5 write / append / command button / Linkit
+│       ├── drupal-core.steps.js        (27)   # Drupal core: session, rows, operations, breadcrumbs, waits
+│       ├── drupal-layout-builder.steps.js (17) # Layout Builder sections + their form controls
+│       ├── drupal-media.steps.js        (4)   # media library open / select / insert
+│       ├── drupal-moderation.steps.js   (3)   # moderation sidebar open + assertions
+│       ├── drupal-paragraphs.steps.js   (1)   # choose a paragraph component
+│       ├── varbase.steps.js            (14)   # Varbase users, tour, theme settings, a11y checker
+│       ├── xml.steps.js                (20)   # XPath equals / contains / count / attr
+│       └── yaml.steps.js               (38)   # multi-doc + types + numerics + JSON Schema + diff
+├── examples/                   <— Static HTML fixtures
+├── cucumber.js                 <— Profiles + worldParameters
+└── playwright.config.ts        <— Browser launch + context options
+```

package/docs/advanced-screenshots/then-i-save-fullscreen-screenshot.md

@@ -0,0 +1,36 @@
+
+# Then I save fullscreen screenshot
+
+## Step Definition
+
+```
+Then (I |we )*save fullscreen screenshot
+```
+
+## Description
+
+"Save a full-page screenshot (entire scrollable area)."
+
+## Examples
+
+**Example #1:**
+```
+Then I save fullscreen screenshot
+```
+
+**Example #2:**
+```
+Then save fullscreen screenshot
+```
+
+**Example #3:**
+```
+Given I am on "/news"
+Then I save fullscreen screenshot
+```
+
+**Example #4:**
+```
+Given we are on homepage
+Then we save fullscreen screenshot
+```

package/docs/advanced-screenshots/then-i-save-width-x-height-screenshot.md

@@ -0,0 +1,34 @@
+
+# Then I save "width" x "height" screenshot
+
+## Description
+Resize the viewport to specified dimensions and capture a screenshot.
+
+## Gherkin Syntax
+```
+Then (I |we )*save (\d+) x (\d+) screenshot
+```
+
+## Examples
+
+**Example #1:**
+```
+Then I save 1440 x 900 screenshot
+```
+
+**Example #2:**
+```
+Then we save 1200 x 800 screenshot
+```
+
+**Example #3:**
+```
+Given I am on "/about-us"
+Then I save 1440 x 900 screenshot
+```
+
+## Parameters
+- First numeric parameter: viewport width (in pixels)
+- Second numeric parameter: viewport height (in pixels)
+
+The step adjusts the browser window to the specified dimensions before capturing the screenshot.

package/docs/advanced-screenshots/when-i-save-screenshot-name-filename.md

@@ -0,0 +1,45 @@
+
+# When I save screenshot with name "filename"
+
+## Description
+Save a screenshot using an explicit filename (tokens supported).
+
+## Gherkin Step Syntax
+```
+When (I |we )*save screenshot with name "([^"]*)"
+```
+
+## Examples
+
+**Example #1:**
+```
+When I save screenshot with name "homepage.png"
+```
+
+**Example #2:**
+```
+When we save screenshot with name "varbase-e2e-home"
+```
+
+**Example #3:**
+```
+When save screenshot with name "un-landing-{datetime}.png"
+```
+
+**Example #4:**
+```
+Given I am on "/news"
+When I save screenshot with name "news-latest.png"
+```
+
+**Example #5:**
+```
+Given I am on "/un.org"
+When I save screenshot with name "un-home.png"
+```
+
+## Key Features
+- Supports explicit filename specification
+- Allows optional "I" or "we" pronouns
+- Supports token substitution (e.g., `{datetime}`)
+- Flexible filename formats (with or without extensions)