Release: merge development into beta

.github/workflows/code-quality.yml

@@ -148,7 +148,15 @@ permissions:
 
 jobs:
   quality:
-    if: (github.event_name != 'pull_request' || github.head_ref != 'development')
+    # The pull_request run of a PR whose head is `development` is skipped
+    # because the `development` push run already decided that commit — EXCEPT
+    # the promotion into `beta`. The shared workflow runs E2E on the promotion
+    # path only (`e2e-promotion-only`), never on a `development` push, so for
+    # `development -> beta` this run is not a duplicate: it is the only run
+    # that executes E2E for the commits being promoted. Without this clause
+    # every `development -> beta` PR (#1080) reported E2E as skipped, while a
+    # hotfix branch into `beta` (#1102) ran all eight shards.
+    if: (github.event_name != 'pull_request' || github.head_ref != 'development' || github.base_ref == 'beta')
     uses: ConductionNL/.github/.github/workflows/quality.yml@main
     with:
       app-name: thematiq

.github/workflows/sync-to-beta.yml

@@ -1,10 +1,53 @@
 name: Sync to Beta
 
+# WEEKLY, NOT PER PUSH. This used to run on every push to `development`, so the
+# `development -> beta` promotion PR was open permanently: the push after a
+# promotion was merged (usually the beta -> development back-sync itself)
+# opened the next one straight away. Since the promotion PR is where E2E runs,
+# a permanently open promotion PR meant the full E2E suite ran on every
+# `development` push after all.
+#
+# Opening it once a week makes the promotion a deliberate weekly event: the
+# PR appears on Friday morning, carries one E2E verdict for the week's work,
+# and closes when it is merged. A PR that is left open still picks up every
+# `development` push (its head IS `development`) and re-runs E2E each time, so
+# merge it — or close it — the same day.
+#
+# Scheduled runs read this file from the DEFAULT branch (`main`), so the
+# schedule takes effect once this change has been promoted to `main`.
 on:
-  push:
-    branches: [development]
+  schedule:
+    # Friday 06:00 UTC: 08:00 Amsterdam in summer time, 07:00 in winter time.
+    - cron: "0 6 * * 5"
+  workflow_dispatch:
 
 jobs:
   sync-to-beta:
     uses: ConductionNL/.github/.github/workflows/sync-to-beta.yml@main
     secrets: inherit
+
+  # A PR opened with `github.token` starts no workflows — GitHub suppresses
+  # events created by that token — so the Friday PR would sit there with no
+  # Code Quality run, and E2E would first run on whatever `development` push
+  # happens to come next. `workflow_dispatch` is the one event that token MAY
+  # trigger, and the shared quality workflow treats a manual run on a branch
+  # with an open PR into `beta` as the promotion path, so it runs E2E.
+  promotion-e2e:
+    needs: sync-to-beta
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      actions: write
+      pull-requests: read
+    steps:
+      - name: Run Code Quality for the open promotion PR
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          PR=$(gh pr list --repo "$GITHUB_REPOSITORY" --base beta --head development --state open --json number --jq '.[0].number // empty')
+          if [ -z "$PR" ]; then
+            echo "No open development -> beta PR, so there is nothing to verify."
+            exit 0
+          fi
+          gh workflow run code-quality.yml --repo "$GITHUB_REPOSITORY" --ref development
+          echo "Started Code Quality on development for #${PR}."

.gitignore

@@ -76,6 +76,7 @@
 !/js/lib/
 !/js/preview-banner.js
 !/js/environment-marker.js
+!/js/header-user.js
 !/js/playground.js
 !/js/playground/
 !/js/ownTokens.js

CHANGELOG.md

@@ -5,6 +5,96 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 ### Added
+- **Zuiddrecht's website measures and type.** The site's columns (1328px page with a 24px gutter,
+  1280px header row and opening band), 17px running text, a 21px lead (Contentpagina; it was 18),
+  semibold buttons (`--nldesign-website-button-font-weight`, read by the public bridge's four
+  button weights, 700 for every other set), the site's own grey `#4A4A4A` (8.86:1 on white) beside
+  the workplace's `#5E6168`, and a light blue ground for a missing picture (`#D9E3EF`).
+
+### Fixed
+- **The blue mark under the menu item on screen is back on the Zuiddrecht site.** #1105 removed
+  `--nldesign-website-nav-current-in-line` and `--nldesign-website-nav-current-color` as unread,
+  because only the portal read them. Every `--nldesign-*` name the portal reads now has a role in
+  `css/public-bridge.css`, and `tests/vitest/portalReaders.spec.js` checks a measured list of them,
+  so the vocabulary test no longer calls such a name unread.
+
+- **The workplace top bar, as an option.** A seventh layout option, `header_style` (`default` or
+  `workplace`), draws the DqKop board's bar with the light layout: no logo and no app name, the
+  search beside the app grid button, an outline bell with a red dot, a divider, and your initials,
+  name and profile role. The name and role reach the bar through initial state and the small
+  script `js/header-user.js`; without it the bar keeps Nextcloud's avatar. Zuiddrecht names it,
+  and puts its brand stripe on the login card only (`brand_stripe_placement: login`). Every other
+  set keeps Nextcloud's bar. The option travels in the configuration bundle.
+- **Zuiddrecht's navigation, measured on the boards (DqZijbalk, AppZijbalk).** The column runs
+  along the window's left edge with a hairline, 20px by 14px of padding and 20px between its
+  blocks: the brand block (a 19px name over a 13px grey line), the 42px primary button, 12px grey
+  captions, 42px entries with a 20px icon and a 15px label, a grey wash under the pointer, red
+  count circles with white 12px figures, the day-close card on the workspace grey at the foot, and
+  40px footer entries with the settings foldout drawn as one of them. Nextcloud's cards take the
+  boards' 12px radius.
+- **The light workplace login fields, as the board draws them.** The label sits above the field,
+  the field is 44px with a 1px edge in the darker border colour (3:1 on white), and the login
+  button is 46px.
+
+### Fixed
+- **The light layout's page no longer runs past the window.** Nextcloud works out the page height
+  once, from its own 50px bar; with the 68px bar the page ended 18px below the window.
+- **The soft selected entry has no leading bar.** Nextcloud 34 draws a 3px bar on the selected
+  entry's edge; the soft style is the wash and the bold label only.
+
+- **Four more layout options, each with a per-theme default.** Where the brand stripe is drawn
+  (`brand_stripe_placement`: both places, the top bar only or the login card only), the
+  navigation width (`navigation_width`, 200 to 480 pixels), the selected navigation entry's style
+  (`navigation_active_style`: Nextcloud's or a soft tint of the accent with a bold label) and the
+  login watermark (`login_watermark`). Each follows the active token set's `layout` block until an
+  administrator chooses, and a set that names none keeps what it had. Zuiddrecht names a 264px
+  navigation and the soft entry. All six layout choices now travel in the configuration bundle
+  (`config.layoutOptions`, bundle version 4), which the first Zuiddrecht change left out.
+- **Zuiddrecht wears the workplace boards.** `css/token-overrides/zuiddrecht.css` now carries the
+  measures of the approved workplace boards (DqTokens, DqZijbalk, DqDashboard, DqZaken, DqZaak) on
+  the Conduction library's own class names, for this set only: a 264px navigation
+  (`--nldesign-nc-navigation-width`), small grey capital captions, a flat soft-red selected entry with
+  a bold label, 28px page titles and a 32px greeting, 18px card titles, the attention card's 13px red
+  kicker over a 20px title, 34px counters over grey labels, 38px pill views with the chosen one in ink,
+  and a quiet 14px table. Every colour goes through a token, so the dark variant follows on its own.
+- **The light workplace draws the standard apps as cards.** While the workplace layout is `light`,
+  `css/workplace-layout.css` draws the dashboard's panels, the Files list, the settings sections and
+  the thematiq panel as cards on the surface (the container radius, a hairline, the cards' shadow
+  colour), with the card title size on the dashboard, a quiet 14px header row on the Files list, and
+  a 44px token set select in the theme picker. No colour literal.
+- **The light workplace draws the login page and the top bar.** While the workplace layout is
+  `light`, `css/workplace-layout.css` now draws Nextcloud's own pages the way the Zuiddrecht boards
+  draw them: the logo above the login card, 56px high, the card 420px wide with a hairline, the
+  container radius, the cards' shadow colour and a 24px title, 44px controls with a 1px edge, a
+  muted footer line without a plate; a 68px top bar with a 40px app grid square and a 44px search
+  pill on the workspace colour. On a guest page the "Back to …" button's label, which the NL Design
+  link rule painted link-blue on blue, reads again. No colour literal: the sheet still suits any set
+  an administrator turns it on for.
+- **The site's page title, lead, notice text and surface are vocabulary.** A set may name
+  `--nldesign-website-page-title-size` and `-line-height`, `--nldesign-website-lead-font-size`,
+  `--nldesign-website-notice-color` and `--nldesign-color-surface` for its portal; only the public
+  bridge reads them, and a set that names none keeps every value it had. Zuiddrecht names them:
+  2.75rem on 1.15, 18px, #1A1A1A and #F4F6F9, every pair computed.
+- **An attention strip apart from the plain notice.** `--nldesign-website-attention-background-color`,
+  `-border-color` and `-color` name the "Let op" strip; Zuiddrecht: #FFF4DE, #E8C77D, #1A1A1A.
+- **Four demo schools in Zuiddrecht.** `wilgenboom` (Basisschool De Wilgenboom, willow green
+  `#2F6B4A` and sun yellow, Lexend), `vaartveld` (Vaartveld College, cobalt `#1F4FD8` and aqua,
+  Red Hat Display over Red Hat Text), `esdoornveen` (Esdoornveen, mbo college, plum `#5B2E91`
+  and maple rose, IBM Plex Sans with IBM Plex Mono for codes) and `warmtepompacademie`
+  (Warmtepompacademie, petrol `#0B6E7A` and ember, Barlow Semi Condensed over Barlow). Each is
+  built the way `zuiddrecht` is: a light workplace on Nextcloud's radius scale, a generated
+  dark variant, four logos and a login watermark. Every text pair reaches AA in the light and
+  in both dark scopes, computed by `tests/vitest/schoolTokenSets.spec.js`.
+- **Lexend, Red Hat Display, Red Hat Text, Barlow, Barlow Semi Condensed, IBM Plex Sans 500 and
+  IBM Plex Mono 400 and 500** join the bundled typefaces, all SIL OFL 1.1, from Fontsource 5.3.0.
+- **A brand stripe may draw a motif of its own.** A set names any background image in
+  `--nldesign-brand-stripe-image` and the stripe draws it instead of the three bands. The four
+  schools draw their motifs this way: the hanging twigs, the canal, the slanted cut and the
+  temperature line.
+- **Website corners and heading faces on a portal.** A set may name the website's own radii in
+  `--nldesign-website-border-radius` and `--nldesign-website-border-radius-large`; only the
+  public bridge reads them, so the workplace keeps 8px and 12px. The bridge also hands
+  `--nldesign-component-heading-font-family` to the website's headings.
 - **Gemeente Zuiddrecht, a demo municipality.** The `zuiddrecht` token set is a light
   workplace: blue `#3669A5` for actions, red `#CC0000` as the accent, a white top bar and
   navigation, a grey workspace with white cards, Nextcloud's own radius scale and a

README.md

@@ -8,7 +8,7 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan
 
 ## Features
 
-- **59 token sets**: Choose from Dutch government design systems, including:
+- **63 token sets**: Choose from Dutch government design systems, including:
   - Rijkshuisstijl (Dutch national government)
   - Gemeente Utrecht
   - Gemeente Amsterdam
@@ -27,13 +27,13 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan
 
 - **No Build Required**: Tokens are pre-compiled CSS and fonts are bundled and self-hosted (no external CDN)
 
-- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 41 organization and example logos, for use across all Nextcloud apps
+- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 57 organization and example logos, for use across all Nextcloud apps
 
 - **Theme-switchable iconography**: The icon pack an app resolves through nldesign travels with the active design system — a French-government (`lasuite`) theme serves the DSFR pack, a Dutch-government theme serves the RVO/OpenGemeenten/Den Haag packs — resolved via `DesignSystemService` and advertised on the public capability (`iconPacks`). See `img/ICONS.md`.
 
 ## Icons
 
-The app includes **2526 icons** across four government icon sets and **41 logos**:
+The app includes **2526 icons** across four government icon sets and **57 logos**:
 
 - RVO, OpenGemeenten, Gemeente Den Haag — **1488 icons** (CC0-1.0 / CC0-1.0 / EUPL-1.2), materialized from `@conduction/nextcloud-vue`
 - DSFR (Système de Design de l'État) — **1038 icons** (**Etalab-2.0**), materialized from `@gouvfr/dsfr`
@@ -55,10 +55,11 @@ Icon and logo filenames are a public API: other apps reference them by name (e.g
    git clone https://github.com/ConductionNL/thematiq.git
    ```
 
-2. Install npm dependencies (for fonts and icons):
+2. Install the npm dependencies and build the fonts, the icons and the playground's
+   code editor (Node.js 20 or later, see [Development](#development)):
    ```bash
    cd thematiq
-   npm install
+   npm ci
    npm run build
    ```
 
@@ -254,16 +255,24 @@ nldesign/
 
 ### Prerequisites
 
-- Node.js 18+
-- npm
+- Node.js 20 or later, with npm, for `npm ci` and `npm run build`
+- Node.js 22.14 or later, or 24, for the test and lint tooling (Vitest, ESLint) —
+  the versions `package.json` declares under `engines`
 
 ### Setup
 
 ```bash
-cd nldesign
-npm install
+cd thematiq
+npm ci
+npm run build
 ```
 
+`npm run build` also bundles the code editor of the playground's "Your components"
+tab into `js/vendor/codeEditor.js` (gitignored). Without that file the tab still
+works, with plain text fields. The
+[developer guide](docs/reference/development.md#the-code-editor-bundle) explains why
+this one file is built.
+
 ### Updating Fonts
 
 The fonts are bundled and self-hosted (committed under `css/systems/nldesign/fonts/`), so no build step and no network access are required at runtime. To refresh them from the npm package:
@@ -386,6 +395,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 5. Test in Nextcloud
 6. Submit PR with documentation
 
+
 ## Authors
 
 - [Conduction](https://conduction.nl)

REUSE.toml

@@ -83,7 +83,10 @@ SPDX-FileCopyrightText = "2022 The Figtree Project Authors (https://github.com/e
 SPDX-License-Identifier = "OFL-1.1"
 
 [[annotations]]
-path = "css/fonts/ibm-plex-mono-*"
+path = [
+    "css/fonts/ibm-plex-mono-*",
+    "css/systems/nldesign/fonts/ibm-plex-mono-*",
+]
 precedence = "override"
 SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)"
 SPDX-License-Identifier = "OFL-1.1"
@@ -134,6 +137,36 @@ precedence = "override"
 SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)"
 SPDX-License-Identifier = "OFL-1.1"
 
+# The typefaces of the four school sets (openspec/changes/school-token-sets).
+[[annotations]]
+path = [
+    "css/fonts/lexend-*",
+    "css/systems/nldesign/fonts/lexend-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)"
+SPDX-License-Identifier = "OFL-1.1"
+
+[[annotations]]
+path = [
+    "css/fonts/red-hat-display-*",
+    "css/systems/nldesign/fonts/red-hat-display-*",
+    "css/fonts/red-hat-text-*",
+    "css/systems/nldesign/fonts/red-hat-text-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)"
+SPDX-License-Identifier = "OFL-1.1"
+
+[[annotations]]
+path = [
+    "css/fonts/barlow-*",
+    "css/systems/nldesign/fonts/barlow-*",
+]
+precedence = "override"
+SPDX-FileCopyrightText = "2017 The Barlow Project Authors (https://github.com/jpt/barlow)"
+SPDX-License-Identifier = "OFL-1.1"
+
 # Intel Clear Sans is Apache-2.0, not OFL, so it travels with
 # LICENSES/Apache-2.0.txt and its own APACHE-2.0.txt beside the binaries.
 [[annotations]]
@@ -163,6 +196,9 @@ SPDX-FileCopyrightText = [
     "2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)",
     "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)",
     "2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)",
+    "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)",
+    "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)",
+    "2017 The Barlow Project Authors (https://github.com/jpt/barlow)",
 ]
 SPDX-License-Identifier = "OFL-1.1"
 
@@ -225,3 +261,31 @@ path = "scripts/sources/denhaag/*.css"
 precedence = "override"
 SPDX-FileCopyrightText = "Gemeente Den Haag"
 SPDX-License-Identifier = "EUPL-1.2"
+
+# The Den Haag token set and the brand files it is generated from. These are
+# COMPOSITE: the palette, the component mapping and the ramp are Den Haag's own
+# values, read off the vendored CSS above, while the role layer around them and
+# the --nldesign-* semantic layer are ours. Both halves are EUPL-1.2, so the
+# licence identifier the blanket entry gives them was already right; the
+# copyright line was not, because it named only us. Two holders, one licence.
+#
+# `precedence = "override"` for the same reason the entry above uses it: these
+# files carry no SPDX header of their own (the CSS is written by
+# scripts/generate-brand-set.mjs and an SPDX comment is not valid JSON), so
+# without this they silently inherit a copyright line that leaves Den Haag out.
+#
+# css/tokens/rotterdam.css has the same shape with no entry of its own. That
+# predates this change and is not fixed here.
+[[annotations]]
+path = [
+    "css/tokens/denhaag.css",
+    "css/tokens/dark/denhaag.css",
+    "scripts/brands/denhaag.json",
+    "scripts/brands/denhaag.components.json",
+]
+precedence = "override"
+SPDX-FileCopyrightText = [
+    "2026 Conduction B.V. <info@conduction.nl>",
+    "Gemeente Den Haag",
+]
+SPDX-License-Identifier = "EUPL-1.2"