### Problem/Motivation Modernise Webtheme so it installs cleanly on Drupal 11.3, looks and behaves exactly as it does today on [webship.co](https://webship.co), and is easier to maintain going forward. No visible change for site visitors. Today: - On a fresh install the theme throws JavaScript errors in the browser console and shows a missing-favicon (404) error. - The theme still depends on jQuery and ships outdated browser code it no longer needs. - Markup is hard to reuse and undocumented, which slows down future design work. - There are no automated tests, so regressions can ship unnoticed. ### Proposed resolution - **Rebuild the markup as reusable components (SDC).** 22 UI pieces (header/branding, menus, breadcrumb, pager, messages, comments, page title, regions, etc.) become self-contained, documented components. The rendered output is unchanged. - **Remove jQuery** in favour of modern, lighter JavaScript. - **Add optional HTMX** for faster, smoother page navigation — *off by default*, enabled with one checkbox in the theme settings when a site wants it. - **Fix the install-time errors** (console errors, favicon 404, missing stylesheet references). - **Add automated functional acceptance testing for Webtheme with webship-js (Playwright + Cucumber-js)** that runs in CI on every change. ### Add automated functional acceptance testing with webship-js (Playwright + Cucumber-js) Introduce a behaviour-driven (BDD) acceptance test suite so every release is verified automatically against a real browser, with a GitLab CI job that runs on every merge request. The suite (38 scenarios / 142 steps) covers: - Login works for each user role (Webmaster, Content editor, Authenticated). - Webtheme is the active default theme on front, login, and admin pages. - Every region declared by the theme is registered and renders. - Core CSS/JS assets load on key pages. - Front, login, and admin pages load with **zero JavaScript console errors**. - The brand-colour setting is applied; the theme settings form works. - Access control: anonymous vs. authenticated vs. admin pages. - Each UI component (SDC) actually renders on the page. - No jQuery is loaded on standard pages. - The HTMX enable / boost toggles behave correctly when switched on and off. Reports (HTML + screenshots + video on failure) are produced as CI artifacts for QA review. ### Impact - **Visitors:** no visible change — same look, same behaviour. - **Editors/admins:** one new optional setting (Appearance → Webtheme settings → "Enable HTMX"). - **Risk:** low. Markup, styles, and behaviour are preserved; changes are covered by the new automated tests. ### Acceptance criteria (QA) 1. Fresh install of Webtheme on Drupal 11.3 → front page loads with **no browser console errors** and **no favicon 404**. 2. Log in and browse admin pages → **no console errors** on any page. 3. Front page, login page, and content pages look identical to the current live site. 4. The theme loads **no jQuery** on standard pages. 5. With HTMX disabled (default): site behaves exactly as today. 6. Enable "HTMX" in theme settings → HTMX loads; enable "Boost links/forms" → internal navigation updates the page without a full reload; no console errors in either mode. 7. Automated webship-js suite passes: **38 scenarios / 142 steps green** in CI. ### Checkpoints - [x] File an issue - [x] Addition for a new supported feature - [x] Testing to ensure no regression - [x] Automated unit testing coverage - [x] Automated functional testing coverage - [x] UX/UI designer responsibilities - [x] Readability - [x] Accessibility - [x] Performance - [x] Security - [x] Documentation - [x] Code review by maintainers - [x] Full testing and approval - [x] Credit contributors - [x] Review with the product owner - [x] Release Notes - [x] Release ### API changes ### Data model changes ### Release notes snippet ```HTML <ul> <li>ci: <a href="https://git.drupalcode.org/project/webtheme/-/work_items/3564777">#3564777</a> modernise to SDC, optional HTMX, remove jQuery, fix install-time errors + add automated functional acceptance testing with webship-js (Playwright + Cucumber-js)</li> </ul> ```