diff --git a/.agents/skills/protowiki-update-codex/references/gerrit-patch-trial.md b/.agents/skills/protowiki-update-codex/references/gerrit-patch-trial.md
new file mode 100644
index 0000000..4aca8b5
--- /dev/null
+++ b/.agents/skills/protowiki-update-codex/references/gerrit-patch-trial.md
@@ -0,0 +1,119 @@
+# Testing a Codex Gerrit patch in ProtoWiki
+
+Use this when you want to trial an unmerged `design/codex` change in ProtoWiki
+— locally **and** on the deployed PR preview — without publishing a package.
+
+The approach commits a small, **deterministic diff** under `patches/codex/`
+(no vendored tarballs). All the heavy work (cloning + building Codex) happens on
+your machine; CI only re-formats the published Codex files and re-applies the
+committed diff at install time, with no Codex build step.
+
+The diff covers the change's **full distribution footprint** — every built file
+under `dist/**` plus the root `theme-*` token files that actually differ — not
+just the handful ProtoWiki imports today. That keeps the patched `node_modules`
+self-contained: any current or future import sees the change, and you never have
+to re-run just because you added a new import. Each individual file diff stays
+small (formatting normalizes the minified CSS), so even the complete footprint is
+a manageable set of text diffs rather than committed tarballs.
+
+## Make the patch
+
+```bash
+npm run patch-codex -- https://gerrit.wikimedia.org/r/c/design/codex/+/1288878
+```
+
+This is a "make + apply" command. It:
+
+1. Establishes a pristine baseline: deletes any existing `patches/codex/`,
+   removes the installed Codex packages, and runs `npm install` so
+   `node_modules` holds the real published Codex (the patch's baseline).
+2. Fetches the change: reads Gerrit metadata for the current patchset and
+   fetches the change commit **and its parent** into a local cache checkout.
+3. Builds twice (heavy, local): builds the Codex packages at the **parent**
+   commit (unpatched) and at the **change** commit (patched).
+4. Detects the footprint: the distributed files (`dist/**` + root `theme-*`)
+   that differ between the two builds are exactly what the change touches —
+   auto-detected, not a hardcoded list, so it scales to whatever files a change
+   touches. Package metadata (`package.json` / `README` / `LICENSE`) is excluded.
+5. Builds a tiny per-file diff anchored to the published artifact: it formats the
+   published file, the unpatched build, and the patched build with the committed
+   Prettier config, 3-way merges so only the unpatched→patched change is layered
+   onto the published file, then diffs `format(published)` → merged.
+6. Writes the small patches to `patches/codex/*.patch` plus `manifest.json`
+   (Codex versions, change id, Prettier version, file list).
+7. Applies the patch locally via `scripts/apply-codex-patch.mjs` (the same path
+   CI uses), so local == CI.
+
+Commit `patches/codex/`. Because the deploy / preview workflows run
+`npm ci && npm run build`, the `postinstall` applier reproduces the change in the
+PR preview.
+
+## How it is applied (and why it is small + deterministic)
+
+`scripts/apply-codex-patch.mjs` is wired as `postinstall`, so it runs on every
+`npm install` / `npm ci`. For each file in the manifest it:
+
+- re-formats the freshly installed (published) file with the committed Prettier
+  config — bypassing `.prettierignore`, since the targets live in `node_modules`;
+- applies the committed diff idempotently with `git apply` (it reverse-checks
+  first, so re-running is a no-op).
+
+- **Small per file**: formatting both sides normalizes the minified single-line
+  `codex.style.css` (one ~170 KB line), so each file's diff is proportional to the
+  real change, not the file size. Patching the whole distribution is therefore a
+  few thousand lines of text diff total, not megabytes of tarball.
+- **Deterministic**: the diff is always applied to the **fixed, integrity-locked
+  published artifact** after re-formatting with the **pinned** Prettier (same
+  version via the lockfile, same committed `.prettierrc.json`). Same inputs
+  everywhere → `git apply` always lands. If it ever can't apply cleanly, the
+  applier errors loudly instead of producing a wrong build.
+- **No CI build**: the applier is a fast text pass (format + apply), never a
+  Codex build.
+
+## Reset
+
+```bash
+npm run patch-codex:reset
+```
+
+Deletes `patches/codex/`, removes the installed Codex packages, and reinstalls
+the registry-resolved packages from the `package.json` ranges. Run this before
+merging if the upstream change is not yet released, so the branch does not ship a
+patched Codex to production.
+
+## Why all three packages are considered together
+
+ProtoWiki consumes all three Codex packages directly
+(`@wikimedia/codex`, `@wikimedia/codex-design-tokens`, `@wikimedia/codex-icons`),
+and `@wikimedia/codex` depends on matching icon/token outputs. The footprint
+detection inspects all three, so a change touching any of them is captured in
+lockstep — avoiding mixed-version visual bugs.
+
+## Suggested smoke-test routes
+
+After applying a patch, run `npm run dev` and inspect:
+
+- `/`
+- `/template-homepage`
+- `/template-homepage/suggested-edits`
+- `/example-event-worklist`
+- `/template-article-live`
+- `/example-codex-kitchen-sink`
+
+Focus on light/dark theme and desktop/mobile skin states.
+
+## Notes
+
+- The cache checkout lives under your system temp directory
+  (`$TMPDIR/protowiki-codex-gerrit-cache` on macOS) and is reused across runs.
+- **Regenerate on an upstream bump.** The patch is anchored to a specific
+  published Codex version and Prettier version. If you bump `@wikimedia/codex`
+  (see [`protowiki-update-codex`](../SKILL.md)) or Prettier, re-run
+  `npm run patch-codex -- <url>` to regenerate, then commit the refreshed
+  `patches/codex/`. (Same "regenerate on upstream bump" you'd have with
+  patch-package.)
+- If the Gerrit change gets a new patchset, just re-run `npm run patch-codex`
+  to refresh the diff.
+- Optimized for token/style/CSS-level changes (the common Codex-trial case). A
+  change that significantly alters the bundled JS is still captured, but its
+  formatted diff would be larger.
diff --git a/package-lock.json b/package-lock.json
index 4b9d607..2036a5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
   "name": "protowiki",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "protowiki",
-      "version": "0.1.0",
+      "version": "0.2.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@wikimedia/codex": "^2.6.0",
         "@wikimedia/codex-design-tokens": "^2.6.0",
@@ -18,6 +19,7 @@
         "@types/node": "^22.10.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vue/eslint-config-typescript": "^14.0.0",
+        "diff": "^9.0.0",
         "eslint": "^9.16.0",
         "eslint-plugin-vue": "^10.0.0",
         "postcss": "^8.5.12",
@@ -2255,6 +2257,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/diff": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz",
+      "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
diff --git a/package.json b/package.json
index 71244ba..349e277 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,10 @@
     "type-check": "vue-tsc --noEmit",
     "format": "prettier --write \"src/**/*.{ts,vue,css}\"",
     "lint": "eslint . --ext .ts,.vue",
-    "snapshot:wiki-skins": "bash scripts/snapshot-wiki-skins.sh"
+    "snapshot:wiki-skins": "bash scripts/snapshot-wiki-skins.sh",
+    "postinstall": "node scripts/apply-codex-patch.mjs",
+    "patch-codex": "node scripts/patch-codex.mjs",
+    "patch-codex:reset": "node scripts/patch-codex.mjs --reset"
   },
   "dependencies": {
     "@wikimedia/codex": "^2.6.0",
@@ -24,6 +27,7 @@
     "@types/node": "^22.10.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/eslint-config-typescript": "^14.0.0",
+    "diff": "^9.0.0",
     "eslint": "^9.16.0",
     "eslint-plugin-vue": "^10.0.0",
     "postcss": "^8.5.12",
diff --git a/patches/codex/manifest.json b/patches/codex/manifest.json
new file mode 100644
index 0000000..2514d7c
--- /dev/null
+++ b/patches/codex/manifest.json
@@ -0,0 +1,710 @@
+{
+  "change": "1288878",
+  "patchset": 2,
+  "revision": "6f06d901bc3a78a290ca2de006bf94fee8a25284",
+  "generatedAt": "2026-06-17T11:01:18.975Z",
+  "codexVersions": {
+    "@wikimedia/codex": "2.6.0",
+    "@wikimedia/codex-design-tokens": "2.6.0",
+    "@wikimedia/codex-icons": "2.6.0"
+  },
+  "prettierVersion": "3.8.3",
+  "files": [
+    {
+      "target": "@wikimedia/codex/dist/codex.style-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/codex.style-bidi.css",
+      "patch": "wikimedia__codex__dist__codex.style-bidi.css.patch",
+      "baseSha": "8904c14fad35778e350a0d15d85597bce4f17100a2818e07351c35c0ac8e118c",
+      "patchedSha": "a6ee3905826c21299c920983bee2f5e5d1b36d139af46910cbdaa2ebb3a4ec8c"
+    },
+    {
+      "target": "@wikimedia/codex/dist/codex.style-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/codex.style-rtl.css",
+      "patch": "wikimedia__codex__dist__codex.style-rtl.css.patch",
+      "baseSha": "79ec4aca31509b82b146fd48c7c9edb70c0c7a13d78662e123517a03d85008c3",
+      "patchedSha": "d1750bf7d038455cafbf6514c204a31a4f6ba880f37c7fe26c24a1417678f809"
+    },
+    {
+      "target": "@wikimedia/codex/dist/codex.style.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/codex.style.css",
+      "patch": "wikimedia__codex__dist__codex.style.css.patch",
+      "baseSha": "9b76b0eb1717ee84ad42ba8d5c59085d981d444ebd7696d7bb2658de6206d909",
+      "patchedSha": "ea10b8218cc876b32767eb11238a85ceb957a3be0a44f3cc83e0d65ae9b89467"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxAccordion-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxAccordion-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxAccordion-bidi.css.patch",
+      "baseSha": "d803fd7339951206ac07aef0656e9e4c2c1d0b0cddcfe9ecd3b9283024f96e86",
+      "patchedSha": "b692b2ea44ff59fce6fdc6f6386de03fda3d60e5beb04a529267255b1554ea05"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxAccordion-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxAccordion-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxAccordion-rtl.css.patch",
+      "baseSha": "112c89114caade2afa33913c8fbc6950b5e6c390612c9ba82c5847ba960af7cd",
+      "patchedSha": "0cb3b13fa8d2d33d312bbfbef0982a7f8cfec5924d9bea5084c0d657f14e550b"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxAccordion.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxAccordion.css",
+      "patch": "wikimedia__codex__dist__modules__CdxAccordion.css.patch",
+      "baseSha": "30b133cea95bae082af4d7ec323e625e4e0a1a4cad0e6df842790ddb34a37654",
+      "patchedSha": "d23ef4085da8fb3f41bf839814d88404a5fdf60c619a6681c3f522f407ea583f"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButton-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButton-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButton-bidi.css.patch",
+      "baseSha": "c4586344d5fb0dc6af11209259d7077b62ab2cb8acae0c87c8178e3c4a9e76ac",
+      "patchedSha": "f6916cf15f8dee0f27453fed602fedc7edd7b8ff6f8c84f810c2c7481a24b710"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButton-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButton-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButton-rtl.css.patch",
+      "baseSha": "27d1b9ed6c7edffc48dfe855106653ca19fa5a026df77031b2f7c26c0a4e49a6",
+      "patchedSha": "91785c2890a11ecf427ab17e608f8dde37ad8ab60c0a8992bff03638d5071af0"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButton.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButton.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButton.css.patch",
+      "baseSha": "09ae3dbe1e3a0ab0aeb0a0e73df3e5a95c31b1d39225b7ef3feeac7caa0f5ba3",
+      "patchedSha": "f63b3e2c9bd3c6a0455a07b8bfbb441ccd5c4a52fe59643a227bdb0686dc18f8"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButtonGroup-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButtonGroup-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButtonGroup-bidi.css.patch",
+      "baseSha": "8feea7a6e06f819f1fb9f99d894cd223713738e7c1194807905a3745882d42ed",
+      "patchedSha": "c55df98c87cabacdd1b8e629e2262d5161b0744f3bd8c8578f97df5aa4231f5c"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButtonGroup-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButtonGroup-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButtonGroup-rtl.css.patch",
+      "baseSha": "e12301260e13fe99de0d651b2099b8d8d3bd3ed559a1feb02321feadcbad0662",
+      "patchedSha": "a995753ddf8c082d16211bd19f600a61832164c43c4f95880073a46574eeb02f"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxButtonGroup.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxButtonGroup.css",
+      "patch": "wikimedia__codex__dist__modules__CdxButtonGroup.css.patch",
+      "baseSha": "289e7df75ec354536466e35b55a9f7eccf9928e4ad761fe98a8b23441d4a1c45",
+      "patchedSha": "4c47c397a6ff3d9de2105f99f851d7fa70ee949ba126338b27904f607ee367d9"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCard-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCard-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCard-bidi.css.patch",
+      "baseSha": "965a3c64ec316d43558e03e66c5eafb61f46d7a03da40ed72d3854cd8ae7e626",
+      "patchedSha": "e9cb948869dd6fdd046db3afcf601f4f54d7c8715e3cc39f267e94a749d39aa1"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCard-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCard-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCard-rtl.css.patch",
+      "baseSha": "0e8bb06039549db0353ba6ce383e660c3be5ff37adb1fd899d53c6f6eb08d0f5",
+      "patchedSha": "2670e28f7f5aad045d66cfb395c09c015c9d6037644bc67a2dcceeca707b68bd"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCard.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCard.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCard.css.patch",
+      "baseSha": "87c2bcdb322f4c7a869c7bded656f130feea37f8117d2d8bf1153a6a1d79bd5e",
+      "patchedSha": "2c79ca5e60f6b5539a33a10309b603b9b918795a03173bc5ffaa3354bda8c3e8"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCheckbox-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCheckbox-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCheckbox-bidi.css.patch",
+      "baseSha": "68fd14666239c7f77872f09b474863f140a9265967e5ee3e3f0cb79309823f4a",
+      "patchedSha": "fb1ff37d743e57ae5c890d998796e82cd682e3c263ff14a9e239d5bdb0cb36c2"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCheckbox-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCheckbox-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCheckbox-rtl.css.patch",
+      "baseSha": "5ab6e1effee90b0dbb1380eff524d7061c6c71e4afff3356a74734ef3835c017",
+      "patchedSha": "243ef6785d34576143d8954b1df12e255a3867346fa5b7a2b95d922861bff7fd"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxCheckbox.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxCheckbox.css",
+      "patch": "wikimedia__codex__dist__modules__CdxCheckbox.css.patch",
+      "baseSha": "8bbe0b3fe85ebf91b4bcb06dda962e183d1022ef1399c07e16e6887994fc69b7",
+      "patchedSha": "a2f00db60dc9419fd9705b75685499ec23755bdfd042d38c82893aa5e1783e51"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxChipInput-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxChipInput-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxChipInput-bidi.css.patch",
+      "baseSha": "fc66cd9d85356b0b72903ce529e12e5a261956a303f6a966332c3e75ffc05504",
+      "patchedSha": "ad3434a974837ea4bfc8b808d2899995c270a867dbb1f0da25524dbe6e6332f2"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxChipInput-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxChipInput-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxChipInput-rtl.css.patch",
+      "baseSha": "505ec39ed353514d3957ec7245db6c316a4503bc9cee76ad6350472da84524fd",
+      "patchedSha": "0b0bc9ba8d1e64b9da85a2c2a06f26656dbec6dd076afc85e987b90b8b6f196f"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxChipInput.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxChipInput.css",
+      "patch": "wikimedia__codex__dist__modules__CdxChipInput.css.patch",
+      "baseSha": "c88f2c7cb97665f3a3d5c2943a07b3420baaa147587f57e5992624e24bc230e8",
+      "patchedSha": "889135cd8d7e49c4a2a5448b3cdb79d24ed6c60e3712212ae81c7923cc8a86e7"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxDialog-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxDialog-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxDialog-bidi.css.patch",
+      "baseSha": "c1c83648100a85a8751a21d8a7b2afaa5a9c3411b74407297fadfb3d886f310e",
+      "patchedSha": "79897286c47e9c624230491fe7fb89f99ceda876cc45361a3d5621b9d6df3b30"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxDialog-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxDialog-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxDialog-rtl.css.patch",
+      "baseSha": "478d3560e13c421a757e48232ec44a5fad58646ab0ece355ab2fe4492e2d78fd",
+      "patchedSha": "128ec02cab543898b2a77f4b41a28da6729fe9aaff9bc6abac82b19514531017"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxDialog.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxDialog.css",
+      "patch": "wikimedia__codex__dist__modules__CdxDialog.css.patch",
+      "baseSha": "aba137e09987f760ab633f44bd5fe2c8c099e2689acf708fddfc11e8995af9df",
+      "patchedSha": "cc6aec4a9b3c38f3e18ea83ebb199cc0336ae6efccb7b0d04c5e9324a8d649fe"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxImage-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxImage-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxImage-bidi.css.patch",
+      "baseSha": "b305aa18db29ad7260f186d4fa9add23ecb02b508ff9b5d156fb1030d74aa6b7",
+      "patchedSha": "2fc73fbd15520ef62517faefa692533bf71d4c4b6b432105f3d941633e1457e0"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxImage-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxImage-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxImage-rtl.css.patch",
+      "baseSha": "ce92123f06d7c971379d8110f82679c7a35d96d41568ac1e908a39c726fff6b6",
+      "patchedSha": "8237e3fe3aff9523d6ec5336f91a19bd9fdb8e09b18fd0d3d09eb21aa722f210"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxImage.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxImage.css",
+      "patch": "wikimedia__codex__dist__modules__CdxImage.css.patch",
+      "baseSha": "a9dfd04dc2ce2172a53bee6a6f210e8c0b84f9178ee7f55a55412405ba512114",
+      "patchedSha": "6c6a669d3ed078a5895708ef0c5b1a5315e3da56cae0360120fa5e54d6b6e340"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMenu-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMenu-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMenu-bidi.css.patch",
+      "baseSha": "af87b08e3cbfea183ff06916fc093d6549b60b603395b9e4b7717d87546a5af4",
+      "patchedSha": "80681025def2c3df09229193a5278a06353ed0f7346df899cc00a6ebd54e2382"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMenu-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMenu-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMenu-rtl.css.patch",
+      "baseSha": "0cae371be5132921d2f87bc42e19d260f4e784d9cbc7629a9f109126ed320c0f",
+      "patchedSha": "a7d789dee0400e9427dfe3f0c5a973db623d43d8d66809320aa7571a9b009206"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMenu.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMenu.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMenu.css.patch",
+      "baseSha": "d59543545b0c214ec6facb1f65d46d2f330fd064fc64372b68025a2592559a26",
+      "patchedSha": "c1d9edf6e12edf39c8de644d67356aad77760260082555ee844215a9426295f0"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMessage-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMessage-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMessage-bidi.css.patch",
+      "baseSha": "8e3ef1f66a92352944b06af85adcc04e8715bf3966dccffeb9d6f4cfa7e6faf2",
+      "patchedSha": "2300cc98f3f33e01f97daae1def11bf22c55dc2b9e72a43871354ef4e132b5d0"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMessage-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMessage-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMessage-rtl.css.patch",
+      "baseSha": "81caa67c6d35184f98ee66282e31696a2ad2bc4bcb4765430c2c16f01ba5a46f",
+      "patchedSha": "526553d5f9a0c108f624ecabfcb3eda1876055147e8fe761bb5cdcfb5d5393fc"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxMessage.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxMessage.css",
+      "patch": "wikimedia__codex__dist__modules__CdxMessage.css.patch",
+      "baseSha": "ce40adc2107664b3489202db6398bb1e4238dace33b05b0a3e966a9c3684965d",
+      "patchedSha": "20b2d3b01ee34afce1cd4b2609316c44759182f33b69464a9d12b313ac836be4"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxPopover-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxPopover-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxPopover-bidi.css.patch",
+      "baseSha": "d6ff586ca0b024c61b976329e0537e185a2101bbd6e2e8e1d1fd77878d77e7db",
+      "patchedSha": "b6ca9b7e8dad4e0f48f7e558a52c15cc682f5ee0e9830a3d91dd0c5f0ecd3ed1"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxPopover-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxPopover-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxPopover-rtl.css.patch",
+      "baseSha": "931a470dfd535d2aca03383334979464c3a1b5f3f7d13d2e151583aca0eff532",
+      "patchedSha": "bc025854b0e900df24128d9057b38cf7a8613b136002eb0a1ba1706d8f48ab04"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxPopover.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxPopover.css",
+      "patch": "wikimedia__codex__dist__modules__CdxPopover.css.patch",
+      "baseSha": "b769a9353e48765337bbd19c62ba87735eb9fd87296c3ac3c05e5affa35b9b76",
+      "patchedSha": "f321ec5418dedc44ba81754fb5d84e611d6c92f331536278ce153e9f0ff7af98"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxProgressBar-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxProgressBar-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxProgressBar-bidi.css.patch",
+      "baseSha": "7ff2afa9a25af0f834b6f247a2303b4a1457175617ffcb278a467bc3f678eb15",
+      "patchedSha": "efdb0d8a14fd3b8f6ec1d84976d09add9739489c0460af48c744bb270212c1a8"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxProgressBar-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxProgressBar-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxProgressBar-rtl.css.patch",
+      "baseSha": "f5cbb33d0b0f2bf7d3eb6b9b604684225c4c2559dec4cac413630059f5294734",
+      "patchedSha": "52d97290b898b2d4164e55b6562dcd8ec407f6b89023549359d7fc6a85a86653"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxProgressBar.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxProgressBar.css",
+      "patch": "wikimedia__codex__dist__modules__CdxProgressBar.css.patch",
+      "baseSha": "bf665f0509623a33693cbcdce704ba606b72a04a2a76da4848aff94424cd54a8",
+      "patchedSha": "1e437ae4120a8c9a4dea4fd82c883bf0f15339a9976aebe2598d462c84f0a155"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSearchInput-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSearchInput-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSearchInput-bidi.css.patch",
+      "baseSha": "1101ea58a0cbc68e8e316210275a6e62fc9a88246c4fc4c57b99448c970a2c2a",
+      "patchedSha": "a9a3c48c89928426b527da77d26d68e7f6a46c2599b5c46c88deb4807c2ac720"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSearchInput-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSearchInput-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSearchInput-rtl.css.patch",
+      "baseSha": "29800680e2760590f5ad4c5fa0f747395796259312aabdb2f066fb251b61ea9b",
+      "patchedSha": "7e0128e2c1d75e166ce8482421c8884ab4e2ec18798193fbe7216624188c6871"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSearchInput.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSearchInput.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSearchInput.css.patch",
+      "baseSha": "bddeefd7c8a077ff4cb5ffdf15be7b6bc91faee080c33ce7079d26d008a3ecd9",
+      "patchedSha": "96b3af99e035ab595d5d6d31531d73c99dcc2d6fcd0d560a6f996aadf86a5eaa"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSelect-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSelect-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSelect-bidi.css.patch",
+      "baseSha": "5ef7c1f5dd7164f784d8d4baddaf674ef5daa32a60e07d3fdf4acfc3463068be",
+      "patchedSha": "fd95453c36b902e55d8d584e09f30bb5bea74f71b6393c919f45dd3fe2ddc649"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSelect-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSelect-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSelect-rtl.css.patch",
+      "baseSha": "c3ce6af867b9db63d81d0108fb421a173e0136bb9918882be8c79744651f284b",
+      "patchedSha": "4801c7d542f0dcd58312830251edc29afa79a61399dd16989034ecd3dec1eb8a"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxSelect.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxSelect.css",
+      "patch": "wikimedia__codex__dist__modules__CdxSelect.css.patch",
+      "baseSha": "e52f464ce38827bc8593e3b5cbf136c75bcce82e27f58bf1949e317c97a01504",
+      "patchedSha": "87146ef06b46789ad9008991dae54ab522cd32cb56fdbe34d1d1848033fa9fcd"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTable-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTable-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTable-bidi.css.patch",
+      "baseSha": "f91150afe86c1b6fa15dfc9c3c49f8da4440fe7149bb2385b98c82df2b2feb59",
+      "patchedSha": "68c03f82031e6d0243d987570eff84b67185c0eab887f68b97853f9fe2873d72"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTable-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTable-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTable-rtl.css.patch",
+      "baseSha": "c9b8d575935a958460a5d68250e1fbe1776c10745f1c85b5fe8cdbac1f328b23",
+      "patchedSha": "4d57907008eaca02ff34fc9ad0f3b40363cc6bf797a1936b698351ea7081a44b"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTable.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTable.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTable.css.patch",
+      "baseSha": "4824b8b63c2beee8f636cfa801cfb3349cde8c13921bead839fed066ad6ca580",
+      "patchedSha": "fff3344f0607401791c1660575813fd4f57ef250f7418e8e3b4f426bc72f1c9c"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTabs-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTabs-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTabs-bidi.css.patch",
+      "baseSha": "cf199b3741285ad9a3883b4ff3b95b7eee2f0ced512fcad1fbdd6235ea10d799",
+      "patchedSha": "d6f4eda4e014554ce55e57fb042b362e01cc30db5bdf8a680d8ce6cf67e2a769"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTabs-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTabs-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTabs-rtl.css.patch",
+      "baseSha": "194c226006779a8478b4bd7ce3a2c9e4b30bcfd222b29124390cd9d1b582fe6e",
+      "patchedSha": "2223a7de6a02c4a03df652e9dd4922c2ae16e20c7f0632a518621f0394c6a3df"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTabs.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTabs.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTabs.css.patch",
+      "baseSha": "68b2599b4f116dd77601ff720d9d3538dca3b6f227f4d05bf26fe675a3063b57",
+      "patchedSha": "e8e26c0bac65bbe34490507c328851717e3c3cc543fb3b94285d8356b32b48e5"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextArea-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextArea-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextArea-bidi.css.patch",
+      "baseSha": "0227caf55625be4c072555915d0b4633c297e451fa6cc302959bda91e93ab0bd",
+      "patchedSha": "1c30051451ca70d0cd20096ceab0f17c2d38a907fb699eecb74526660dfecef6"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextArea-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextArea-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextArea-rtl.css.patch",
+      "baseSha": "875ede201929d2fe60d4992facd90b39db7ab700aff1a6d52661ba2acc212746",
+      "patchedSha": "83528a70f7be5a658791ac01bc69af1f725e895560ce2277b63defb954cc1778"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextArea.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextArea.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextArea.css.patch",
+      "baseSha": "c1cc8a438bc49e405732f954e01af8b5fdb67ef1d43a650829ee06460bcbc290",
+      "patchedSha": "58d9e27c96525cc45998a975ec23cb53d078e059aea360b17e948c18709811ee"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextInput-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextInput-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextInput-bidi.css.patch",
+      "baseSha": "08d2b44c633ac4d52c0ca210b8787ba2498167698d9da7720d05c53187c1450c",
+      "patchedSha": "752ca4ebd1e2908a83e61d3f72bb514b1ef725f7e1424d18fc69aa5470f84dcb"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextInput-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextInput-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextInput-rtl.css.patch",
+      "baseSha": "829d4506f5e22b31900cd70c713646cbffa7abd15216c7437379b6f4cc981593",
+      "patchedSha": "86c85fdd55446d375722fedbf66112b6e50f2375ce5a088d7ee99e9c70d8accd"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTextInput.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTextInput.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTextInput.css.patch",
+      "baseSha": "287cfefa9b1cc096d1eb3bf5395645e80f4983058a4a716147185e0c482ccfd5",
+      "patchedSha": "0db9d5c803d38009159d09f1ec56b814a999efe6d3503b10f6c1f5cf28d8edf9"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxThumbnail-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxThumbnail-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxThumbnail-bidi.css.patch",
+      "baseSha": "e7a6d65500857c68d7de0599a8a573c9d01c25116fbbea0f34bc46b7c25784c4",
+      "patchedSha": "f2a2551ecc36fd78f8ebeaae6e0d657fff2713f18ae71d4098ebaa613252d549"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxThumbnail-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxThumbnail-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxThumbnail-rtl.css.patch",
+      "baseSha": "63a1adba4f028d20ca18b5ff0db6ec9e459afdc878ec4e43ae03a7b9c9c639a0",
+      "patchedSha": "89f221e6edb89c44f3d3769c97209d9bfbf40d6ed3cdb886fa27953aaee67482"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxThumbnail.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxThumbnail.css",
+      "patch": "wikimedia__codex__dist__modules__CdxThumbnail.css.patch",
+      "baseSha": "63a1adba4f028d20ca18b5ff0db6ec9e459afdc878ec4e43ae03a7b9c9c639a0",
+      "patchedSha": "89f221e6edb89c44f3d3769c97209d9bfbf40d6ed3cdb886fa27953aaee67482"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButton-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButton-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButton-bidi.css.patch",
+      "baseSha": "5825b15dbf7d93cd51e9d09f8d8def54f2317339d2205589b26f8c0f447696df",
+      "patchedSha": "6a2172ae42c31fe99a688005e792f20e4c613115ff8516e9628abab59ccf4aa6"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButton-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButton-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButton-rtl.css.patch",
+      "baseSha": "a90a8d51c63b0ba159c6c060c585d77b7ea84e42c9860bc635bd0ac5daf97f7e",
+      "patchedSha": "de5b13de82db6f24075a1d30cabfd55fe80515482272e615d4962dbd482962b6"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButton.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButton.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButton.css.patch",
+      "baseSha": "21b48aad5a71da18a481558d5534599290103247bcdf4d21535f5fbc04aee363",
+      "patchedSha": "684f0ddcf13f578bf586b0309867e5b8ce251225cd1d188561d1912241615ed7"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButtonGroup-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButtonGroup-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButtonGroup-bidi.css.patch",
+      "baseSha": "d6a94a53d5ef7c4a81bf9a252a6cba80ca81605482686b0bf48e9579a2d3ceb2",
+      "patchedSha": "19580ba09593ed8fe05ff186560049591bd9d7d2f2fa6e6a69f75c8a26792ab8"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButtonGroup-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButtonGroup-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButtonGroup-rtl.css.patch",
+      "baseSha": "47937ae7c36b3f1e7394642725c777e7a85d879145552fc6759affdcc71db2f8",
+      "patchedSha": "8d28fea9345813872bf497e1d223f0b322f7bc5112c10246ff2ba87b277ea738"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxToggleButtonGroup.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxToggleButtonGroup.css",
+      "patch": "wikimedia__codex__dist__modules__CdxToggleButtonGroup.css.patch",
+      "baseSha": "f7e4496a0453519b91c8f4f2851f52eaa1667963050fbf3139b56ce8337670aa",
+      "patchedSha": "4c064d16b6ceb48110640dc2a63a0942ad51a4a735524b0a94fc13ffd4555709"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTooltip-bidi.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTooltip-bidi.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTooltip-bidi.css.patch",
+      "baseSha": "de977b77b0ad6d48d15629290cd83e4fc0de9477644e5da00a1cf7836054d053",
+      "patchedSha": "ee8197021435b685ed28902ad7d38d31c8626ce5b290ff085cb2718ae02d1d87"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTooltip-rtl.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTooltip-rtl.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTooltip-rtl.css.patch",
+      "baseSha": "e2591b25b50d06ec43a894435b571599536052025b8dc648e2f78b2763d75594",
+      "patchedSha": "cf623f0a170b3d3b14891ef878e84e7ad4c1d71d612660018ae6b3feaba02438"
+    },
+    {
+      "target": "@wikimedia/codex/dist/modules/CdxTooltip.css",
+      "package": "@wikimedia/codex",
+      "rel": "dist/modules/CdxTooltip.css",
+      "patch": "wikimedia__codex__dist__modules__CdxTooltip.css.patch",
+      "baseSha": "e2591b25b50d06ec43a894435b571599536052025b8dc648e2f78b2763d75594",
+      "patchedSha": "cf623f0a170b3d3b14891ef878e84e7ad4c1d71d612660018ae6b3feaba02438"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui-mode-dark.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui-mode-dark.json",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-dark.json.patch",
+      "baseSha": "433af0fba1096d524ef87c05d3e5a5a85b7ce275a6321549e8ab95880126b6e0",
+      "patchedSha": "4eda3ced8dc30d8b8ada10a1c5bfe06339e5b6054b50dfc76db9dcbf9f6b4ba0"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui-mode-large.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui-mode-large.json",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-large.json.patch",
+      "baseSha": "c5119834056aae0532a4f3661a54fdd551fd777093823a5155c9ea822aa72e1a",
+      "patchedSha": "344af5a345c3699db2109fc4eb54cc9cb0cbbe5d9b1a78b6bdc0a768464d6c80"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui-mode-small.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui-mode-small.json",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-small.json.patch",
+      "baseSha": "770cc1cb3654f04cd8d1fc961d95098b397969d3fae0a2355b35bec9b349b202",
+      "patchedSha": "f3c958c6929547c1fa1ebf71ccc023d8241e2c533856e81ee1fa010bdab647bb"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui-mode-x-large.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui-mode-x-large.json",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-x-large.json.patch",
+      "baseSha": "41dd7e62a7b09faee3c5fd2d06b989b11d4d2acb3dfe01b9b82951fe6169bca0",
+      "patchedSha": "7eae6940b1f0dd076cdbb81480522e0ac0bd90fb0e42403825d13b10cdd8ac54"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui.css",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui.css",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.css.patch",
+      "baseSha": "3f5934a1b290ae0408b4ea9c76e42b5d99e200c7f1bf7191024a4b8c73c7cbb1",
+      "patchedSha": "18694255e2d953c118841e0554ec49537be8e2fd9f20da7fe3177f64bf859de4"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui.js",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui.js",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.js.patch",
+      "baseSha": "1a7e259d196ac0f79ee0690d78555828168c682fbc5ae595c9ecf03ae7083301",
+      "patchedSha": "6a84c6debbe3e8a2f98977cf31a4ee9822de9536d5cb4be2868076e215027316"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui.json",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.json.patch",
+      "baseSha": "a34bfa04a6e9321dc88127755dc0cd47f8b33ad43a7090844506e214b5e483b4",
+      "patchedSha": "59ebeb7436370466c0623f2d52a7eb4bd02b91d38b71ce990d3b15ba0a510d4c"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui.less",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui.less",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.less.patch",
+      "baseSha": "b641af174c3f8fa2b99ded6a2444d93a60c4cdd8f06c3471e178c79750146e47",
+      "patchedSha": "f29d1c31863bdb223874333770a6565940c913f880a0d380b2c5cc840abbc044"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/dist/theme-wikimedia-ui.scss",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "dist/theme-wikimedia-ui.scss",
+      "patch": "wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.scss.patch",
+      "baseSha": "4f0b75be3bb18ddda692f80cdb3992726f59a14a3d8e072cae7560c2bdad4bd0",
+      "patchedSha": "0e7af13b75cd9728bba9a8d5ba17217fa6ada92837491c4bf7000a8fde4795c5"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui-mode-dark.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui-mode-dark.json",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-dark.json.patch",
+      "baseSha": "433af0fba1096d524ef87c05d3e5a5a85b7ce275a6321549e8ab95880126b6e0",
+      "patchedSha": "4eda3ced8dc30d8b8ada10a1c5bfe06339e5b6054b50dfc76db9dcbf9f6b4ba0"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui-mode-large.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui-mode-large.json",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-large.json.patch",
+      "baseSha": "c5119834056aae0532a4f3661a54fdd551fd777093823a5155c9ea822aa72e1a",
+      "patchedSha": "344af5a345c3699db2109fc4eb54cc9cb0cbbe5d9b1a78b6bdc0a768464d6c80"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui-mode-small.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui-mode-small.json",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-small.json.patch",
+      "baseSha": "770cc1cb3654f04cd8d1fc961d95098b397969d3fae0a2355b35bec9b349b202",
+      "patchedSha": "f3c958c6929547c1fa1ebf71ccc023d8241e2c533856e81ee1fa010bdab647bb"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui-mode-x-large.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui-mode-x-large.json",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-x-large.json.patch",
+      "baseSha": "41dd7e62a7b09faee3c5fd2d06b989b11d4d2acb3dfe01b9b82951fe6169bca0",
+      "patchedSha": "7eae6940b1f0dd076cdbb81480522e0ac0bd90fb0e42403825d13b10cdd8ac54"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui.css",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui.css",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui.css.patch",
+      "baseSha": "3f5934a1b290ae0408b4ea9c76e42b5d99e200c7f1bf7191024a4b8c73c7cbb1",
+      "patchedSha": "18694255e2d953c118841e0554ec49537be8e2fd9f20da7fe3177f64bf859de4"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui.js",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui.js",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui.js.patch",
+      "baseSha": "1a7e259d196ac0f79ee0690d78555828168c682fbc5ae595c9ecf03ae7083301",
+      "patchedSha": "6a84c6debbe3e8a2f98977cf31a4ee9822de9536d5cb4be2868076e215027316"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui.json",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui.json",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui.json.patch",
+      "baseSha": "a34bfa04a6e9321dc88127755dc0cd47f8b33ad43a7090844506e214b5e483b4",
+      "patchedSha": "59ebeb7436370466c0623f2d52a7eb4bd02b91d38b71ce990d3b15ba0a510d4c"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui.less",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui.less",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui.less.patch",
+      "baseSha": "b641af174c3f8fa2b99ded6a2444d93a60c4cdd8f06c3471e178c79750146e47",
+      "patchedSha": "f29d1c31863bdb223874333770a6565940c913f880a0d380b2c5cc840abbc044"
+    },
+    {
+      "target": "@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss",
+      "package": "@wikimedia/codex-design-tokens",
+      "rel": "theme-wikimedia-ui.scss",
+      "patch": "wikimedia__codex-design-tokens__theme-wikimedia-ui.scss.patch",
+      "baseSha": "4f0b75be3bb18ddda692f80cdb3992726f59a14a3d8e072cae7560c2bdad4bd0",
+      "patchedSha": "0e7af13b75cd9728bba9a8d5ba17217fa6ada92837491c4bf7000a8fde4795c5"
+    }
+  ]
+}
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-dark.json.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-dark.json.patch
new file mode 100644
index 0000000..662751d
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-dark.json.patch
@@ -0,0 +1,48 @@
+Index: dist/theme-wikimedia-ui-mode-dark.json
+===================================================================
+--- dist/theme-wikimedia-ui-mode-dark.json
++++ dist/theme-wikimedia-ui-mode-dark.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-large.json.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-large.json.patch
new file mode 100644
index 0000000..2f0a8c9
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-large.json.patch
@@ -0,0 +1,48 @@
+Index: dist/theme-wikimedia-ui-mode-large.json
+===================================================================
+--- dist/theme-wikimedia-ui-mode-large.json
++++ dist/theme-wikimedia-ui-mode-large.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-small.json.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-small.json.patch
new file mode 100644
index 0000000..f0fd6d8
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-small.json.patch
@@ -0,0 +1,48 @@
+Index: dist/theme-wikimedia-ui-mode-small.json
+===================================================================
+--- dist/theme-wikimedia-ui-mode-small.json
++++ dist/theme-wikimedia-ui-mode-small.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-x-large.json.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-x-large.json.patch
new file mode 100644
index 0000000..52aa884
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui-mode-x-large.json.patch
@@ -0,0 +1,48 @@
+Index: dist/theme-wikimedia-ui-mode-x-large.json
+===================================================================
+--- dist/theme-wikimedia-ui-mode-x-large.json
++++ dist/theme-wikimedia-ui-mode-x-large.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.css.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.css.patch
new file mode 100644
index 0000000..96e8bbf
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.css.patch
@@ -0,0 +1,15 @@
+Index: dist/theme-wikimedia-ui.css
+===================================================================
+--- dist/theme-wikimedia-ui.css
++++ dist/theme-wikimedia-ui.css
+@@ -364,9 +364,9 @@
+   --border-color-option-pink: #b5739e;
+   --border-color-option-maroon: #b57775;
+   --border-color-transparent: transparent;
+   --border-color-divider: #a2a9b1;
+-  --border-radius-base: 2px;
++  --border-radius-base: 4px;
+   --border-radius-sharp: 0;
+   --border-radius-pill: 9999px;
+   --border-radius-circle: 50%; /* Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500 */
+   --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.js.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.js.patch
new file mode 100644
index 0000000..2d76e14
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.js.patch
@@ -0,0 +1,15 @@
+Index: dist/theme-wikimedia-ui.js
+===================================================================
+--- dist/theme-wikimedia-ui.js
++++ dist/theme-wikimedia-ui.js
+@@ -398,9 +398,9 @@
+ export const cdxBorderSubtle = '1px solid #c8ccd1'
+ export const cdxBorderProgressive = '1px solid #36c'
+ export const cdxBorderDestructive = '1px solid #f54739'
+ export const cdxBorderTransparent = '1px solid transparent'
+-export const cdxBorderRadiusBase = '2px'
++export const cdxBorderRadiusBase = '4px'
+ export const cdxBorderRadiusSharp = '0'
+ export const cdxBorderRadiusPill = '9999px'
+ export const cdxBorderRadiusCircle = '50%' // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ export const cdxOutlineBaseFocus = '1px solid transparent' // Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.json.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.json.patch
new file mode 100644
index 0000000..6e44b61
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.json.patch
@@ -0,0 +1,48 @@
+Index: dist/theme-wikimedia-ui.json
+===================================================================
+--- dist/theme-wikimedia-ui.json
++++ dist/theme-wikimedia-ui.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.less.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.less.patch
new file mode 100644
index 0000000..ce0d6fc
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.less.patch
@@ -0,0 +1,15 @@
+Index: dist/theme-wikimedia-ui.less
+===================================================================
+--- dist/theme-wikimedia-ui.less
++++ dist/theme-wikimedia-ui.less
+@@ -426,9 +426,9 @@
+ @border-color-option-pink: var(--border-color-option-pink, #b5739e);
+ @border-color-option-maroon: var(--border-color-option-maroon, #b57775);
+ @border-color-transparent: var(--border-color-transparent, transparent);
+ @border-color-divider: var(--border-color-divider, #a2a9b1);
+-@border-radius-base: 2px;
++@border-radius-base: 4px;
+ @border-radius-sharp: 0;
+ @border-radius-pill: 9999px;
+ @border-radius-circle: 50%; // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ @outline-color-progressive--focus: var(
diff --git a/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.scss.patch b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.scss.patch
new file mode 100644
index 0000000..1cdbeeb
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__dist__theme-wikimedia-ui.scss.patch
@@ -0,0 +1,15 @@
+Index: dist/theme-wikimedia-ui.scss
+===================================================================
+--- dist/theme-wikimedia-ui.scss
++++ dist/theme-wikimedia-ui.scss
+@@ -361,9 +361,9 @@
+ $border-color-option-pink: #b5739e;
+ $border-color-option-maroon: #b57775;
+ $border-color-transparent: transparent;
+ $border-color-divider: #a2a9b1;
+-$border-radius-base: 2px;
++$border-radius-base: 4px;
+ $border-radius-sharp: 0;
+ $border-radius-pill: 9999px;
+ $border-radius-circle: 50%; // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ $outline-color-progressive--focus: #36c; // Use in places where no more customized focus styles are provided, for example on generic `:focus`.
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-dark.json.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-dark.json.patch
new file mode 100644
index 0000000..8d35564
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-dark.json.patch
@@ -0,0 +1,48 @@
+Index: theme-wikimedia-ui-mode-dark.json
+===================================================================
+--- theme-wikimedia-ui-mode-dark.json
++++ theme-wikimedia-ui-mode-dark.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-large.json.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-large.json.patch
new file mode 100644
index 0000000..d514309
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-large.json.patch
@@ -0,0 +1,48 @@
+Index: theme-wikimedia-ui-mode-large.json
+===================================================================
+--- theme-wikimedia-ui-mode-large.json
++++ theme-wikimedia-ui-mode-large.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-small.json.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-small.json.patch
new file mode 100644
index 0000000..9dde599
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-small.json.patch
@@ -0,0 +1,48 @@
+Index: theme-wikimedia-ui-mode-small.json
+===================================================================
+--- theme-wikimedia-ui-mode-small.json
++++ theme-wikimedia-ui-mode-small.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-x-large.json.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-x-large.json.patch
new file mode 100644
index 0000000..7fdafbe
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui-mode-x-large.json.patch
@@ -0,0 +1,48 @@
+Index: theme-wikimedia-ui-mode-x-large.json
+===================================================================
+--- theme-wikimedia-ui-mode-x-large.json
++++ theme-wikimedia-ui-mode-x-large.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.css.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.css.patch
new file mode 100644
index 0000000..6dfeb67
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.css.patch
@@ -0,0 +1,15 @@
+Index: theme-wikimedia-ui.css
+===================================================================
+--- theme-wikimedia-ui.css
++++ theme-wikimedia-ui.css
+@@ -364,9 +364,9 @@
+   --border-color-option-pink: #b5739e;
+   --border-color-option-maroon: #b57775;
+   --border-color-transparent: transparent;
+   --border-color-divider: #a2a9b1;
+-  --border-radius-base: 2px;
++  --border-radius-base: 4px;
+   --border-radius-sharp: 0;
+   --border-radius-pill: 9999px;
+   --border-radius-circle: 50%; /* Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500 */
+   --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.js.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.js.patch
new file mode 100644
index 0000000..8ff4466
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.js.patch
@@ -0,0 +1,15 @@
+Index: theme-wikimedia-ui.js
+===================================================================
+--- theme-wikimedia-ui.js
++++ theme-wikimedia-ui.js
+@@ -398,9 +398,9 @@
+ export const cdxBorderSubtle = '1px solid #c8ccd1'
+ export const cdxBorderProgressive = '1px solid #36c'
+ export const cdxBorderDestructive = '1px solid #f54739'
+ export const cdxBorderTransparent = '1px solid transparent'
+-export const cdxBorderRadiusBase = '2px'
++export const cdxBorderRadiusBase = '4px'
+ export const cdxBorderRadiusSharp = '0'
+ export const cdxBorderRadiusPill = '9999px'
+ export const cdxBorderRadiusCircle = '50%' // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ export const cdxOutlineBaseFocus = '1px solid transparent' // Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.json.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.json.patch
new file mode 100644
index 0000000..f9cc227
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.json.patch
@@ -0,0 +1,48 @@
+Index: theme-wikimedia-ui.json
+===================================================================
+--- theme-wikimedia-ui.json
++++ theme-wikimedia-ui.json
+@@ -3991,8 +3991,22 @@
+           "type": "theme"
+         },
+         "path": ["dimension", "absolute", "2"]
+       },
++      "4": {
++        "value": "4px",
++        "filePath": "src/themes/wikimedia-ui.json",
++        "isSource": false,
++        "original": {
++          "value": "4px"
++        },
++        "name": "dimension-absolute-4",
++        "attributes": {
++          "tokens": [],
++          "type": "theme"
++        },
++        "path": ["dimension", "absolute", "4"]
++      },
+       "6": {
+         "value": "6px",
+         "filePath": "src/themes/wikimedia-ui.json",
+         "isSource": false,
+@@ -10699,17 +10713,17 @@
+     }
+   },
+   "border-radius": {
+     "base": {
+-      "value": "2px",
++      "value": "4px",
+       "filePath": "src/application.json",
+       "isSource": false,
+       "original": {
+-        "value": "{ dimension.absolute.2 }"
++        "value": "{ dimension.absolute.4 }"
+       },
+       "name": "border-radius-base",
+       "attributes": {
+-        "tokens": ["dimension.absolute.2"],
++        "tokens": ["dimension.absolute.4"],
+         "type": "base"
+       },
+       "path": ["border-radius", "base"]
+     },
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.less.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.less.patch
new file mode 100644
index 0000000..34302d0
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.less.patch
@@ -0,0 +1,15 @@
+Index: theme-wikimedia-ui.less
+===================================================================
+--- theme-wikimedia-ui.less
++++ theme-wikimedia-ui.less
+@@ -426,9 +426,9 @@
+ @border-color-option-pink: var(--border-color-option-pink, #b5739e);
+ @border-color-option-maroon: var(--border-color-option-maroon, #b57775);
+ @border-color-transparent: var(--border-color-transparent, transparent);
+ @border-color-divider: var(--border-color-divider, #a2a9b1);
+-@border-radius-base: 2px;
++@border-radius-base: 4px;
+ @border-radius-sharp: 0;
+ @border-radius-pill: 9999px;
+ @border-radius-circle: 50%; // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ @outline-color-progressive--focus: var(
diff --git a/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.scss.patch b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.scss.patch
new file mode 100644
index 0000000..8fea899
--- /dev/null
+++ b/patches/codex/wikimedia__codex-design-tokens__theme-wikimedia-ui.scss.patch
@@ -0,0 +1,15 @@
+Index: theme-wikimedia-ui.scss
+===================================================================
+--- theme-wikimedia-ui.scss
++++ theme-wikimedia-ui.scss
+@@ -361,9 +361,9 @@
+ $border-color-option-pink: #b5739e;
+ $border-color-option-maroon: #b57775;
+ $border-color-transparent: transparent;
+ $border-color-divider: #a2a9b1;
+-$border-radius-base: 2px;
++$border-radius-base: 4px;
+ $border-radius-sharp: 0;
+ $border-radius-pill: 9999px;
+ $border-radius-circle: 50%; // Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500
+ $outline-color-progressive--focus: #36c; // Use in places where no more customized focus styles are provided, for example on generic `:focus`.
diff --git a/patches/codex/wikimedia__codex__dist__codex.style-bidi.css.patch b/patches/codex/wikimedia__codex__dist__codex.style-bidi.css.patch
new file mode 100644
index 0000000..61e9e4d
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__codex.style-bidi.css.patch
@@ -0,0 +1,320 @@
+Index: dist/codex.style-bidi.css
+===================================================================
+--- dist/codex.style-bidi.css
++++ dist/codex.style-bidi.css
+@@ -50,9 +50,9 @@
+ [dir] .cdx-button {
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
+@@ -720,17 +720,17 @@
+ }
+ [dir] .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ [dir] .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ [dir] .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ [dir] .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-left-radius: 2px;
+-  border-bottom-right-radius: 2px;
++  border-bottom-left-radius: 4px;
++  border-bottom-right-radius: 4px;
+ }
+ [dir] .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
+@@ -767,9 +767,9 @@
+   width: fit-content;
+   overflow: hidden;
+ }
+ [dir] .cdx-button-group {
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+ }
+ [dir='ltr'] .cdx-button-group {
+   padding-left: 1px;
+@@ -807,8 +807,24 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++[dir='ltr'] .cdx-button-group .cdx-button:first-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
++[dir='rtl'] .cdx-button-group .cdx-button:first-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++[dir='ltr'] .cdx-button-group .cdx-button:last-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++[dir='rtl'] .cdx-button-group .cdx-button:last-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
+ .cdx-thumbnail {
+   display: inline-flex;
+ }
+ .cdx-thumbnail__placeholder,
+@@ -825,9 +841,9 @@
+   background-position: center;
+   background-repeat: no-repeat;
+   background-size: cover;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   display: inline-block;
+ }
+@@ -902,9 +918,9 @@
+ }
+ [dir] .cdx-card {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ [dir] .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
+@@ -1171,9 +1187,9 @@
+ [dir='rtl'] .cdx-checkbox__custom-input:not(.cdx-checkbox__custom-input--inline) {
+   padding-right: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ [dir] .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   position: absolute;
+@@ -1341,9 +1357,9 @@
+   line-height: var(--line-height-small, 1.375rem);
+ }
+ [dir] .cdx-tooltip {
+   background-color: var(--background-color-inverted, #101418);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   animation-name: cdx-animation-tooltip;
+   animation-duration: 0.1s;
+   animation-timing-function: linear;
+@@ -1446,9 +1462,9 @@
+   min-height: 32px;
+   overflow: hidden;
+ }
+ [dir] .cdx-chip-input {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
+   align-items: center;
+@@ -1959,9 +1975,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ [dir] .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
+@@ -2016,9 +2032,9 @@
+ }
+ [dir] .cdx-menu {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+@@ -2102,9 +2118,9 @@
+   min-width: 256px;
+   overflow: hidden;
+ }
+ [dir] .cdx-text-input {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
+   top: 50%;
+@@ -2421,9 +2437,9 @@
+ }
+ [dir] .cdx-dialog {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+@@ -2578,9 +2594,9 @@
+ }
+ [dir] .cdx-message {
+   background-color: var(--background-color-notice-subtle, #eaecf0);
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
+@@ -3031,9 +3047,9 @@
+ }
+ [dir] .cdx-image__image {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+ }
+@@ -3082,9 +3098,9 @@
+ }
+ [dir] .cdx-image__placeholder {
+   background-color: var(--background-color-interactive-subtle, #f8f9fa);
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
+@@ -3608,9 +3624,9 @@
+ }
+ [dir] .cdx-popover {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -3725,12 +3741,12 @@
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+ [dir='ltr'] .cdx-popover__arrow {
+-  border-top-left-radius: 2px;
++  border-top-left-radius: 4px;
+ }
+ [dir='rtl'] .cdx-popover__arrow {
+-  border-top-right-radius: 2px;
++  border-top-right-radius: 4px;
+ }
+ .cdx-popover--bottom-sheet {
+   position: static;
+   max-height: calc(100% - 8rem);
+@@ -4137,9 +4153,9 @@
+ }
+ [dir] .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+ }
+@@ -4229,9 +4245,9 @@
+ }
+ [dir] .cdx-select {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   background-repeat: no-repeat;
+   background-size: max(calc(var(--font-size-medium, 1rem) - 4px), 10px);
+@@ -4307,9 +4323,9 @@
+ }
+ [dir] .cdx-select-vue__handle {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+ }
+ [dir='ltr'] .cdx-select-vue__handle {
+@@ -4705,9 +4721,9 @@
+   word-wrap: break-word;
+ }
+ [dir] .cdx-table {
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
+     word-wrap: unset;
+@@ -5177,10 +5193,10 @@
+ }
+ [dir] .cdx-tabs__list__item {
+   background-color: var(--background-color-transparent, transparent);
+   border-width: 0;
+-  border-top-left-radius: 2px;
+-  border-top-right-radius: 2px;
++  border-top-left-radius: 4px;
++  border-top-right-radius: 4px;
+   padding: 4px 12px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
+ }
+@@ -5470,9 +5486,9 @@
+ }
+ [dir] .cdx-text-area__textarea {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+ }
+ .cdx-text-area__textarea--is-autosize {
+   resize: none;
+@@ -5720,9 +5736,9 @@
+ [dir] .cdx-toggle-button {
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
+@@ -5869,9 +5885,9 @@
+   width: fit-content;
+   overflow: hidden;
+ }
+ [dir] .cdx-toggle-button-group {
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+ }
+ [dir='ltr'] .cdx-toggle-button-group {
+   padding-left: 1px;
diff --git a/patches/codex/wikimedia__codex__dist__codex.style-rtl.css.patch b/patches/codex/wikimedia__codex__dist__codex.style-rtl.css.patch
new file mode 100644
index 0000000..62d3467
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__codex.style-rtl.css.patch
@@ -0,0 +1,308 @@
+Index: dist/codex.style-rtl.css
+===================================================================
+--- dist/codex.style-rtl.css
++++ dist/codex.style-rtl.css
+@@ -41,9 +41,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-left: 11px;
+   padding-right: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
+@@ -573,17 +573,17 @@
+ }
+ .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-right-radius: 2px;
+-  border-bottom-left-radius: 2px;
++  border-bottom-right-radius: 4px;
++  border-bottom-left-radius: 4px;
+ }
+ .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
+@@ -613,9 +613,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-right: 1px;
+   overflow: hidden;
+ }
+@@ -635,8 +635,16 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++.cdx-button-group .cdx-button:first-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++.cdx-button-group .cdx-button:last-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
+ .cdx-thumbnail {
+   display: inline-flex;
+ }
+ .cdx-thumbnail__placeholder,
+@@ -650,9 +658,9 @@
+   min-height: 40px;
+   width: 2.5rem;
+   height: 2.5rem;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   background-color: var(--background-color-base-fixed, #fff);
+   display: inline-block;
+@@ -717,9 +725,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
+@@ -930,9 +938,9 @@
+   padding-top: 6px;
+   padding-right: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   background-color: var(--background-color-base-fixed, #fff);
+@@ -1067,9 +1075,9 @@
+   z-index: 800;
+   width: -webkit-max-content;
+   width: max-content;
+   max-width: 16rem;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   font-family:
+     -apple-system,
+     BlinkMacSystemFont,
+@@ -1169,9 +1177,9 @@
+   font-size: var(--font-size-small, 0.875rem);
+ }
+ .cdx-chip-input {
+   min-height: 32px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
+@@ -1612,9 +1620,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
+@@ -1654,9 +1662,9 @@
+   z-index: 50;
+   box-sizing: border-box;
+   width: 100%;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   font-size: var(--font-size-medium, 1rem);
+@@ -1729,9 +1737,9 @@
+ .cdx-text-input {
+   position: relative;
+   box-sizing: border-box;
+   min-width: 256px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
+@@ -1968,9 +1976,9 @@
+   width: calc(100vw - 2rem);
+   height: unset;
+   max-height: calc(100vh - 2rem);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+@@ -2112,9 +2120,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
+@@ -2514,9 +2522,9 @@
+   min-width: 24px;
+   min-height: 24px;
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   font-size: var(--font-size-x-small, 0.75rem);
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+@@ -2560,9 +2568,9 @@
+   align-items: center;
+   justify-content: center;
+   width: 100%;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
+@@ -3000,9 +3008,9 @@
+   z-index: 700;
+   box-sizing: border-box;
+   min-width: 12rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -3085,9 +3093,9 @@
+   position: absolute;
+   width: 1rem;
+   height: 1rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-top-right-radius: 2px;
++  border-top-right-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
+@@ -3425,9 +3433,9 @@
+ .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   display: flex;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+   margin: -1px;
+@@ -3494,9 +3502,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-right: 8px;
+   padding-left: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -3552,9 +3560,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-right: 8px;
+   padding-left: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -3894,9 +3902,9 @@
+ }
+ .cdx-table {
+   color: var(--color-base, #202122);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   word-wrap: break-word;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
+@@ -4282,10 +4290,10 @@
+   display: block;
+   flex: 0 0 auto;
+   max-width: 16rem;
+   border-width: 0;
+-  border-top-right-radius: 2px;
+-  border-top-left-radius: 2px;
++  border-top-right-radius: 4px;
++  border-top-left-radius: 4px;
+   padding: 4px 12px;
+   font-size: var(--font-size-medium, 1rem);
+   font-weight: 700;
+   line-height: var(--line-height-small, 1.375rem);
+@@ -4486,9 +4494,9 @@
+   min-height: 64px;
+   width: 100%;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+   overflow: auto;
+   font-family: sans-serif;
+   font-size: var(--font-size-medium, 1rem);
+@@ -4682,9 +4690,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-left: 11px;
+   padding-right: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
+@@ -4813,9 +4821,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-right: 1px;
+   overflow: hidden;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__codex.style.css.patch b/patches/codex/wikimedia__codex__dist__codex.style.css.patch
new file mode 100644
index 0000000..3cf6448
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__codex.style.css.patch
@@ -0,0 +1,308 @@
+Index: dist/codex.style.css
+===================================================================
+--- dist/codex.style.css
++++ dist/codex.style.css
+@@ -41,9 +41,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
+@@ -573,17 +573,17 @@
+ }
+ .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-left-radius: 2px;
+-  border-bottom-right-radius: 2px;
++  border-bottom-left-radius: 4px;
++  border-bottom-right-radius: 4px;
+ }
+ .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
+@@ -613,9 +613,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-left: 1px;
+   overflow: hidden;
+ }
+@@ -635,8 +635,16 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     -1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++.cdx-button-group .cdx-button:first-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
++.cdx-button-group .cdx-button:last-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
+ .cdx-thumbnail {
+   display: inline-flex;
+ }
+ .cdx-thumbnail__placeholder,
+@@ -650,9 +658,9 @@
+   min-height: 40px;
+   width: 2.5rem;
+   height: 2.5rem;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   background-color: var(--background-color-base-fixed, #fff);
+   display: inline-block;
+@@ -717,9 +725,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
+@@ -930,9 +938,9 @@
+   padding-top: 6px;
+   padding-left: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   background-color: var(--background-color-base-fixed, #fff);
+@@ -1067,9 +1075,9 @@
+   z-index: 800;
+   width: -webkit-max-content;
+   width: max-content;
+   max-width: 16rem;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   font-family:
+     -apple-system,
+     BlinkMacSystemFont,
+@@ -1169,9 +1177,9 @@
+   font-size: var(--font-size-small, 0.875rem);
+ }
+ .cdx-chip-input {
+   min-height: 32px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
+@@ -1612,9 +1620,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
+@@ -1654,9 +1662,9 @@
+   z-index: 50;
+   box-sizing: border-box;
+   width: 100%;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   font-size: var(--font-size-medium, 1rem);
+@@ -1729,9 +1737,9 @@
+ .cdx-text-input {
+   position: relative;
+   box-sizing: border-box;
+   min-width: 256px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
+@@ -1968,9 +1976,9 @@
+   width: calc(100vw - 2rem);
+   height: unset;
+   max-height: calc(100vh - 2rem);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+@@ -2112,9 +2120,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
+@@ -2514,9 +2522,9 @@
+   min-width: 24px;
+   min-height: 24px;
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   font-size: var(--font-size-x-small, 0.75rem);
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+@@ -2560,9 +2568,9 @@
+   align-items: center;
+   justify-content: center;
+   width: 100%;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
+@@ -3000,9 +3008,9 @@
+   z-index: 700;
+   box-sizing: border-box;
+   min-width: 12rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -3085,9 +3093,9 @@
+   position: absolute;
+   width: 1rem;
+   height: 1rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-top-left-radius: 2px;
++  border-top-left-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
+@@ -3425,9 +3433,9 @@
+ .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   display: flex;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+   margin: -1px;
+@@ -3494,9 +3502,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-left: 8px;
+   padding-right: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -3552,9 +3560,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-left: 8px;
+   padding-right: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -3894,9 +3902,9 @@
+ }
+ .cdx-table {
+   color: var(--color-base, #202122);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   word-wrap: break-word;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
+@@ -4282,10 +4290,10 @@
+   display: block;
+   flex: 0 0 auto;
+   max-width: 16rem;
+   border-width: 0;
+-  border-top-left-radius: 2px;
+-  border-top-right-radius: 2px;
++  border-top-left-radius: 4px;
++  border-top-right-radius: 4px;
+   padding: 4px 12px;
+   font-size: var(--font-size-medium, 1rem);
+   font-weight: 700;
+   line-height: var(--line-height-small, 1.375rem);
+@@ -4486,9 +4494,9 @@
+   min-height: 64px;
+   width: 100%;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+   overflow: auto;
+   font-family: sans-serif;
+   font-size: var(--font-size-medium, 1rem);
+@@ -4682,9 +4690,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
+@@ -4813,9 +4821,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-left: 1px;
+   overflow: hidden;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-bidi.css.patch
new file mode 100644
index 0000000..a7f2a8a
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-bidi.css.patch
@@ -0,0 +1,25 @@
+Index: dist/modules/CdxAccordion-bidi.css
+===================================================================
+--- dist/modules/CdxAccordion-bidi.css
++++ dist/modules/CdxAccordion-bidi.css
+@@ -155,17 +155,17 @@
+ }
+ [dir] .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ [dir] .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ [dir] .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ [dir] .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-left-radius: 2px;
+-  border-bottom-right-radius: 2px;
++  border-bottom-left-radius: 4px;
++  border-bottom-right-radius: 4px;
+ }
+ [dir] .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-rtl.css.patch
new file mode 100644
index 0000000..d29c1cc
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion-rtl.css.patch
@@ -0,0 +1,25 @@
+Index: dist/modules/CdxAccordion-rtl.css
+===================================================================
+--- dist/modules/CdxAccordion-rtl.css
++++ dist/modules/CdxAccordion-rtl.css
+@@ -136,17 +136,17 @@
+ }
+ .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-right-radius: 2px;
+-  border-bottom-left-radius: 2px;
++  border-bottom-right-radius: 4px;
++  border-bottom-left-radius: 4px;
+ }
+ .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxAccordion.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion.css.patch
new file mode 100644
index 0000000..68e2f69
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxAccordion.css.patch
@@ -0,0 +1,25 @@
+Index: dist/modules/CdxAccordion.css
+===================================================================
+--- dist/modules/CdxAccordion.css
++++ dist/modules/CdxAccordion.css
+@@ -136,17 +136,17 @@
+ }
+ .cdx-accordion--separation-outline {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px 2px 0 0;
++  border-radius: 4px 4px 0 0;
+ }
+ .cdx-accordion + .cdx-accordion--separation-outline {
+   border-radius: 0;
+ }
+ .cdx-accordion--separation-outline:not(:has(+ .cdx-accordion)),
+ .cdx-accordion + .cdx-accordion--separation-outline:last-child {
+-  border-bottom-left-radius: 2px;
+-  border-bottom-right-radius: 2px;
++  border-bottom-left-radius: 4px;
++  border-bottom-right-radius: 4px;
+ }
+ .cdx-accordion--separation-minimal > summary {
+   padding: 6px 0;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButton-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButton-bidi.css.patch
new file mode 100644
index 0000000..42ae44b
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButton-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxButton-bidi.css
+===================================================================
+--- dist/modules/CdxButton-bidi.css
++++ dist/modules/CdxButton-bidi.css
+@@ -17,9 +17,9 @@
+ [dir] .cdx-button {
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButton-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButton-rtl.css.patch
new file mode 100644
index 0000000..5f8f1bd
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButton-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxButton-rtl.css
+===================================================================
+--- dist/modules/CdxButton-rtl.css
++++ dist/modules/CdxButton-rtl.css
+@@ -8,9 +8,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-left: 11px;
+   padding-right: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButton.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButton.css.patch
new file mode 100644
index 0000000..29b4f79
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButton.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxButton.css
+===================================================================
+--- dist/modules/CdxButton.css
++++ dist/modules/CdxButton.css
+@@ -8,9 +8,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-bidi.css.patch
new file mode 100644
index 0000000..dfc8acb
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-bidi.css.patch
@@ -0,0 +1,36 @@
+Index: dist/modules/CdxButtonGroup-bidi.css
+===================================================================
+--- dist/modules/CdxButtonGroup-bidi.css
++++ dist/modules/CdxButtonGroup-bidi.css
+@@ -5,9 +5,9 @@
+   width: fit-content;
+   overflow: hidden;
+ }
+ [dir] .cdx-button-group {
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+ }
+ [dir='ltr'] .cdx-button-group {
+   padding-left: 1px;
+@@ -45,4 +45,20 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++[dir='ltr'] .cdx-button-group .cdx-button:first-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
++[dir='rtl'] .cdx-button-group .cdx-button:first-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++[dir='ltr'] .cdx-button-group .cdx-button:last-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++[dir='rtl'] .cdx-button-group .cdx-button:last-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-rtl.css.patch
new file mode 100644
index 0000000..39283a8
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup-rtl.css.patch
@@ -0,0 +1,28 @@
+Index: dist/modules/CdxButtonGroup-rtl.css
+===================================================================
+--- dist/modules/CdxButtonGroup-rtl.css
++++ dist/modules/CdxButtonGroup-rtl.css
+@@ -2,9 +2,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-right: 1px;
+   overflow: hidden;
+ }
+@@ -24,4 +24,12 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++.cdx-button-group .cdx-button:first-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
++.cdx-button-group .cdx-button:last-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup.css.patch
new file mode 100644
index 0000000..337060f
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxButtonGroup.css.patch
@@ -0,0 +1,28 @@
+Index: dist/modules/CdxButtonGroup.css
+===================================================================
+--- dist/modules/CdxButtonGroup.css
++++ dist/modules/CdxButtonGroup.css
+@@ -2,9 +2,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-left: 1px;
+   overflow: hidden;
+ }
+@@ -24,4 +24,12 @@
+   box-shadow:
+     0 -1px 0 0 var(--box-shadow-color-inverted, #fff),
+     -1px 0 0 0 var(--box-shadow-color-inverted, #fff);
+ }
++.cdx-button-group .cdx-button:first-child {
++  border-top-left-radius: inherit;
++  border-bottom-left-radius: inherit;
++}
++.cdx-button-group .cdx-button:last-child {
++  border-top-right-radius: inherit;
++  border-bottom-right-radius: inherit;
++}
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCard-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCard-bidi.css.patch
new file mode 100644
index 0000000..b2d71f0
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCard-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCard-bidi.css
+===================================================================
+--- dist/modules/CdxCard-bidi.css
++++ dist/modules/CdxCard-bidi.css
+@@ -5,9 +5,9 @@
+ }
+ [dir] .cdx-card {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ [dir] .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCard-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCard-rtl.css.patch
new file mode 100644
index 0000000..e11d120
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCard-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCard-rtl.css
+===================================================================
+--- dist/modules/CdxCard-rtl.css
++++ dist/modules/CdxCard-rtl.css
+@@ -3,9 +3,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCard.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCard.css.patch
new file mode 100644
index 0000000..c0efe72
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCard.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCard.css
+===================================================================
+--- dist/modules/CdxCard.css
++++ dist/modules/CdxCard.css
+@@ -3,9 +3,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-card--is-link {
+   transition-property: background-color, color, border-color, box-shadow;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-bidi.css.patch
new file mode 100644
index 0000000..d308d07
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCheckbox-bidi.css
+===================================================================
+--- dist/modules/CdxCheckbox-bidi.css
++++ dist/modules/CdxCheckbox-bidi.css
+@@ -114,9 +114,9 @@
+ [dir='rtl'] .cdx-checkbox__custom-input:not(.cdx-checkbox__custom-input--inline) {
+   padding-right: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ [dir] .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   position: absolute;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-rtl.css.patch
new file mode 100644
index 0000000..a97f1bd
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCheckbox-rtl.css
+===================================================================
+--- dist/modules/CdxCheckbox-rtl.css
++++ dist/modules/CdxCheckbox-rtl.css
+@@ -75,9 +75,9 @@
+   padding-top: 6px;
+   padding-right: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   background-color: var(--background-color-base-fixed, #fff);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox.css.patch
new file mode 100644
index 0000000..b5c7721
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxCheckbox.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxCheckbox.css
+===================================================================
+--- dist/modules/CdxCheckbox.css
++++ dist/modules/CdxCheckbox.css
+@@ -75,9 +75,9 @@
+   padding-top: 6px;
+   padding-left: calc(var(--font-size-medium, 1rem) + 10px);
+ }
+ .cdx-checkbox__icon {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-checkbox__input:indeterminate + .cdx-checkbox__icon:before {
+   content: ' ';
+   background-color: var(--background-color-base-fixed, #fff);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-bidi.css.patch
new file mode 100644
index 0000000..443d696
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxChipInput-bidi.css
+===================================================================
+--- dist/modules/CdxChipInput-bidi.css
++++ dist/modules/CdxChipInput-bidi.css
+@@ -84,9 +84,9 @@
+   min-height: 32px;
+   overflow: hidden;
+ }
+ [dir] .cdx-chip-input {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
+   align-items: center;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-rtl.css.patch
new file mode 100644
index 0000000..8ec1a05
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxChipInput-rtl.css
+===================================================================
+--- dist/modules/CdxChipInput-rtl.css
++++ dist/modules/CdxChipInput-rtl.css
+@@ -69,9 +69,9 @@
+   font-size: var(--font-size-small, 0.875rem);
+ }
+ .cdx-chip-input {
+   min-height: 32px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxChipInput.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput.css.patch
new file mode 100644
index 0000000..f8394f4
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxChipInput.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxChipInput.css
+===================================================================
+--- dist/modules/CdxChipInput.css
++++ dist/modules/CdxChipInput.css
+@@ -69,9 +69,9 @@
+   font-size: var(--font-size-small, 0.875rem);
+ }
+ .cdx-chip-input {
+   min-height: 32px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-chip-input__chips,
+ .cdx-chip-input__separate-input {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxDialog-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxDialog-bidi.css.patch
new file mode 100644
index 0000000..61792e0
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxDialog-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxDialog-bidi.css
+===================================================================
+--- dist/modules/CdxDialog-bidi.css
++++ dist/modules/CdxDialog-bidi.css
+@@ -29,9 +29,9 @@
+ }
+ [dir] .cdx-dialog {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxDialog-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxDialog-rtl.css.patch
new file mode 100644
index 0000000..cc8ec64
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxDialog-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxDialog-rtl.css
+===================================================================
+--- dist/modules/CdxDialog-rtl.css
++++ dist/modules/CdxDialog-rtl.css
+@@ -20,9 +20,9 @@
+   width: calc(100vw - 2rem);
+   height: unset;
+   max-height: calc(100vh - 2rem);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxDialog.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxDialog.css.patch
new file mode 100644
index 0000000..510505b
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxDialog.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxDialog.css
+===================================================================
+--- dist/modules/CdxDialog.css
++++ dist/modules/CdxDialog.css
+@@ -20,9 +20,9 @@
+   width: calc(100vw - 2rem);
+   height: unset;
+   max-height: calc(100vh - 2rem);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxImage-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxImage-bidi.css.patch
new file mode 100644
index 0000000..f117ffd
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxImage-bidi.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxImage-bidi.css
+===================================================================
+--- dist/modules/CdxImage-bidi.css
++++ dist/modules/CdxImage-bidi.css
+@@ -22,9 +22,9 @@
+ }
+ [dir] .cdx-image__image {
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+ }
+@@ -73,9 +73,9 @@
+ }
+ [dir] .cdx-image__placeholder {
+   background-color: var(--background-color-interactive-subtle, #f8f9fa);
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxImage-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxImage-rtl.css.patch
new file mode 100644
index 0000000..8ba77c4
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxImage-rtl.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxImage-rtl.css
+===================================================================
+--- dist/modules/CdxImage-rtl.css
++++ dist/modules/CdxImage-rtl.css
+@@ -19,9 +19,9 @@
+   min-width: 24px;
+   min-height: 24px;
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   font-size: var(--font-size-x-small, 0.75rem);
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+@@ -65,9 +65,9 @@
+   align-items: center;
+   justify-content: center;
+   width: 100%;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxImage.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxImage.css.patch
new file mode 100644
index 0000000..204d46e
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxImage.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxImage.css
+===================================================================
+--- dist/modules/CdxImage.css
++++ dist/modules/CdxImage.css
+@@ -19,9 +19,9 @@
+   min-width: 24px;
+   min-height: 24px;
+   margin: 0;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   font-size: var(--font-size-x-small, 0.75rem);
+ }
+ .cdx-image__image--object-fit-fill {
+   object-fit: fill;
+@@ -65,9 +65,9 @@
+   align-items: center;
+   justify-content: center;
+   width: 100%;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-image__placeholder__icon--size-smallest {
+   width: 0.75rem;
+   height: 0.75rem;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMenu-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMenu-bidi.css.patch
new file mode 100644
index 0000000..3094319
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMenu-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMenu-bidi.css
+===================================================================
+--- dist/modules/CdxMenu-bidi.css
++++ dist/modules/CdxMenu-bidi.css
+@@ -10,9 +10,9 @@
+ }
+ [dir] .cdx-menu {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMenu-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMenu-rtl.css.patch
new file mode 100644
index 0000000..be49cf0
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMenu-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMenu-rtl.css
+===================================================================
+--- dist/modules/CdxMenu-rtl.css
++++ dist/modules/CdxMenu-rtl.css
+@@ -7,9 +7,9 @@
+   z-index: 50;
+   box-sizing: border-box;
+   width: 100%;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMenu.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMenu.css.patch
new file mode 100644
index 0000000..42b184e
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMenu.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMenu.css
+===================================================================
+--- dist/modules/CdxMenu.css
++++ dist/modules/CdxMenu.css
+@@ -7,9 +7,9 @@
+   z-index: 50;
+   box-sizing: border-box;
+   width: 100%;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMessage-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMessage-bidi.css.patch
new file mode 100644
index 0000000..5c2760e
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMessage-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMessage-bidi.css
+===================================================================
+--- dist/modules/CdxMessage-bidi.css
++++ dist/modules/CdxMessage-bidi.css
+@@ -6,9 +6,9 @@
+ }
+ [dir] .cdx-message {
+   background-color: var(--background-color-notice-subtle, #eaecf0);
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMessage-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMessage-rtl.css.patch
new file mode 100644
index 0000000..116e559
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMessage-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMessage-rtl.css
+===================================================================
+--- dist/modules/CdxMessage-rtl.css
++++ dist/modules/CdxMessage-rtl.css
+@@ -4,9 +4,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxMessage.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxMessage.css.patch
new file mode 100644
index 0000000..06d9e2a
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxMessage.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxMessage.css
+===================================================================
+--- dist/modules/CdxMessage.css
++++ dist/modules/CdxMessage.css
+@@ -4,9 +4,9 @@
+   display: flex;
+   align-items: flex-start;
+   position: relative;
+   border: 1px solid var(--border-color-notice, #72777d);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 12px;
+ }
+ .cdx-message__icon,
+ .cdx-message__icon--vue {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxPopover-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxPopover-bidi.css.patch
new file mode 100644
index 0000000..42291c8
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxPopover-bidi.css.patch
@@ -0,0 +1,30 @@
+Index: dist/modules/CdxPopover-bidi.css
+===================================================================
+--- dist/modules/CdxPopover-bidi.css
++++ dist/modules/CdxPopover-bidi.css
+@@ -39,9 +39,9 @@
+ }
+ [dir] .cdx-popover {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -156,12 +156,12 @@
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+ }
+ [dir='ltr'] .cdx-popover__arrow {
+-  border-top-left-radius: 2px;
++  border-top-left-radius: 4px;
+ }
+ [dir='rtl'] .cdx-popover__arrow {
+-  border-top-right-radius: 2px;
++  border-top-right-radius: 4px;
+ }
+ .cdx-popover--bottom-sheet {
+   position: static;
+   max-height: calc(100% - 8rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxPopover-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxPopover-rtl.css.patch
new file mode 100644
index 0000000..fee00dd
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxPopover-rtl.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxPopover-rtl.css
+===================================================================
+--- dist/modules/CdxPopover-rtl.css
++++ dist/modules/CdxPopover-rtl.css
+@@ -30,9 +30,9 @@
+   z-index: 700;
+   box-sizing: border-box;
+   min-width: 12rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -115,9 +115,9 @@
+   position: absolute;
+   width: 1rem;
+   height: 1rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-top-right-radius: 2px;
++  border-top-right-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxPopover.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxPopover.css.patch
new file mode 100644
index 0000000..9b92fc2
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxPopover.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxPopover.css
+===================================================================
+--- dist/modules/CdxPopover.css
++++ dist/modules/CdxPopover.css
+@@ -30,9 +30,9 @@
+   z-index: 700;
+   box-sizing: border-box;
+   min-width: 12rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 16px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+@@ -115,9 +115,9 @@
+   position: absolute;
+   width: 1rem;
+   height: 1rem;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-top-left-radius: 2px;
++  border-top-left-radius: 4px;
+   box-shadow:
+     0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06)),
+     0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, 0.06));
+   -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-bidi.css.patch
new file mode 100644
index 0000000..819dc2b
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxProgressBar-bidi.css
+===================================================================
+--- dist/modules/CdxProgressBar-bidi.css
++++ dist/modules/CdxProgressBar-bidi.css
+@@ -43,9 +43,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ [dir] .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-rtl.css.patch
new file mode 100644
index 0000000..1a5fd86
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxProgressBar-rtl.css
+===================================================================
+--- dist/modules/CdxProgressBar-rtl.css
++++ dist/modules/CdxProgressBar-rtl.css
+@@ -29,9 +29,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar.css.patch
new file mode 100644
index 0000000..e80ded7
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxProgressBar.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxProgressBar.css
+===================================================================
+--- dist/modules/CdxProgressBar.css
++++ dist/modules/CdxProgressBar.css
+@@ -29,9 +29,9 @@
+   border: 1px solid var(--border-color-progressive, #36c);
+   border-width: 1px;
+   border-style: solid;
+   border-color: var(--border-color-progressive, #36c);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled {
+   border-color: var(--border-color-disabled, #c8ccd1);
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-bidi.css.patch
new file mode 100644
index 0000000..3ada8cb
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxSearchInput-bidi.css
+===================================================================
+--- dist/modules/CdxSearchInput-bidi.css
++++ dist/modules/CdxSearchInput-bidi.css
+@@ -3,9 +3,9 @@
+ }
+ [dir] .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-rtl.css.patch
new file mode 100644
index 0000000..9894712
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxSearchInput-rtl.css
+===================================================================
+--- dist/modules/CdxSearchInput-rtl.css
++++ dist/modules/CdxSearchInput-rtl.css
+@@ -1,9 +1,9 @@
+ .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   display: flex;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+   margin: -1px;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput.css.patch
new file mode 100644
index 0000000..da37d85
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSearchInput.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxSearchInput.css
+===================================================================
+--- dist/modules/CdxSearchInput.css
++++ dist/modules/CdxSearchInput.css
+@@ -1,9 +1,9 @@
+ .cdx-search-input--has-end-button {
+   background-color: var(--background-color-base, #fff);
+   display: flex;
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
+   flex-grow: 1;
+   margin: -1px;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSelect-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSelect-bidi.css.patch
new file mode 100644
index 0000000..82905b4
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSelect-bidi.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxSelect-bidi.css
+===================================================================
+--- dist/modules/CdxSelect-bidi.css
++++ dist/modules/CdxSelect-bidi.css
+@@ -10,9 +10,9 @@
+ }
+ [dir] .cdx-select {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   background-repeat: no-repeat;
+   background-size: max(calc(var(--font-size-medium, 1rem) - 4px), 10px);
+@@ -88,9 +88,9 @@
+ }
+ [dir] .cdx-select-vue__handle {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+ }
+ [dir='ltr'] .cdx-select-vue__handle {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSelect-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSelect-rtl.css.patch
new file mode 100644
index 0000000..bd29446
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSelect-rtl.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxSelect-rtl.css
+===================================================================
+--- dist/modules/CdxSelect-rtl.css
++++ dist/modules/CdxSelect-rtl.css
+@@ -4,9 +4,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-right: 8px;
+   padding-left: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -62,9 +62,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-right: 8px;
+   padding-left: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxSelect.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxSelect.css.patch
new file mode 100644
index 0000000..ea7f168
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxSelect.css.patch
@@ -0,0 +1,26 @@
+Index: dist/modules/CdxSelect.css
+===================================================================
+--- dist/modules/CdxSelect.css
++++ dist/modules/CdxSelect.css
+@@ -4,9 +4,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-left: 8px;
+   padding-right: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
+@@ -62,9 +62,9 @@
+   min-width: 256px;
+   min-height: 32px;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 4px;
+   padding-bottom: 4px;
+   padding-left: 8px;
+   padding-right: calc(8px + 8px + calc(var(--font-size-medium, 1rem) + 4px));
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTable-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTable-bidi.css.patch
new file mode 100644
index 0000000..ea698de
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTable-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTable-bidi.css
+===================================================================
+--- dist/modules/CdxTable-bidi.css
++++ dist/modules/CdxTable-bidi.css
+@@ -234,9 +234,9 @@
+   word-wrap: break-word;
+ }
+ [dir] .cdx-table {
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
+     word-wrap: unset;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTable-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTable-rtl.css.patch
new file mode 100644
index 0000000..324a70d
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTable-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTable-rtl.css
+===================================================================
+--- dist/modules/CdxTable-rtl.css
++++ dist/modules/CdxTable-rtl.css
+@@ -211,9 +211,9 @@
+ }
+ .cdx-table {
+   color: var(--color-base, #202122);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   word-wrap: break-word;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTable.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTable.css.patch
new file mode 100644
index 0000000..45786d3
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTable.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTable.css
+===================================================================
+--- dist/modules/CdxTable.css
++++ dist/modules/CdxTable.css
+@@ -211,9 +211,9 @@
+ }
+ .cdx-table {
+   color: var(--color-base, #202122);
+   border: 1px solid var(--border-color-base, #a2a9b1);
+-  border-radius: 2px;
++  border-radius: 4px;
+   word-wrap: break-word;
+ }
+ @supports (word-break: break-word) {
+   .cdx-table {
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTabs-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTabs-bidi.css.patch
new file mode 100644
index 0000000..14db0c9
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTabs-bidi.css.patch
@@ -0,0 +1,17 @@
+Index: dist/modules/CdxTabs-bidi.css
+===================================================================
+--- dist/modules/CdxTabs-bidi.css
++++ dist/modules/CdxTabs-bidi.css
+@@ -72,10 +72,10 @@
+ }
+ [dir] .cdx-tabs__list__item {
+   background-color: var(--background-color-transparent, transparent);
+   border-width: 0;
+-  border-top-left-radius: 2px;
+-  border-top-right-radius: 2px;
++  border-top-left-radius: 4px;
++  border-top-right-radius: 4px;
+   padding: 4px 12px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTabs-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTabs-rtl.css.patch
new file mode 100644
index 0000000..241976f
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTabs-rtl.css.patch
@@ -0,0 +1,17 @@
+Index: dist/modules/CdxTabs-rtl.css
+===================================================================
+--- dist/modules/CdxTabs-rtl.css
++++ dist/modules/CdxTabs-rtl.css
+@@ -50,10 +50,10 @@
+   display: block;
+   flex: 0 0 auto;
+   max-width: 16rem;
+   border-width: 0;
+-  border-top-right-radius: 2px;
+-  border-top-left-radius: 2px;
++  border-top-right-radius: 4px;
++  border-top-left-radius: 4px;
+   padding: 4px 12px;
+   font-size: var(--font-size-medium, 1rem);
+   font-weight: 700;
+   line-height: var(--line-height-small, 1.375rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTabs.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTabs.css.patch
new file mode 100644
index 0000000..f7c6620
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTabs.css.patch
@@ -0,0 +1,17 @@
+Index: dist/modules/CdxTabs.css
+===================================================================
+--- dist/modules/CdxTabs.css
++++ dist/modules/CdxTabs.css
+@@ -50,10 +50,10 @@
+   display: block;
+   flex: 0 0 auto;
+   max-width: 16rem;
+   border-width: 0;
+-  border-top-left-radius: 2px;
+-  border-top-right-radius: 2px;
++  border-top-left-radius: 4px;
++  border-top-right-radius: 4px;
+   padding: 4px 12px;
+   font-size: var(--font-size-medium, 1rem);
+   font-weight: 700;
+   line-height: var(--line-height-small, 1.375rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-bidi.css.patch
new file mode 100644
index 0000000..7df7d68
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextArea-bidi.css
+===================================================================
+--- dist/modules/CdxTextArea-bidi.css
++++ dist/modules/CdxTextArea-bidi.css
+@@ -92,9 +92,9 @@
+ }
+ [dir] .cdx-text-area__textarea {
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+ }
+ .cdx-text-area__textarea--is-autosize {
+   resize: none;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-rtl.css.patch
new file mode 100644
index 0000000..88a4c07
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextArea-rtl.css
+===================================================================
+--- dist/modules/CdxTextArea-rtl.css
++++ dist/modules/CdxTextArea-rtl.css
+@@ -70,9 +70,9 @@
+   min-height: 64px;
+   width: 100%;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+   overflow: auto;
+   font-family: sans-serif;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextArea.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea.css.patch
new file mode 100644
index 0000000..5bf79a8
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextArea.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextArea.css
+===================================================================
+--- dist/modules/CdxTextArea.css
++++ dist/modules/CdxTextArea.css
+@@ -70,9 +70,9 @@
+   min-height: 64px;
+   width: 100%;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 4px 8px;
+   overflow: auto;
+   font-family: sans-serif;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-bidi.css.patch
new file mode 100644
index 0000000..4f27634
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextInput-bidi.css
+===================================================================
+--- dist/modules/CdxTextInput-bidi.css
++++ dist/modules/CdxTextInput-bidi.css
+@@ -4,9 +4,9 @@
+   min-width: 256px;
+   overflow: hidden;
+ }
+ [dir] .cdx-text-input {
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
+   top: 50%;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-rtl.css.patch
new file mode 100644
index 0000000..79cd5a2
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextInput-rtl.css
+===================================================================
+--- dist/modules/CdxTextInput-rtl.css
++++ dist/modules/CdxTextInput-rtl.css
+@@ -1,9 +1,9 @@
+ .cdx-text-input {
+   position: relative;
+   box-sizing: border-box;
+   min-width: 256px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTextInput.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput.css.patch
new file mode 100644
index 0000000..03d91f0
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTextInput.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTextInput.css
+===================================================================
+--- dist/modules/CdxTextInput.css
++++ dist/modules/CdxTextInput.css
+@@ -1,9 +1,9 @@
+ .cdx-text-input {
+   position: relative;
+   box-sizing: border-box;
+   min-width: 256px;
+-  border-radius: 2px;
++  border-radius: 4px;
+   overflow: hidden;
+ }
+ .cdx-text-input .cdx-text-input__start-icon {
+   position: absolute;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-bidi.css.patch
new file mode 100644
index 0000000..18a9156
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxThumbnail-bidi.css
+===================================================================
+--- dist/modules/CdxThumbnail-bidi.css
++++ dist/modules/CdxThumbnail-bidi.css
+@@ -15,9 +15,9 @@
+   background-position: center;
+   background-repeat: no-repeat;
+   background-size: cover;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   display: inline-block;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-rtl.css.patch
new file mode 100644
index 0000000..9b7226a
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxThumbnail-rtl.css
+===================================================================
+--- dist/modules/CdxThumbnail-rtl.css
++++ dist/modules/CdxThumbnail-rtl.css
+@@ -12,9 +12,9 @@
+   min-height: 40px;
+   width: 2.5rem;
+   height: 2.5rem;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   background-color: var(--background-color-base-fixed, #fff);
+   display: inline-block;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail.css.patch
new file mode 100644
index 0000000..f782840
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxThumbnail.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxThumbnail.css
+===================================================================
+--- dist/modules/CdxThumbnail.css
++++ dist/modules/CdxThumbnail.css
+@@ -12,9 +12,9 @@
+   min-height: 40px;
+   width: 2.5rem;
+   height: 2.5rem;
+   border: 1px solid var(--border-color-subtle, #c8ccd1);
+-  border-radius: 2px;
++  border-radius: 4px;
+ }
+ .cdx-thumbnail__image {
+   background-color: var(--background-color-base-fixed, #fff);
+   display: inline-block;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-bidi.css.patch
new file mode 100644
index 0000000..9013c53
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButton-bidi.css
+===================================================================
+--- dist/modules/CdxToggleButton-bidi.css
++++ dist/modules/CdxToggleButton-bidi.css
+@@ -17,9 +17,9 @@
+ [dir] .cdx-toggle-button {
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   transition-property: background-color, color, border-color, box-shadow;
+   transition-duration: 0.1s;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-rtl.css.patch
new file mode 100644
index 0000000..8e1a452
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButton-rtl.css
+===================================================================
+--- dist/modules/CdxToggleButton-rtl.css
++++ dist/modules/CdxToggleButton-rtl.css
+@@ -8,9 +8,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-left: 11px;
+   padding-right: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton.css.patch
new file mode 100644
index 0000000..846377c
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButton.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButton.css
+===================================================================
+--- dist/modules/CdxToggleButton.css
++++ dist/modules/CdxToggleButton.css
+@@ -8,9 +8,9 @@
+   max-width: 28rem;
+   margin: 0;
+   border-width: 1px;
+   border-style: solid;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-right: 11px;
+   padding-left: 11px;
+   font-family: inherit;
+   font-size: var(--font-size-medium, 1rem);
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-bidi.css.patch
new file mode 100644
index 0000000..628d225
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButtonGroup-bidi.css
+===================================================================
+--- dist/modules/CdxToggleButtonGroup-bidi.css
++++ dist/modules/CdxToggleButtonGroup-bidi.css
+@@ -5,9 +5,9 @@
+   width: fit-content;
+   overflow: hidden;
+ }
+ [dir] .cdx-toggle-button-group {
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+ }
+ [dir='ltr'] .cdx-toggle-button-group {
+   padding-left: 1px;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-rtl.css.patch
new file mode 100644
index 0000000..d081833
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButtonGroup-rtl.css
+===================================================================
+--- dist/modules/CdxToggleButtonGroup-rtl.css
++++ dist/modules/CdxToggleButtonGroup-rtl.css
+@@ -2,9 +2,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-right: 1px;
+   overflow: hidden;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup.css.patch
new file mode 100644
index 0000000..e050d55
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxToggleButtonGroup.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxToggleButtonGroup.css
+===================================================================
+--- dist/modules/CdxToggleButtonGroup.css
++++ dist/modules/CdxToggleButtonGroup.css
+@@ -2,9 +2,9 @@
+   position: relative;
+   z-index: 0;
+   width: -webkit-fit-content;
+   width: fit-content;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding-top: 1px;
+   padding-left: 1px;
+   overflow: hidden;
+ }
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-bidi.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-bidi.css.patch
new file mode 100644
index 0000000..5c28aa0
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-bidi.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTooltip-bidi.css
+===================================================================
+--- dist/modules/CdxTooltip-bidi.css
++++ dist/modules/CdxTooltip-bidi.css
+@@ -20,9 +20,9 @@
+   line-height: var(--line-height-small, 1.375rem);
+ }
+ [dir] .cdx-tooltip {
+   background-color: var(--background-color-inverted, #101418);
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   animation-name: cdx-animation-tooltip;
+   animation-duration: 0.1s;
+   animation-timing-function: linear;
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-rtl.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-rtl.css.patch
new file mode 100644
index 0000000..e8ac01e
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip-rtl.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTooltip-rtl.css
+===================================================================
+--- dist/modules/CdxTooltip-rtl.css
++++ dist/modules/CdxTooltip-rtl.css
+@@ -6,9 +6,9 @@
+   z-index: 800;
+   width: -webkit-max-content;
+   width: max-content;
+   max-width: 16rem;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   font-family:
+     -apple-system,
+     BlinkMacSystemFont,
diff --git a/patches/codex/wikimedia__codex__dist__modules__CdxTooltip.css.patch b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip.css.patch
new file mode 100644
index 0000000..2c69bde
--- /dev/null
+++ b/patches/codex/wikimedia__codex__dist__modules__CdxTooltip.css.patch
@@ -0,0 +1,15 @@
+Index: dist/modules/CdxTooltip.css
+===================================================================
+--- dist/modules/CdxTooltip.css
++++ dist/modules/CdxTooltip.css
+@@ -6,9 +6,9 @@
+   z-index: 800;
+   width: -webkit-max-content;
+   width: max-content;
+   max-width: 16rem;
+-  border-radius: 2px;
++  border-radius: 4px;
+   padding: 2px 6px;
+   font-family:
+     -apple-system,
+     BlinkMacSystemFont,
diff --git a/scripts/apply-codex-patch.mjs b/scripts/apply-codex-patch.mjs
new file mode 100644
index 0000000..1bd5c5a
--- /dev/null
+++ b/scripts/apply-codex-patch.mjs
@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+// postinstall hook: re-apply the committed Codex patch (if any) on top of the
+// freshly installed published packages.
+//
+// For each patched file we re-format the installed file with the same pinned
+// Prettier config used when the patch was authored, then apply the diff. Because
+// the published artifact and the formatter are both fixed, the formatted
+// baseline is byte-identical to authoring time, so the patch always lands.
+// Content hashes (recorded in manifest.json) make this deterministic and
+// idempotent: a file that is already patched is left untouched. This runs with
+// no Codex build, so CI / PR previews stay fast.
+//
+// Authoring lives in scripts/patch-codex.mjs.
+
+import fs from 'node:fs'
+import path from 'node:path'
+
+import {
+  PATCHES_DIR,
+  formatContent,
+  installedPackageDir,
+  installedTargetPath,
+  loadJsDiff,
+  loadPrettier,
+  readManifest,
+  readPrettierOptions,
+  sha256,
+} from './lib-codex-patch.mjs'
+
+async function main() {
+  const manifest = readManifest()
+  if (!manifest || !Array.isArray(manifest.files) || manifest.files.length === 0) {
+    // No patch committed: nothing to do (e.g. a fresh template clone).
+    return
+  }
+
+  // Warn (don't fail) if the installed Codex version drifted from the one the
+  // patch was authored against; the hash checks below are the real safety net.
+  for (const [pkg, expected] of Object.entries(manifest.codexVersions ?? {})) {
+    const pkgJson = path.join(installedPackageDir(pkg), 'package.json')
+    if (fs.existsSync(pkgJson)) {
+      const actual = JSON.parse(fs.readFileSync(pkgJson, 'utf8')).version
+      if (actual !== expected) {
+        console.warn(
+          `[apply-codex-patch] ${pkg} is ${actual} but the patch was made for ${expected}. ` +
+            'Re-run `npm run patch-codex` to regenerate if it fails to apply.',
+        )
+      }
+    }
+  }
+
+  const prettier = await loadPrettier()
+  const jsdiff = await loadJsDiff()
+  const prettierOpts = readPrettierOptions()
+
+  let applied = 0
+  let skipped = 0
+
+  for (const file of manifest.files) {
+    const patchPath = path.join(PATCHES_DIR, file.patch)
+    const targetPath = file.target ? installedTargetPath(file.target) : null
+    if (!targetPath || !fs.existsSync(targetPath)) {
+      throw new Error(`[apply-codex-patch] target not found: ${file.target}`)
+    }
+    if (!fs.existsSync(patchPath)) {
+      throw new Error(`[apply-codex-patch] patch file missing: ${file.patch}`)
+    }
+
+    // Normalize the installed file to the formatted baseline the patch expects.
+    const current = fs.readFileSync(targetPath, 'utf8')
+    const formatted = await formatContent(prettier, current, file.rel, prettierOpts)
+    const formattedSha = sha256(formatted)
+
+    if (formattedSha === file.patchedSha) {
+      // Already patched (idempotent re-run): make sure the on-disk file matches.
+      if (formatted !== current) {
+        fs.writeFileSync(targetPath, formatted)
+      }
+      skipped += 1
+      continue
+    }
+
+    if (formattedSha !== file.baseSha) {
+      throw new Error(
+        `[apply-codex-patch] ${file.target} does not match the expected published baseline. ` +
+          'The installed Codex version or Prettier likely changed; re-run `npm run patch-codex`.',
+      )
+    }
+
+    const patchText = fs.readFileSync(patchPath, 'utf8')
+    const result = jsdiff.applyPatch(formatted, patchText)
+    if (result === false || sha256(result) !== file.patchedSha) {
+      throw new Error(
+        `[apply-codex-patch] failed to apply patch for ${file.target}. ` +
+          'Re-run `npm run patch-codex` to regenerate.',
+      )
+    }
+
+    fs.writeFileSync(targetPath, result)
+    applied += 1
+  }
+
+  console.log(
+    `[apply-codex-patch] Codex change ${manifest.change}: applied ${applied}, already-applied ${skipped}.`,
+  )
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error))
+  process.exit(1)
+})
diff --git a/scripts/lib-codex-patch.mjs b/scripts/lib-codex-patch.mjs
new file mode 100644
index 0000000..c7f5f90
--- /dev/null
+++ b/scripts/lib-codex-patch.mjs
@@ -0,0 +1,168 @@
+// Shared helpers for the Codex Gerrit patch workflow.
+//
+// Two scripts use this:
+//   - patch-codex.mjs        (local "make": build the change, emit a tiny diff)
+//   - apply-codex-patch.mjs  (postinstall: format + apply the committed diff)
+//
+// The formatting helpers MUST behave identically in both, because the committed
+// patch is authored against `format(published)` and re-applied to
+// `format(published)` at install time. Same formatter + same input => the patch
+// always lands.
+
+import fs from 'node:fs'
+import path from 'node:path'
+import crypto from 'node:crypto'
+import { fileURLToPath } from 'node:url'
+import { spawnSync } from 'node:child_process'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+export const ROOT = path.resolve(__dirname, '..')
+export const PATCHES_DIR = path.join(ROOT, 'patches', 'codex')
+export const MANIFEST_PATH = path.join(PATCHES_DIR, 'manifest.json')
+
+export const CODEX_PACKAGES = [
+  '@wikimedia/codex',
+  '@wikimedia/codex-design-tokens',
+  '@wikimedia/codex-icons',
+]
+
+// File extensions we can format + diff as text. Anything else (images, fonts)
+// is skipped: a binary asset can't be expressed as a tiny line diff anyway.
+const FORMATTABLE_EXTS = new Set(['.css', '.scss', '.less', '.js', '.cjs', '.mjs', '.json'])
+
+const PARSER_BY_EXT = {
+  '.css': 'css',
+  '.scss': 'scss',
+  '.less': 'less',
+  '.js': 'babel',
+  '.cjs': 'babel',
+  '.mjs': 'babel',
+  '.json': 'json',
+}
+
+export function isFormattable(file) {
+  return FORMATTABLE_EXTS.has(path.extname(file))
+}
+
+export function parserForFile(file) {
+  return PARSER_BY_EXT[path.extname(file)] ?? null
+}
+
+export function run(command, args, opts = {}) {
+  const result = spawnSync(command, args, {
+    cwd: opts.cwd ?? ROOT,
+    stdio: 'pipe',
+    encoding: 'utf8',
+    maxBuffer: 1024 * 1024 * 64,
+  })
+  if (result.status !== 0) {
+    const details = [result.stdout, result.stderr].filter(Boolean).join('\n')
+    throw new Error(`Command failed: ${command} ${args.join(' ')}\n${details || '(no output)'}`)
+  }
+  return (result.stdout ?? '').trim()
+}
+
+// Raw spawn that returns status + output without throwing, for commands whose
+// non-zero exit codes are meaningful (git diff --no-index, git merge-file,
+// git apply --check).
+export function tryRun(command, args, opts = {}) {
+  const result = spawnSync(command, args, {
+    cwd: opts.cwd ?? ROOT,
+    stdio: 'pipe',
+    encoding: 'utf8',
+    maxBuffer: 1024 * 1024 * 64,
+    input: opts.input,
+  })
+  return {
+    status: result.status,
+    stdout: result.stdout ?? '',
+    stderr: result.stderr ?? '',
+  }
+}
+
+export function readPrettierOptions() {
+  const configPath = path.join(ROOT, '.prettierrc.json')
+  if (!fs.existsSync(configPath)) {
+    return {}
+  }
+  return JSON.parse(fs.readFileSync(configPath, 'utf8'))
+}
+
+export function sha256(content) {
+  return crypto.createHash('sha256').update(content).digest('hex')
+}
+
+let cachedJsDiff = null
+export async function loadJsDiff() {
+  if (cachedJsDiff) {
+    return cachedJsDiff
+  }
+  try {
+    cachedJsDiff = await import('diff')
+  } catch {
+    throw new Error(
+      'The "diff" package is required to apply the Codex patch but is not installed. Run `npm install` with dev dependencies.',
+    )
+  }
+  return cachedJsDiff
+}
+
+let cachedPrettier = null
+export async function loadPrettier() {
+  if (cachedPrettier) {
+    return cachedPrettier
+  }
+  try {
+    cachedPrettier = await import('prettier')
+  } catch {
+    throw new Error(
+      'Prettier is required to format Codex files but is not installed. Run `npm install` with dev dependencies.',
+    )
+  }
+  return cachedPrettier
+}
+
+export async function formatContent(prettier, content, file, baseOptions) {
+  const parser = parserForFile(file)
+  if (!parser) {
+    return content
+  }
+  const mod = prettier.default ?? prettier
+  return mod.format(content, { ...baseOptions, parser })
+}
+
+export function prettierVersion(prettier) {
+  const mod = prettier.default ?? prettier
+  return mod.version ?? 'unknown'
+}
+
+// Map a committed target (e.g. "@wikimedia/codex/dist/codex.style.css") to its
+// owning package and the path within that package.
+export function splitTarget(target) {
+  const pkg = CODEX_PACKAGES.find((name) => target === name || target.startsWith(`${name}/`))
+  if (!pkg) {
+    throw new Error(`Target is not a known Codex package file: ${target}`)
+  }
+  const rel = target.slice(pkg.length + 1)
+  return { pkg, rel }
+}
+
+export function installedPackageDir(pkg) {
+  return path.join(ROOT, 'node_modules', pkg)
+}
+
+export function installedTargetPath(target) {
+  const { pkg, rel } = splitTarget(target)
+  return path.join(installedPackageDir(pkg), rel)
+}
+
+export function patchFileName(target) {
+  return `${target.replace(/^@/, '').replace(/[/]/g, '__')}.patch`
+}
+
+export function readManifest() {
+  if (!fs.existsSync(MANIFEST_PATH)) {
+    return null
+  }
+  return JSON.parse(fs.readFileSync(MANIFEST_PATH, 'utf8'))
+}
diff --git a/scripts/patch-codex.mjs b/scripts/patch-codex.mjs
new file mode 100644
index 0000000..71b72f5
--- /dev/null
+++ b/scripts/patch-codex.mjs
@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+// Trial an unmerged Codex Gerrit change in ProtoWiki by committing a tiny,
+// deterministic diff instead of vendored tarballs.
+//
+//   npm run patch-codex -- <gerrit-url-or-change-number>   (build + emit patch)
+//   npm run patch-codex:reset                              (remove the patch)
+//
+// All heavy work (cloning + building Codex) happens locally. The committed
+// output is a small `patches/codex/*` diff that is re-applied at install time
+// by scripts/apply-codex-patch.mjs (wired as `postinstall`), so CI / PR
+// previews reproduce the change with no Codex build step. See
+// .agents/skills/protowiki-update-codex/references/gerrit-patch-trial.md.
+
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import {
+  CODEX_PACKAGES,
+  MANIFEST_PATH,
+  PATCHES_DIR,
+  ROOT,
+  formatContent,
+  installedPackageDir,
+  isFormattable,
+  loadJsDiff,
+  loadPrettier,
+  patchFileName,
+  prettierVersion,
+  readManifest,
+  readPrettierOptions,
+  run,
+  sha256,
+  tryRun,
+} from './lib-codex-patch.mjs'
+
+const CACHE_ROOT = path.join(os.tmpdir(), 'protowiki-codex-gerrit-cache')
+const CODEX_REPO_DIR = path.join(CACHE_ROOT, 'design-codex')
+const GERRIT_REPO = 'https://gerrit.wikimedia.org/r/design/codex'
+
+const PACKAGE_DIRS = new Map([
+  ['@wikimedia/codex', 'packages/codex'],
+  ['@wikimedia/codex-design-tokens', 'packages/codex-design-tokens'],
+  ['@wikimedia/codex-icons', 'packages/codex-icons'],
+])
+
+// Build order matters: codex imports codex-icons' built output, so tokens and
+// icons must be built before codex.
+const CODEX_BUILD_ORDER = [
+  '@wikimedia/codex-design-tokens',
+  '@wikimedia/codex-icons',
+  '@wikimedia/codex',
+]
+
+function parseChangeNumber(input) {
+  if (!input) {
+    throw new Error('Missing Gerrit URL or change number.')
+  }
+  const trimmed = input.trim()
+  if (/^\d+$/.test(trimmed)) {
+    return trimmed
+  }
+  const url = new URL(trimmed)
+  const match =
+    url.pathname.match(/\/\+\/(\d+)(?:\/)?$/) ||
+    url.pathname.match(/\/c\/[^/]+\/[^/]+\/\+\/(\d+)(?:\/)?$/)
+  if (match) {
+    return match[1]
+  }
+  throw new Error(`Could not parse Gerrit change number from: ${input}`)
+}
+
+function stripXssiPrefix(body) {
+  const lines = body.split('\n')
+  return lines[0] === `)]}'` ? lines.slice(1).join('\n') : body
+}
+
+async function fetchJson(url) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Request failed (${response.status}): ${url}`)
+  }
+  return JSON.parse(stripXssiPrefix(await response.text()))
+}
+
+function computePatchRef(changeNumber, patchsetNumber) {
+  const twoDigit = changeNumber.slice(-2).padStart(2, '0')
+  return `refs/changes/${twoDigit}/${changeNumber}/${patchsetNumber}`
+}
+
+function removeInstalledCodex() {
+  for (const pkg of CODEX_PACKAGES) {
+    fs.rmSync(installedPackageDir(pkg), { recursive: true, force: true })
+  }
+}
+
+function removePatches() {
+  fs.rmSync(PATCHES_DIR, { recursive: true, force: true })
+}
+
+function freshRegistryInstall() {
+  // Patches are gone, so the postinstall applier is a no-op and node_modules
+  // ends up holding the pristine published packages (our patch baseline).
+  console.log('Installing pristine published Codex packages')
+  run('npm', ['install'], { cwd: ROOT })
+}
+
+function installedVersion(pkg) {
+  const p = path.join(installedPackageDir(pkg), 'package.json')
+  return JSON.parse(fs.readFileSync(p, 'utf8')).version
+}
+
+function ensureRepo() {
+  fs.mkdirSync(CACHE_ROOT, { recursive: true })
+  if (!fs.existsSync(CODEX_REPO_DIR)) {
+    console.log(`Cloning design/codex into ${CODEX_REPO_DIR}`)
+    run('git', ['clone', '--filter=blob:none', GERRIT_REPO, CODEX_REPO_DIR], { cwd: CACHE_ROOT })
+  } else {
+    run('git', ['remote', 'set-url', 'origin', GERRIT_REPO], { cwd: CODEX_REPO_DIR })
+  }
+}
+
+function installCodexDeps() {
+  console.log('Installing Codex build dependencies')
+  const ci = tryRun('npm', ['ci', '--ignore-scripts'], { cwd: CODEX_REPO_DIR })
+  if (ci.status !== 0) {
+    console.warn('npm ci failed; falling back to npm install --ignore-scripts')
+    run('npm', ['install', '--ignore-scripts'], { cwd: CODEX_REPO_DIR })
+  }
+}
+
+function buildCodex() {
+  for (const pkg of CODEX_BUILD_ORDER) {
+    run('npm', ['run', 'build', '--workspace', pkg], { cwd: CODEX_REPO_DIR })
+  }
+}
+
+// Collect every distributed build artifact of the installed Codex packages:
+// everything under `dist/**` plus the root `theme-*` token files. Patching the
+// full distribution (rather than only the files ProtoWiki imports today) keeps
+// the patched node_modules self-contained — any current or future import sees
+// the change, with no need to re-run when ProtoWiki's imports change. Package
+// metadata (package.json / README / LICENSE) is deliberately excluded.
+function collectCandidates() {
+  const candidates = []
+
+  for (const pkg of CODEX_PACKAGES) {
+    const pkgRoot = installedPackageDir(pkg)
+    if (!fs.existsSync(pkgRoot)) continue
+    const buildPkgDir = path.join(CODEX_REPO_DIR, PACKAGE_DIRS.get(pkg))
+
+    const add = (rel) => {
+      const installedFile = path.join(pkgRoot, rel)
+      if (!isFormattable(installedFile)) return
+      // Token theme files ship at the package root but are built into dist/.
+      const buildRel =
+        !rel.includes('/') && rel.startsWith('theme-') ? path.join('dist', rel) : rel
+      candidates.push({
+        target: `${pkg}/${rel}`,
+        pkg,
+        rel,
+        installedFile,
+        buildFile: path.join(buildPkgDir, buildRel),
+      })
+    }
+
+    const distDir = path.join(pkgRoot, 'dist')
+    if (fs.existsSync(distDir)) {
+      const walk = (dir) => {
+        for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+          const abs = path.join(dir, entry.name)
+          if (entry.isDirectory()) {
+            walk(abs)
+          } else if (entry.isFile()) {
+            add(path.relative(pkgRoot, abs))
+          }
+        }
+      }
+      walk(distDir)
+    }
+
+    for (const entry of fs.readdirSync(pkgRoot, { withFileTypes: true })) {
+      if (entry.isFile() && entry.name.startsWith('theme-')) {
+        add(entry.name)
+      }
+    }
+  }
+
+  return candidates
+}
+
+function snapshotBuild(candidates) {
+  const map = new Map()
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate.buildFile)) {
+      map.set(candidate.target, fs.readFileSync(candidate.buildFile, 'utf8'))
+    }
+  }
+  return map
+}
+
+// 3-way merge: layer the base->other change onto current, returning the merged
+// text. Throws on conflict so we never emit a wrong patch silently.
+function mergeThreeWay(rel, current, base, other) {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'codex-merge-'))
+  try {
+    const cur = path.join(tmp, 'current')
+    const bse = path.join(tmp, 'base')
+    const oth = path.join(tmp, 'other')
+    fs.writeFileSync(cur, current)
+    fs.writeFileSync(bse, base)
+    fs.writeFileSync(oth, other)
+    const res = tryRun('git', ['merge-file', '-p', cur, bse, oth])
+    if (res.status === 0) return res.stdout
+    if (res.status > 0) {
+      throw new Error(
+        `Could not cleanly merge the change into the published ${rel} ` +
+          '(the change overlaps with version differences). Try a newer patchset or re-run.',
+      )
+    }
+    throw new Error(`git merge-file failed for ${rel}: ${res.stderr}`)
+  } finally {
+    fs.rmSync(tmp, { recursive: true, force: true })
+  }
+}
+
+async function makePatch(changeInput) {
+  const changeNumber = parseChangeNumber(changeInput)
+  console.log(`Fetching Gerrit change ${changeNumber}`)
+  const detailUrl = `https://gerrit.wikimedia.org/r/changes/design%2Fcodex~${changeNumber}/detail`
+  const detail = await fetchJson(detailUrl)
+  const patchset = detail.current_revision_number
+  if (!patchset) {
+    throw new Error('Gerrit response did not include current_revision_number')
+  }
+  const ref = computePatchRef(changeNumber, String(patchset))
+  console.log(`Current patchset: ${patchset} (${ref})`)
+
+  // 1. Establish a pristine published baseline in node_modules.
+  removePatches()
+  removeInstalledCodex()
+  freshRegistryInstall()
+  const versions = Object.fromEntries(CODEX_PACKAGES.map((pkg) => [pkg, installedVersion(pkg)]))
+  console.log(`Baseline Codex version: ${versions['@wikimedia/codex']}`)
+
+  // 2. Fetch the change and its parent.
+  ensureRepo()
+  run('git', ['fetch', 'origin', ref], { cwd: CODEX_REPO_DIR })
+  const changeSha = run('git', ['rev-parse', 'FETCH_HEAD'], { cwd: CODEX_REPO_DIR })
+  const parentSha = run('git', ['rev-parse', 'FETCH_HEAD^'], { cwd: CODEX_REPO_DIR })
+
+  // 3. Build the unpatched parent and the patched change.
+  const candidates = collectCandidates()
+
+  console.log('Building Codex at the parent commit (unpatched)')
+  run('git', ['checkout', '--force', '--detach', parentSha], { cwd: CODEX_REPO_DIR })
+  installCodexDeps()
+  buildCodex()
+  const unpatched = snapshotBuild(candidates)
+
+  console.log('Building Codex at the change commit (patched)')
+  run('git', ['checkout', '--force', '--detach', changeSha], { cwd: CODEX_REPO_DIR })
+  buildCodex()
+  const patched = snapshotBuild(candidates)
+
+  // 4. The change's true footprint: files that differ between the two builds.
+  const changed = candidates.filter((candidate) => {
+    const before = unpatched.get(candidate.target)
+    const after = patched.get(candidate.target)
+    return before !== undefined && after !== undefined && before !== after
+  })
+
+  if (changed.length === 0) {
+    throw new Error('The change produced no differences in any distributed Codex file.')
+  }
+
+  // 5. For each changed file, layer the change onto the published file (after
+  // formatting, so the minified single-line CSS diffs by content not file size).
+  const prettier = await loadPrettier()
+  const jsdiff = await loadJsDiff()
+  const prettierOpts = readPrettierOptions()
+
+  fs.mkdirSync(PATCHES_DIR, { recursive: true })
+  const manifestFiles = []
+
+  for (const candidate of changed) {
+    const published = fs.readFileSync(candidate.installedFile, 'utf8')
+    const fmtPublished = await formatContent(prettier, published, candidate.rel, prettierOpts)
+    const fmtBase = await formatContent(
+      prettier,
+      unpatched.get(candidate.target),
+      candidate.rel,
+      prettierOpts,
+    )
+    const fmtOther = await formatContent(
+      prettier,
+      patched.get(candidate.target),
+      candidate.rel,
+      prettierOpts,
+    )
+
+    const merged = mergeThreeWay(candidate.rel, fmtPublished, fmtBase, fmtOther)
+    const fmtMerged = await formatContent(prettier, merged, candidate.rel, prettierOpts)
+    if (fmtMerged === fmtPublished) continue
+
+    const diff = jsdiff.createPatch(candidate.rel, fmtPublished, fmtMerged, '', '')
+    const fileName = patchFileName(candidate.target)
+    fs.writeFileSync(path.join(PATCHES_DIR, fileName), diff)
+    manifestFiles.push({
+      target: candidate.target,
+      package: candidate.pkg,
+      rel: candidate.rel,
+      patch: fileName,
+      // Content hashes of the formatted baseline and patched result, so the
+      // applier can apply (and skip re-applying) deterministically.
+      baseSha: sha256(fmtPublished),
+      patchedSha: sha256(fmtMerged),
+    })
+    console.log(`  patched ${candidate.target}`)
+  }
+
+  if (manifestFiles.length === 0) {
+    throw new Error('No effective changes remained after merging into the published files.')
+  }
+
+  const manifest = {
+    change: changeNumber,
+    patchset,
+    revision: changeSha,
+    generatedAt: new Date().toISOString(),
+    codexVersions: versions,
+    prettierVersion: prettierVersion(prettier),
+    files: manifestFiles,
+  }
+  fs.writeFileSync(MANIFEST_PATH, `${JSON.stringify(manifest, null, 2)}\n`)
+
+  // 6. Apply locally via the same path CI uses.
+  console.log('Applying patch locally')
+  console.log(run('node', ['scripts/apply-codex-patch.mjs'], { cwd: ROOT }))
+
+  console.log(`\nWrote ${manifestFiles.length} patch file(s) to patches/codex/.`)
+  console.log('Commit patches/codex/ so the PR preview reproduces the change.')
+  console.log('To remove the patch: npm run patch-codex:reset')
+}
+
+function reset() {
+  const manifest = readManifest()
+  removePatches()
+  removeInstalledCodex()
+  freshRegistryInstall()
+  if (manifest) {
+    console.log(`Removed Codex patch for change ${manifest.change}; restored published packages.`)
+  } else {
+    console.log('No Codex patch present; reinstalled published packages.')
+  }
+}
+
+function printUsage() {
+  console.log('Usage:')
+  console.log('  npm run patch-codex -- <gerrit-url-or-change-number>')
+  console.log('  npm run patch-codex:reset')
+}
+
+async function main() {
+  const [, , firstArg] = process.argv
+  if (firstArg === '--reset') {
+    reset()
+    return
+  }
+  if (!firstArg) {
+    printUsage()
+    process.exit(1)
+  }
+  await makePatch(firstArg)
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error))
+  process.exit(1)
+})
diff --git a/src/prototypes/example-codex-kitchen-sink/index.vue b/src/prototypes/example-codex-kitchen-sink/index.vue
new file mode 100644
index 0000000..1f0d16d
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/index.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, type Component } from 'vue'
+import { CdxTab, CdxTabs, CdxToastContainer } from '@wikimedia/codex'
+
+import ButtonsSection from './sections/ButtonsSection.vue'
+import FeedbackSection from './sections/FeedbackSection.vue'
+import IconsSection from './sections/IconsSection.vue'
+import InputsSection from './sections/InputsSection.vue'
+import LayoutSection from './sections/LayoutSection.vue'
+import OverlaysSection from './sections/OverlaysSection.vue'
+import TokensSection from './sections/TokensSection.vue'
+import TypographySection from './sections/TypographySection.vue'
+
+definePage({
+  meta: {
+    title: 'Codex playground',
+    description: 'Full Codex component, token, typography, and icon catalogue.',
+  },
+})
+
+const navItems = [
+  { id: 'typography', label: 'Typography' },
+  { id: 'tokens', label: 'Tokens' },
+  { id: 'icons', label: 'Icons' },
+  { id: 'components-buttons', label: 'Buttons' },
+  { id: 'components-inputs', label: 'Inputs' },
+  { id: 'components-feedback', label: 'Feedback' },
+  { id: 'components-overlays', label: 'Overlays' },
+  { id: 'components-layout', label: 'Layout' },
+] as const
+
+const sectionByTab: Record<(typeof navItems)[number]['id'], Component> = {
+  typography: TypographySection,
+  tokens: TokensSection,
+  icons: IconsSection,
+  'components-buttons': ButtonsSection,
+  'components-inputs': InputsSection,
+  'components-feedback': FeedbackSection,
+  'components-overlays': OverlaysSection,
+  'components-layout': LayoutSection,
+}
+
+const activeTab = ref<(typeof navItems)[number]['id']>('typography')
+</script>
+
+<template>
+  <main>
+    <!-- <h1>Codex playground</h1> -->
+
+    <CdxTabs v-model:active="activeTab" class="playground-tabs" aria-label="Sections">
+      <CdxTab v-for="item in navItems" :key="item.id" :name="item.id" :label="item.label">
+        <article>
+          <component :is="sectionByTab[item.id]" />
+        </article>
+      </CdxTab>
+    </CdxTabs>
+
+    <CdxToastContainer />
+  </main>
+</template>
+
+<style scoped>
+main {
+  padding: 6px 0px;
+}
+
+.playground-tabs {
+  /* padding: 0px var(--spacing-100); */
+  margin-left: -4px;
+}
+
+article {
+  padding: 0px var(--spacing-100);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts b/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts
new file mode 100644
index 0000000..e26ecca
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts
@@ -0,0 +1,67 @@
+import { cdxIconAdd, cdxIconEdit, cdxIconTrash } from '@wikimedia/codex-icons'
+import type { ChipInputItem, MenuItemData, SearchResult, TableColumn, TableRow } from '@wikimedia/codex'
+
+export const menuItems: MenuItemData[] = [
+  { label: 'Edit', value: 'edit', icon: cdxIconEdit },
+  { label: 'Delete', value: 'delete', icon: cdxIconTrash },
+  { label: 'Add', value: 'add', icon: cdxIconAdd },
+]
+
+export const selectOptions = [
+  { label: 'Option A', value: 'a' },
+  { label: 'Option B', value: 'b' },
+  { label: 'Option C', value: 'c' },
+]
+
+export const lookupResults: MenuItemData[] = [
+  { label: 'Albert Einstein', value: 'Albert Einstein' },
+  { label: 'Albert Camus', value: 'Albert Camus' },
+  { label: 'Alberta', value: 'Alberta' },
+]
+
+export const chipItems: ChipInputItem[] = [
+  { value: 'alpha' },
+  { value: 'beta' },
+]
+
+export const tableColumns: TableColumn[] = [
+  { id: 'title', label: 'Title', sortable: true },
+  { id: 'status', label: 'Status', sortable: true },
+  { id: 'views', label: 'Views', sortable: true },
+]
+
+export const tableRows: TableRow[] = [
+  { id: '1', title: 'Mont Blanc', status: 'Published', views: 1200 },
+  { id: '2', title: 'Lake Geneva', status: 'Draft', views: 340 },
+  { id: '3', title: 'Rhine', status: 'Published', views: 890 },
+]
+
+export const searchResults: SearchResult[] = [
+  { label: 'Albert Einstein', title: 'Albert Einstein', description: 'German-born theoretical physicist' },
+  { label: 'Albert Camus', title: 'Albert Camus', description: 'French philosopher and author' },
+]
+
+const wetLegImageUrl = `${import.meta.env.BASE_URL}images/wet-leg-o2-infobox.jpg`
+
+export const thumbnailUrl = wetLegImageUrl
+
+export const imageUrl = wetLegImageUrl
+
+export const buttonGroupItems = [
+  { value: 'edit', label: 'Edit' },
+  { value: 'history', label: 'History' },
+  { value: 'watch', label: 'Watch' },
+]
+
+export const buttonGroupLongItems = [
+  { value: 'all', label: 'All' },
+  { value: 'newcomers', label: 'Newcomers' },
+  { value: 'mobile', label: 'Mobile edits' },
+  { value: 'needs-review', label: 'Needs review' },
+]
+
+export const toggleGroupItems = [
+  { value: 'left', label: 'Left' },
+  { value: 'center', label: 'Center' },
+  { value: 'right', label: 'Right' },
+]
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts b/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts
new file mode 100644
index 0000000..31e1e31
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts
@@ -0,0 +1,234 @@
+export type TokenKind =
+  | 'color-text'
+  | 'color-bg'
+  | 'color-border'
+  | 'spacing'
+  | 'radius'
+  | 'font-size'
+  | 'font-weight'
+  | 'font-family'
+  | 'line-height'
+  | 'shadow'
+  | 'opacity'
+  | 'size'
+  | 'generic'
+
+export type TokenFamily =
+  | 'Color'
+  | 'Spacing'
+  | 'Typography'
+  | 'Border'
+  | 'Shadow'
+  | 'Sizing'
+  | 'Opacity'
+  | 'Transition'
+  | 'Z-index'
+  | 'Other'
+
+export interface TokenEntry {
+  name: string
+  value: string
+  category: string
+  kind: TokenKind
+  family: TokenFamily
+}
+
+export interface TokenFamilyGroup {
+  family: TokenFamily
+  categories: { category: string; tokens: TokenEntry[] }[]
+}
+
+export function inferTokenKind(name: string): TokenKind {
+  if (name.startsWith('--background-color-')) return 'color-bg'
+  if (name.startsWith('--border-color-')) return 'color-border'
+  if (name.startsWith('--color-')) return 'color-text'
+  if (name.startsWith('--spacing-')) return 'spacing'
+  if (name.startsWith('--border-radius-')) return 'radius'
+  if (name.startsWith('--font-size-')) return 'font-size'
+  if (name.startsWith('--font-weight-')) return 'font-weight'
+  if (name.startsWith('--font-family-')) return 'font-family'
+  if (name.startsWith('--line-height-')) return 'line-height'
+  if (name.startsWith('--box-shadow-')) return 'shadow'
+  if (name.startsWith('--opacity-')) return 'opacity'
+  if (
+    name.startsWith('--size-') ||
+    name.startsWith('--min-size-') ||
+    name.startsWith('--max-size-') ||
+    name.startsWith('--min-width-') ||
+    name.startsWith('--max-width-') ||
+    name.startsWith('--width-') ||
+    name.startsWith('--height-')
+  ) {
+    return 'size'
+  }
+  return 'generic'
+}
+
+export function inferTokenFamily(name: string): TokenFamily {
+  if (
+    name.startsWith('--color-') ||
+    name.startsWith('--background-color-') ||
+    name.startsWith('--border-color-') ||
+    name.startsWith('--accent-color-')
+  ) {
+    return 'Color'
+  }
+  if (name.startsWith('--spacing-')) return 'Spacing'
+  if (name.startsWith('--font-') || name.startsWith('--line-height-') || name.startsWith('--letter-spacing-')) {
+    return 'Typography'
+  }
+  if (name.startsWith('--border-radius-') || name.startsWith('--border-width-') || name.startsWith('--border-style-')) {
+    return 'Border'
+  }
+  if (name.startsWith('--box-shadow-')) return 'Shadow'
+  if (name.startsWith('--opacity-')) return 'Opacity'
+  if (name.startsWith('--transition-') || name.startsWith('--animation-')) return 'Transition'
+  if (name.startsWith('--z-index-')) return 'Z-index'
+  if (
+    name.startsWith('--size-') ||
+    name.startsWith('--min-') ||
+    name.startsWith('--max-') ||
+    name.startsWith('--width-') ||
+    name.startsWith('--height-')
+  ) {
+    return 'Sizing'
+  }
+  return 'Other'
+}
+
+export function inferTokenCategory(name: string): string {
+  if (name.startsWith('--background-color-')) return 'Background colors'
+  if (name.startsWith('--border-color-')) return 'Border colors'
+  if (name.startsWith('--color-')) return 'Text colors'
+  if (name.startsWith('--spacing-')) return 'Spacing'
+  if (name.startsWith('--border-radius-') || name.startsWith('--border-width-') || name.startsWith('--border-style-')) {
+    return 'Border'
+  }
+  if (name.startsWith('--font-') || name.startsWith('--line-height-') || name.startsWith('--letter-spacing-')) {
+    return 'Typography'
+  }
+  if (name.startsWith('--box-shadow-')) return 'Shadow'
+  if (name.startsWith('--opacity-')) return 'Opacity'
+  if (name.startsWith('--size-') || name.startsWith('--min-') || name.startsWith('--max-') || name.startsWith('--width-') || name.startsWith('--height-')) {
+    return 'Sizing'
+  }
+  if (name.startsWith('--transition-')) return 'Transition'
+  if (name.startsWith('--animation-')) return 'Animation'
+  if (name.startsWith('--z-index-')) return 'Z-index'
+  if (name.startsWith('--cursor-')) return 'Cursor'
+  if (name.startsWith('--filter-')) return 'Filter'
+  if (name.startsWith('--outline-')) return 'Outline'
+  if (name.startsWith('--mix-blend-mode-')) return 'Blend mode'
+  if (name.startsWith('--text-decoration-')) return 'Text decoration'
+  if (name.startsWith('--transform-')) return 'Transform'
+  if (name.startsWith('--accent-color-')) return 'Accent'
+  if (name.startsWith('--position-')) return 'Position'
+  if (name.startsWith('--tab-size-')) return 'Tab size'
+  return 'Other'
+}
+
+export function parseTokensFromCss(css: string): TokenEntry[] {
+  const rootMatch = css.match(/:root\s*\{([\s\S]*?)\n\}/)
+  if (!rootMatch) return []
+
+  const seen = new Set<string>()
+  const tokens: TokenEntry[] = []
+  const re = /^\s*(--[a-z0-9-]+):\s*([^;]+);/gm
+  let match: RegExpExecArray | null
+
+  while ((match = re.exec(rootMatch[1])) !== null) {
+    const name = match[1]
+    if (seen.has(name)) continue
+    seen.add(name)
+    tokens.push({
+      name,
+      value: match[2].trim(),
+      category: inferTokenCategory(name),
+      kind: inferTokenKind(name),
+      family: inferTokenFamily(name),
+    })
+  }
+
+  return tokens.sort((a, b) => a.name.localeCompare(b.name))
+}
+
+const categoryOrder = [
+  'Text colors',
+  'Background colors',
+  'Border colors',
+  'Spacing',
+  'Border',
+  'Typography',
+  'Shadow',
+  'Opacity',
+  'Sizing',
+  'Transition',
+  'Animation',
+  'Z-index',
+  'Cursor',
+  'Filter',
+  'Outline',
+  'Blend mode',
+  'Text decoration',
+  'Transform',
+  'Accent',
+  'Position',
+  'Tab size',
+  'Other',
+] as const
+
+const familyOrder: TokenFamily[] = [
+  'Color',
+  'Spacing',
+  'Typography',
+  'Border',
+  'Shadow',
+  'Sizing',
+  'Opacity',
+  'Transition',
+  'Z-index',
+  'Other',
+]
+
+function groupByCategory(tokens: TokenEntry[]): { category: string; tokens: TokenEntry[] }[] {
+  const map = new Map<string, TokenEntry[]>()
+  for (const token of tokens) {
+    const list = map.get(token.category) ?? []
+    list.push(token)
+    map.set(token.category, list)
+  }
+
+  return categoryOrder
+    .filter((category) => map.has(category))
+    .map((category) => ({ category, tokens: map.get(category)! }))
+}
+
+export function groupTokensByCategory(tokens: TokenEntry[]): { category: string; tokens: TokenEntry[] }[] {
+  return groupByCategory(tokens)
+}
+
+export function groupTokensByFamily(
+  tokens: TokenEntry[],
+  options: { exclude?: TokenFamily[] } = {},
+): TokenFamilyGroup[] {
+  const excluded = new Set(options.exclude ?? [])
+  const byFamily = new Map<TokenFamily, TokenEntry[]>()
+
+  for (const token of tokens) {
+    if (excluded.has(token.family)) continue
+    const list = byFamily.get(token.family) ?? []
+    list.push(token)
+    byFamily.set(token.family, list)
+  }
+
+  return familyOrder
+    .filter((family) => !excluded.has(family) && byFamily.has(family))
+    .map((family) => ({
+      family,
+      categories: groupByCategory(byFamily.get(family)!),
+    }))
+}
+
+export function getTokensForFamily(tokens: TokenEntry[], family: TokenFamily): TokenEntry[] {
+  return tokens.filter((token) => token.family === family)
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue
new file mode 100644
index 0000000..85ecc6d
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+interface Props {
+  label?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="playground-cell">
+    <div class="playground-cell__content">
+      <slot />
+    </div>
+    <code v-if="label" class="playground-cell__label">{{ label }}</code>
+  </div>
+</template>
+
+<style scoped>
+.playground-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.playground-cell__content {
+  min-width: 0;
+}
+
+/* Codex form controls default to min-width: 256px; shrink to fit grid cells. */
+.playground-cell__content :deep(.cdx-text-input),
+.playground-cell__content :deep(.cdx-search-input),
+.playground-cell__content :deep(.cdx-text-area),
+.playground-cell__content :deep(.cdx-select),
+.playground-cell__content :deep(.cdx-combobox),
+.playground-cell__content :deep(.cdx-lookup),
+.playground-cell__content :deep(.cdx-multiselect-lookup),
+.playground-cell__content :deep(.cdx-chip-input) {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.playground-cell__label {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue
new file mode 100644
index 0000000..0ff6e42
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  min?: string
+  dense?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  min: '160px',
+  dense: false,
+})
+</script>
+
+<template>
+  <div
+    class="playground-grid"
+    :class="{ 'playground-grid--dense': dense }"
+    :style="{ '--playground-grid-min': min }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.playground-grid {
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: repeat(auto-fill, minmax(var(--playground-grid-min, 160px), 1fr));
+  align-items: start;
+}
+
+.playground-grid--dense {
+  gap: var(--spacing-50);
+  grid-template-columns: repeat(auto-fill, minmax(var(--playground-grid-min, 120px), 1fr));
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue
new file mode 100644
index 0000000..26e77db
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  id?: string
+  title: string
+}
+
+withDefaults(defineProps<Props>(), {
+  id: undefined,
+})
+</script>
+
+<template>
+  <section :id="id" class="playground-section">
+    <h4 class="playground-section__title">
+      {{ title }}
+    </h4>
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.playground-section {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: var(--spacing-75); */
+}
+
+/* .playground-section__title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+} */
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue b/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue
new file mode 100644
index 0000000..3a86787
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+
+const props = defineProps<{
+  token: TokenEntry
+}>()
+
+const cssVar = computed(() => `var(${props.token.name})`)
+</script>
+
+<template>
+  <div class="token-swatch">
+    <div class="token-swatch__preview" :data-kind="token.kind">
+      <div
+        v-if="token.kind === 'color-text'"
+        class="token-swatch__fill"
+        :style="{ backgroundColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'color-bg'"
+        class="token-swatch__fill"
+        :style="{ backgroundColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'color-border'"
+        class="token-swatch__border-box"
+        :style="{ borderColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'spacing' || token.kind === 'size'"
+        class="token-swatch__bar-track"
+      >
+        <div class="token-swatch__bar" :style="{ width: cssVar }" />
+      </div>
+      <div
+        v-else-if="token.kind === 'radius'"
+        class="token-swatch__radius-box"
+        :style="{ borderRadius: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'font-size'"
+        class="token-swatch__type-sample"
+        :style="{ fontSize: cssVar }"
+      >
+        Aa
+      </div>
+      <div
+        v-else-if="token.kind === 'font-weight'"
+        class="token-swatch__type-sample"
+        :style="{ fontWeight: cssVar }"
+      >
+        Sample
+      </div>
+      <div
+        v-else-if="token.kind === 'font-family'"
+        class="token-swatch__type-sample token-swatch__type-sample--clamp"
+        :style="{ fontFamily: cssVar }"
+      >
+        Aa
+      </div>
+      <div
+        v-else-if="token.kind === 'line-height'"
+        class="token-swatch__line-height"
+        :style="{ lineHeight: cssVar }"
+      >
+        Line one<br />Line two
+      </div>
+      <div
+        v-else-if="token.kind === 'shadow'"
+        class="token-swatch__shadow-box"
+        :style="{ boxShadow: cssVar }"
+      />
+      <div v-else-if="token.kind === 'opacity'" class="token-swatch__opacity">
+        <div class="token-swatch__opacity-base" />
+        <div class="token-swatch__opacity-overlay" :style="{ opacity: cssVar }" />
+      </div>
+      <div v-else class="token-swatch__generic">
+        {{ token.value }}
+      </div>
+    </div>
+    <code class="token-swatch__name">{{ token.name }}</code>
+  </div>
+</template>
+
+<style scoped>
+.token-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.token-swatch__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: var(--spacing-50);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.token-swatch__fill {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: var(--border-radius-base);
+  border: 1px solid var(--border-color-subtle);
+}
+
+.token-swatch__border-box {
+  width: 100%;
+  height: 2.5rem;
+  border: 3px solid transparent;
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-base);
+}
+
+.token-swatch__bar-track {
+  width: 100%;
+  height: 0.5rem;
+  background: var(--background-color-neutral);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__bar {
+  height: 100%;
+  max-width: 100%;
+  background: var(--color-progressive);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__radius-box {
+  width: 3rem;
+  height: 3rem;
+  background: var(--color-progressive);
+}
+
+.token-swatch__type-sample {
+  font-family: var(--font-family-base);
+  color: var(--color-base);
+}
+
+.token-swatch__type-sample--clamp {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.token-swatch__line-height {
+  width: 100%;
+  font-size: var(--font-size-small);
+  color: var(--color-base);
+}
+
+.token-swatch__shadow-box {
+  width: 3rem;
+  height: 3rem;
+  background: var(--background-color-base);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__opacity {
+  position: relative;
+  width: 100%;
+  height: 2.5rem;
+}
+
+.token-swatch__opacity-base,
+.token-swatch__opacity-overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__opacity-base {
+  background: repeating-conic-gradient(var(--border-color-subtle) 0% 25%, transparent 0% 50%) 50% /
+    12px 12px;
+}
+
+.token-swatch__opacity-overlay {
+  background: var(--color-progressive);
+}
+
+.token-swatch__generic {
+  width: 100%;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  word-break: break-all;
+}
+
+.token-swatch__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue
new file mode 100644
index 0000000..e538dd0
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  CdxButton,
+  CdxButtonGroup,
+  CdxIcon,
+  CdxImage,
+  CdxInfoChip,
+  CdxThumbnail,
+  CdxToggleButton,
+  CdxToggleButtonGroup,
+  CdxToggleSwitch,
+} from '@wikimedia/codex'
+import {
+  cdxIconAdd,
+  cdxIconAlert,
+  cdxIconEdit,
+  cdxIconImage,
+  cdxIconSearch,
+} from '@wikimedia/codex-icons'
+import type { ButtonAction, ButtonSize, ButtonWeight } from '@wikimedia/codex'
+
+import {
+  buttonGroupItems,
+  buttonGroupLongItems,
+  imageUrl,
+  thumbnailUrl,
+  toggleGroupItems,
+} from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const actions: ButtonAction[] = ['default', 'progressive', 'destructive']
+const weights: ButtonWeight[] = ['normal', 'primary', 'quiet']
+const sizes: ButtonSize[] = ['small', 'medium', 'large']
+const infoChipStatuses = ['notice', 'warning', 'error', 'success'] as const
+const aspectRatios = ['16:9', '3:2', '4:3', '1:1', '3:4', '2:3'] as const
+
+const buttonVariants = computed(() => {
+  const variants: {
+    action: ButtonAction
+    weight: ButtonWeight
+    size: ButtonSize
+    label: string
+  }[] = []
+  for (const action of actions) {
+    for (const weight of weights) {
+      for (const size of sizes) {
+        variants.push({
+          action,
+          weight,
+          size,
+          label: `${action} / ${weight} / ${size}`,
+        })
+      }
+    }
+  }
+  return variants
+})
+
+const toggleBold = ref(false)
+const toggleBoldDisabled = ref(true)
+const toggleAlignment = ref('center')
+const toggleSwitch = ref(true)
+const toggleSwitchDisabled = ref(false)
+</script>
+
+<template>
+  <PlaygroundSection title="CdxButton">
+    <PlaygroundGrid min="180px">
+      <PlaygroundCell v-for="variant in buttonVariants" :key="variant.label" :label="variant.label">
+        <CdxButton :action="variant.action" :weight="variant.weight" :size="variant.size">
+          Label
+        </CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell
+        v-for="variant in buttonVariants.filter((v) => v.size === 'medium' && v.weight !== 'quiet')"
+        :key="`disabled-${variant.label}`"
+        :label="`${variant.label} / disabled`"
+      >
+        <CdxButton :action="variant.action" :weight="variant.weight" :size="variant.size" disabled>
+          Label
+        </CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="icon + label">
+        <CdxButton action="progressive">
+          <CdxIcon :icon="cdxIconAdd" />
+          Add
+        </CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="icon-only / quiet">
+        <CdxButton weight="quiet" aria-label="Search">
+          <CdxIcon :icon="cdxIconSearch" />
+        </CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="icon-only / large">
+        <CdxButton weight="quiet" size="large" aria-label="Edit">
+          <CdxIcon :icon="cdxIconEdit" />
+        </CdxButton>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxButtonGroup">
+    <PlaygroundGrid min="280px">
+      <PlaygroundCell label="default">
+        <CdxButtonGroup :buttons="buttonGroupItems" />
+      </PlaygroundCell>
+      <PlaygroundCell label="long labels">
+        <CdxButtonGroup :buttons="buttonGroupLongItems" />
+      </PlaygroundCell>
+      <PlaygroundCell label="disabled item">
+        <CdxButtonGroup
+          :buttons="[
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+            { value: 'c', label: 'C', disabled: true },
+          ]"
+        />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxToggleButton">
+    <PlaygroundGrid min="120px">
+      <PlaygroundCell label="off">
+        <CdxToggleButton v-model="toggleBoldDisabled">
+          <CdxIcon :icon="cdxIconEdit" />
+        </CdxToggleButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="on">
+        <CdxToggleButton v-model="toggleBold">
+          <CdxIcon :icon="cdxIconEdit" />
+        </CdxToggleButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="disabled">
+        <CdxToggleButton :model-value="false" disabled>
+          <CdxIcon :icon="cdxIconEdit" />
+        </CdxToggleButton>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxToggleButtonGroup">
+    <PlaygroundGrid min="280px">
+      <PlaygroundCell label="default">
+        <CdxToggleButtonGroup v-model="toggleAlignment" :buttons="toggleGroupItems" />
+      </PlaygroundCell>
+      <PlaygroundCell label="disabled">
+        <CdxToggleButtonGroup
+          model-value="center"
+          :buttons="toggleGroupItems.map((b) => ({ ...b, disabled: true }))"
+        />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxToggleSwitch">
+    <PlaygroundGrid min="180px">
+      <PlaygroundCell label="off">
+        <CdxToggleSwitch v-model="toggleSwitchDisabled">Off</CdxToggleSwitch>
+      </PlaygroundCell>
+      <PlaygroundCell label="on">
+        <CdxToggleSwitch v-model="toggleSwitch">On</CdxToggleSwitch>
+      </PlaygroundCell>
+      <PlaygroundCell label="disabled">
+        <CdxToggleSwitch :model-value="true" disabled>Disabled</CdxToggleSwitch>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxIcon">
+    <PlaygroundGrid min="100px">
+      <PlaygroundCell
+        v-for="size in ['xx-small', 'x-small', 'small', 'medium']"
+        :key="size"
+        :label="size"
+      >
+        <CdxIcon :icon="cdxIconSearch" :size="size" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxInfoChip">
+    <PlaygroundGrid min="140px">
+      <PlaygroundCell v-for="status in infoChipStatuses" :key="status" :label="status">
+        <CdxInfoChip :status="status" :icon="cdxIconAlert">Status</CdxInfoChip>
+      </PlaygroundCell>
+      <PlaygroundCell label="no icon">
+        <CdxInfoChip status="notice">Status</CdxInfoChip>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxThumbnail">
+    <PlaygroundGrid min="120px">
+      <PlaygroundCell label="image">
+        <CdxThumbnail :thumbnail="{ url: thumbnailUrl, width: 80, height: 80 }" />
+      </PlaygroundCell>
+      <PlaygroundCell label="placeholder">
+        <CdxThumbnail :placeholder-icon="cdxIconImage" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxImage">
+    <PlaygroundGrid min="200px">
+      <PlaygroundCell v-for="ratio in aspectRatios" :key="ratio" :label="ratio">
+        <CdxImage :src="imageUrl" alt="Sample" :aspect-ratio="ratio" />
+      </PlaygroundCell>
+      <PlaygroundCell label="object-fit cover">
+        <CdxImage :src="imageUrl" alt="Sample" aspect-ratio="1:1" object-fit="cover" />
+      </PlaygroundCell>
+      <PlaygroundCell label="object-fit contain">
+        <CdxImage :src="imageUrl" alt="Sample" aspect-ratio="1:1" object-fit="contain" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue
new file mode 100644
index 0000000..6e697e8
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  CdxButton,
+  CdxMessage,
+  CdxProgressBar,
+  CdxProgressIndicator,
+  useToast,
+} from '@wikimedia/codex'
+import type { StatusType } from '@wikimedia/codex'
+
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const toast = useToast()
+
+const messageTypes: StatusType[] = ['notice', 'warning', 'error', 'success']
+
+function showToast(type: StatusType) {
+  toast.show({ type, message: 'Toast message', autoDismiss: 3000 })
+}
+</script>
+
+<template>
+    <PlaygroundSection title="CdxMessage">
+      <PlaygroundGrid min="280px">
+        <PlaygroundCell v-for="type in messageTypes" :key="`${type}-block`" :label="`${type} / block`">
+          <CdxMessage :type="type">Message text</CdxMessage>
+        </PlaygroundCell>
+        <PlaygroundCell v-for="type in messageTypes" :key="`${type}-inline`" :label="`${type} / inline`">
+          <CdxMessage :type="type" inline>Message text</CdxMessage>
+        </PlaygroundCell>
+        <PlaygroundCell label="dismissable">
+          <CdxMessage type="notice" allow-user-dismiss dismiss-button-label="Close">
+            Message text
+          </CdxMessage>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxProgressBar">
+      <PlaygroundGrid min="220px">
+        <PlaygroundCell label="default / indeterminate">
+          <CdxProgressBar aria-label="Loading" />
+        </PlaygroundCell>
+        <PlaygroundCell label="inline / indeterminate">
+          <CdxProgressBar inline aria-label="Loading" />
+        </PlaygroundCell>
+        <PlaygroundCell label="determinate / 42">
+          <CdxProgressBar :progress="42" aria-label="Progress" />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxProgressBar disabled aria-label="Loading" />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxProgressIndicator">
+      <PlaygroundGrid min="180px">
+        <PlaygroundCell label="default">
+          <CdxProgressIndicator />
+        </PlaygroundCell>
+        <PlaygroundCell label="inline">
+          <CdxProgressIndicator inline />
+        </PlaygroundCell>
+        <PlaygroundCell label="in button">
+          <CdxButton action="progressive" disabled>
+            <CdxProgressIndicator inline />
+            Loading
+          </CdxButton>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxToast">
+      <PlaygroundGrid min="180px">
+        <PlaygroundCell v-for="type in messageTypes" :key="type" :label="type">
+          <CdxButton @click="showToast(type)">Show</CdxButton>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+</template>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue
new file mode 100644
index 0000000..574b693
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxIcon } from '@wikimedia/codex'
+import * as codexIcons from '@wikimedia/codex-icons'
+import type { IconSize } from '@wikimedia/codex'
+import { cdxIconSearch } from '@wikimedia/codex-icons'
+
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const iconEntries = computed(() =>
+  Object.entries(codexIcons)
+    .filter(([name]) => name.startsWith('cdxIcon'))
+    .sort(([a], [b]) => a.localeCompare(b)),
+)
+
+const iconSizes: IconSize[] = ['xx-small', 'x-small', 'small', 'medium']
+</script>
+
+<template>
+  <PlaygroundSection title="Sizes">
+    <PlaygroundGrid min="100px">
+      <PlaygroundCell v-for="size in iconSizes" :key="size" :label="size">
+        <CdxIcon :icon="cdxIconSearch" :size="size" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="Catalogue">
+    <PlaygroundGrid min="100px" dense>
+      <PlaygroundCell v-for="[name, icon] in iconEntries" :key="name" :label="name">
+        <CdxIcon :icon="icon" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+</template>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/InputsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/InputsSection.vue
new file mode 100644
index 0000000..07c4f0d
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/InputsSection.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  CdxAccordion,
+  CdxCheckbox,
+  CdxChipInput,
+  CdxCombobox,
+  CdxField,
+  CdxLabel,
+  CdxLookup,
+  CdxMultiselectLookup,
+  CdxRadio,
+  CdxSearchInput,
+  CdxSelect,
+  CdxTextArea,
+  CdxTextInput,
+} from '@wikimedia/codex'
+import { cdxIconSearch } from '@wikimedia/codex-icons'
+import type { ValidationStatusType } from '@wikimedia/codex'
+
+import { chipItems, lookupResults, selectOptions } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const textValue = ref('Sample text')
+const textAreaValue = ref('Multiline\nsample text')
+const searchValue = ref('')
+const selectValue = ref('a')
+const comboboxValue = ref('a')
+const lookupSelected = ref<string | null>(null)
+const lookupInput = ref('Albert')
+const multiSelected = ref<string[]>([])
+const multiChips = ref([...chipItems])
+const chips = ref([...chipItems])
+const chipInputValue = ref('')
+const checkboxSingle = ref(false)
+const checkboxGroup = ref<string[]>(['b'])
+const radioValue = ref('draft')
+const accordionOpen = ref(true)
+
+const fieldStatuses: ValidationStatusType[] = ['default', 'warning', 'error', 'success']
+const inputTypes = [
+  'text',
+  'search',
+  'number',
+  'email',
+  'password',
+  'tel',
+  'url',
+  'date',
+  'time',
+  'color',
+] as const
+
+const accordionSeparations = ['none', 'minimal', 'divider', 'outline'] as const
+
+function rejectInvalidChip(value: string | number) {
+  return String(value).length >= 2
+}
+</script>
+
+<template>
+    <PlaygroundSection title="CdxField">
+      <PlaygroundGrid min="240px">
+        <PlaygroundCell v-for="status in fieldStatuses" :key="status" :label="status">
+          <CdxField :status="status" :messages="{ [status]: 'Message' }">
+            <template #label>Label</template>
+            <template #description>Description</template>
+            <CdxTextInput v-model="textValue" />
+            <template #help-text>Help text</template>
+          </CdxField>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxLabel">
+      <PlaygroundGrid min="180px">
+        <PlaygroundCell label="default">
+          <CdxLabel>Label text</CdxLabel>
+        </PlaygroundCell>
+        <PlaygroundCell label="optional">
+          <CdxLabel optional>Optional label</CdxLabel>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxTextInput">
+      <PlaygroundGrid min="220px">
+        <PlaygroundCell label="default">
+          <CdxTextInput v-model="textValue" placeholder="Placeholder" />
+        </PlaygroundCell>
+        <PlaygroundCell label="start-icon">
+          <CdxTextInput v-model="textValue" :start-icon="cdxIconSearch" />
+        </PlaygroundCell>
+        <PlaygroundCell label="clearable">
+          <CdxTextInput v-model="textValue" clearable />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxTextInput model-value="Disabled" disabled />
+        </PlaygroundCell>
+        <PlaygroundCell label="readonly">
+          <CdxTextInput model-value="Readonly" readonly />
+        </PlaygroundCell>
+        <PlaygroundCell v-for="inputType in inputTypes" :key="inputType" :label="inputType">
+          <CdxTextInput :input-type="inputType" :model-value="inputType === 'number' ? 42 : 'Sample'" />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxTextArea">
+      <PlaygroundGrid min="240px">
+        <PlaygroundCell label="default">
+          <CdxTextArea v-model="textAreaValue" :rows="3" />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxTextArea model-value="Disabled" :rows="3" disabled />
+        </PlaygroundCell>
+        <PlaygroundCell label="readonly">
+          <CdxTextArea model-value="Readonly" :rows="3" readonly />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxSearchInput">
+      <PlaygroundGrid min="240px">
+        <PlaygroundCell label="default">
+          <CdxSearchInput v-model="searchValue" placeholder="Search" />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxSearchInput model-value="Disabled" disabled />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxCheckbox">
+      <PlaygroundGrid min="180px">
+        <PlaygroundCell label="unchecked">
+          <CdxCheckbox v-model="checkboxSingle">Checkbox</CdxCheckbox>
+        </PlaygroundCell>
+        <PlaygroundCell label="checked">
+          <CdxCheckbox :model-value="true">Checked</CdxCheckbox>
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxCheckbox :model-value="true" disabled>Disabled</CdxCheckbox>
+        </PlaygroundCell>
+        <PlaygroundCell label="group">
+          <CdxCheckbox v-model="checkboxGroup" input-value="a">A</CdxCheckbox>
+          <CdxCheckbox v-model="checkboxGroup" input-value="b">B</CdxCheckbox>
+          <CdxCheckbox v-model="checkboxGroup" input-value="c">C</CdxCheckbox>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxRadio">
+      <PlaygroundGrid min="180px">
+        <PlaygroundCell label="group">
+          <CdxRadio v-model="radioValue" input-value="published">Published</CdxRadio>
+          <CdxRadio v-model="radioValue" input-value="draft">Draft</CdxRadio>
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxRadio model-value="draft" input-value="draft" disabled>Draft</CdxRadio>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxSelect">
+      <PlaygroundGrid min="220px">
+        <PlaygroundCell label="default">
+          <CdxSelect v-model:selected="selectValue" :menu-items="selectOptions" default-label="Choose" />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxSelect
+            selected="a"
+            :menu-items="selectOptions"
+            default-label="Choose"
+            disabled
+          />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxCombobox">
+      <PlaygroundGrid min="220px">
+        <PlaygroundCell label="default">
+          <CdxCombobox v-model:selected="comboboxValue" :menu-items="selectOptions" />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxCombobox selected="a" :menu-items="selectOptions" disabled />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxLookup">
+      <PlaygroundGrid min="240px">
+        <PlaygroundCell label="default">
+          <CdxLookup
+            v-model:selected="lookupSelected"
+            v-model:input-value="lookupInput"
+            :menu-items="lookupResults"
+          />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxLookup
+            selected="Albert Einstein"
+            input-value="Albert Einstein"
+            :menu-items="lookupResults"
+            disabled
+          />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxMultiselectLookup">
+      <PlaygroundGrid min="280px">
+        <PlaygroundCell label="default">
+          <CdxMultiselectLookup
+            v-model:selected="multiSelected"
+            v-model:input-chips="multiChips"
+            :menu-items="lookupResults"
+          />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxMultiselectLookup
+            :selected="['Albert Einstein']"
+            :input-chips="[{ value: 'Albert Einstein' }]"
+            :menu-items="lookupResults"
+            disabled
+          />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxChipInput">
+      <PlaygroundGrid min="280px">
+        <PlaygroundCell label="default">
+          <CdxChipInput v-model:input-chips="chips" v-model:input-value="chipInputValue" />
+        </PlaygroundCell>
+        <PlaygroundCell label="separate-input">
+          <CdxChipInput
+            v-model:input-chips="chips"
+            separate-input
+          />
+        </PlaygroundCell>
+        <PlaygroundCell label="validator">
+          <CdxChipInput
+            v-model:input-chips="chips"
+            :chip-validator="rejectInvalidChip"
+          />
+        </PlaygroundCell>
+        <PlaygroundCell label="disabled">
+          <CdxChipInput
+            :input-chips="chipItems"
+            disabled
+          />
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+
+    <PlaygroundSection title="CdxAccordion">
+      <PlaygroundGrid min="280px">
+        <PlaygroundCell v-for="separation in accordionSeparations" :key="separation" :label="separation">
+          <CdxAccordion v-model="accordionOpen" :separation="separation">
+            <template #title>Title</template>
+            <template #description>Description</template>
+            <p>Body content</p>
+          </CdxAccordion>
+        </PlaygroundCell>
+        <PlaygroundCell label="open">
+          <CdxAccordion open separation="outline">
+            <template #title>Title</template>
+            <p>Body content</p>
+          </CdxAccordion>
+        </PlaygroundCell>
+      </PlaygroundGrid>
+    </PlaygroundSection>
+</template>
+
+<style scoped>
+:deep(.playground-cell__content > * + *) {
+  margin-top: var(--spacing-35);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/LayoutSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/LayoutSection.vue
new file mode 100644
index 0000000..2e7c517
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/LayoutSection.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  CdxCard,
+  CdxSearchResultTitle,
+  CdxTab,
+  CdxTable,
+  CdxTabs,
+  CdxTypeaheadSearch,
+} from '@wikimedia/codex'
+import { cdxIconBook } from '@wikimedia/codex-icons'
+
+import { searchResults, tableColumns, tableRows, thumbnailUrl } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const activeTab = ref('article')
+const activeTabFramed = ref('article')
+const tableSort = ref({ column: 'title', direction: 'asc' as const })
+</script>
+
+<template>
+  <PlaygroundSection title="CdxCard">
+    <PlaygroundGrid min="240px">
+      <PlaygroundCell label="default">
+        <CdxCard>
+          <template #title>Title</template>
+          <template #description>Description</template>
+        </CdxCard>
+      </PlaygroundCell>
+      <PlaygroundCell label="url">
+        <CdxCard url="#">
+          <template #title>Title</template>
+          <template #description>Description</template>
+        </CdxCard>
+      </PlaygroundCell>
+      <PlaygroundCell label="icon">
+        <CdxCard :icon="cdxIconBook">
+          <template #title>Title</template>
+        </CdxCard>
+      </PlaygroundCell>
+      <PlaygroundCell label="thumbnail">
+        <CdxCard :thumbnail="{ url: thumbnailUrl, width: 40, height: 40 }">
+          <template #title>Title</template>
+        </CdxCard>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxTable">
+    <PlaygroundGrid min="100%">
+      <PlaygroundCell label="default">
+        <CdxTable
+          caption="Table"
+          :columns="tableColumns"
+          :data="tableRows"
+          v-model:sort="tableSort"
+        />
+      </PlaygroundCell>
+      <PlaygroundCell label="paginate">
+        <CdxTable
+          caption="Table"
+          :columns="tableColumns"
+          :data="tableRows"
+          paginate
+          :pagination-size-default="2"
+        />
+      </PlaygroundCell>
+      <PlaygroundCell label="vertical-borders">
+        <CdxTable caption="Table" :columns="tableColumns" :data="tableRows" show-vertical-borders />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxTabs / CdxTab">
+    <PlaygroundGrid min="280px">
+      <PlaygroundCell label="default">
+        <CdxTabs v-model:active="activeTab">
+          <CdxTab name="article" label="Article">
+            <p>Article</p>
+          </CdxTab>
+          <CdxTab name="talk" label="Talk">
+            <p>Talk</p>
+          </CdxTab>
+          <CdxTab name="history" label="History" disabled>
+            <p>History</p>
+          </CdxTab>
+        </CdxTabs>
+      </PlaygroundCell>
+      <PlaygroundCell label="framed">
+        <CdxTabs v-model:active="activeTabFramed" framed>
+          <CdxTab name="article" label="Article">
+            <p>Article</p>
+          </CdxTab>
+          <CdxTab name="talk" label="Talk">
+            <p>Talk</p>
+          </CdxTab>
+        </CdxTabs>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxSearchResultTitle">
+    <PlaygroundGrid min="240px">
+      <PlaygroundCell label="with query">
+        <CdxSearchResultTitle title="Albert Einstein" search-query="Albert" />
+      </PlaygroundCell>
+      <PlaygroundCell label="no query">
+        <CdxSearchResultTitle title="Albert Einstein" />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxTypeaheadSearch">
+    <PlaygroundGrid min="320px">
+      <PlaygroundCell label="default">
+        <CdxTypeaheadSearch
+          id="playground-search"
+          form-action="/"
+          :search-results="searchResults"
+        />
+      </PlaygroundCell>
+      <PlaygroundCell label="use-button">
+        <CdxTypeaheadSearch
+          id="playground-search-button"
+          form-action="/"
+          :search-results="searchResults"
+          use-button
+        />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/OverlaysSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/OverlaysSection.vue
new file mode 100644
index 0000000..ae65791
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/OverlaysSection.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import {
+  CdxButton,
+  CdxDialog,
+  CdxIcon,
+  CdxMenu,
+  CdxMenuButton,
+  CdxMenuItem,
+  CdxPopover,
+  CdxTooltip,
+} from '@wikimedia/codex'
+import { cdxIconAdd, cdxIconEdit, cdxIconEllipsis } from '@wikimedia/codex-icons'
+
+import { menuItems } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+
+const vTooltip = CdxTooltip
+
+const dialogProgressive = ref(false)
+const dialogDestructive = ref(false)
+const dialogCustomFooter = ref(false)
+const dialogSubtitle = ref(false)
+
+const menuExpanded = ref(false)
+const menuSelected = ref<string | null>('edit')
+const menuButtonSelected = ref<string | null>(null)
+
+const popoverOpen = ref(false)
+const popoverAnchor = useTemplateRef<HTMLElement>('popoverAnchor')
+</script>
+
+<template>
+  <PlaygroundSection title="CdxDialog">
+    <PlaygroundGrid min="180px">
+      <PlaygroundCell label="progressive primary">
+        <CdxButton @click="dialogProgressive = true">Open</CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="destructive primary">
+        <CdxButton action="destructive" @click="dialogDestructive = true">Open</CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="custom footer">
+        <CdxButton @click="dialogCustomFooter = true">Open</CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="subtitle">
+        <CdxButton @click="dialogSubtitle = true">Open</CdxButton>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+
+    <CdxDialog
+      v-model:open="dialogProgressive"
+      title="Title"
+      close-button-label="Close"
+      :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+      :default-action="{ label: 'Default' }"
+      dismissable
+      @primary="dialogProgressive = false"
+      @default="dialogProgressive = false"
+    >
+      Body
+    </CdxDialog>
+
+    <CdxDialog
+      v-model:open="dialogDestructive"
+      title="Title"
+      close-button-label="Close"
+      :primary-action="{ label: 'Delete', actionType: 'destructive' }"
+      :default-action="{ label: 'Cancel' }"
+      dismissable
+      @primary="dialogDestructive = false"
+      @default="dialogDestructive = false"
+    >
+      Body
+    </CdxDialog>
+
+    <CdxDialog
+      v-model:open="dialogCustomFooter"
+      title="Title"
+      close-button-label="Close"
+      dismissable
+    >
+      Body
+      <template #footer>
+        <CdxButton weight="quiet" @click="dialogCustomFooter = false">Cancel</CdxButton>
+        <CdxButton action="progressive" :icon="cdxIconAdd" @click="dialogCustomFooter = false">
+          Add
+        </CdxButton>
+      </template>
+    </CdxDialog>
+
+    <CdxDialog
+      v-model:open="dialogSubtitle"
+      title="Title"
+      subtitle="Subtitle"
+      close-button-label="Close"
+      :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+      dismissable
+      @primary="dialogSubtitle = false"
+    >
+      Body
+    </CdxDialog>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxTooltip">
+    <PlaygroundGrid min="160px">
+      <PlaygroundCell label="directive">
+        <CdxButton v-tooltip="'Tooltip text'">Hover</CdxButton>
+      </PlaygroundCell>
+      <PlaygroundCell label="icon">
+        <CdxButton v-tooltip="'Edit'" weight="quiet" aria-label="Edit">
+          <CdxIcon :icon="cdxIconEdit" />
+        </CdxButton>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxMenuItem">
+    <PlaygroundGrid min="200px">
+      <PlaygroundCell label="default">
+        <CdxMenuItem label="Menu item" value="item" />
+      </PlaygroundCell>
+      <PlaygroundCell label="with icon">
+        <CdxMenuItem label="Edit" value="edit" :icon="cdxIconEdit" />
+      </PlaygroundCell>
+      <PlaygroundCell label="disabled">
+        <CdxMenuItem label="Disabled" value="disabled" disabled />
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxMenu">
+    <PlaygroundGrid min="220px">
+      <PlaygroundCell label="expanded">
+        <CdxMenu
+          v-model:expanded="menuExpanded"
+          v-model:selected="menuSelected"
+          :menu-items="menuItems"
+        />
+      </PlaygroundCell>
+      <PlaygroundCell label="show-pending">
+        <CdxMenu
+          v-model:expanded="menuExpanded"
+          v-model:selected="menuSelected"
+          :menu-items="[]"
+          show-pending
+        >
+          <template #pending>Pending</template>
+        </CdxMenu>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxMenuButton">
+    <PlaygroundGrid min="160px">
+      <PlaygroundCell label="default">
+        <CdxMenuButton v-model:selected="menuButtonSelected" :menu-items="menuItems">
+          <CdxIcon :icon="cdxIconEllipsis" />
+        </CdxMenuButton>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+
+  <PlaygroundSection title="CdxPopover">
+    <PlaygroundGrid min="240px">
+      <PlaygroundCell label="open">
+        <CdxButton ref="popoverAnchor" @click="popoverOpen = !popoverOpen">Toggle</CdxButton>
+        <CdxPopover
+          v-model:open="popoverOpen"
+          :anchor="popoverAnchor"
+          title="Title"
+          use-close-button
+          :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+          :default-action="{ label: 'Default' }"
+        >
+          Body
+        </CdxPopover>
+      </PlaygroundCell>
+    </PlaygroundGrid>
+  </PlaygroundSection>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/TokensSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/TokensSection.vue
new file mode 100644
index 0000000..c859ecb
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/TokensSection.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CdxTab, CdxTabs } from '@wikimedia/codex'
+import tokensCss from '../../../../.agents/skills/codex-tokens/assets/tokens.css?raw'
+import { groupTokensByFamily, parseTokensFromCss } from '../lib/parse-tokens'
+import type { TokenFamily } from '../lib/parse-tokens'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import TokenSwatch from '../playground/TokenSwatch.vue'
+
+const families = groupTokensByFamily(parseTokensFromCss(tokensCss), { exclude: ['Typography'] })
+const activeFamily = ref<TokenFamily>(families[0]?.family ?? 'Color')
+</script>
+
+<template>
+  <CdxTabs v-model:active="activeFamily" class="tokens-tabs" aria-label="Token types" framed>
+    <CdxTab
+      v-for="familyGroup in families"
+      :key="familyGroup.family"
+      :name="familyGroup.family"
+      :label="familyGroup.family"
+    >
+      <div class="tokens-family">
+        <template v-if="familyGroup.categories.length === 1">
+          <PlaygroundGrid min="140px" dense>
+            <TokenSwatch
+              v-for="token in familyGroup.categories[0].tokens"
+              :key="token.name"
+              :token="token"
+            />
+          </PlaygroundGrid>
+        </template>
+
+        <template v-else>
+          <PlaygroundSection
+            v-for="group in familyGroup.categories"
+            :key="group.category"
+            :title="group.category"
+          >
+            <PlaygroundGrid min="140px" dense>
+              <TokenSwatch v-for="token in group.tokens" :key="token.name" :token="token" />
+            </PlaygroundGrid>
+          </PlaygroundSection>
+        </template>
+      </div>
+    </CdxTab>
+  </CdxTabs>
+</template>
+
+<style scoped>
+.tokens-tabs {
+  margin-left: -16px;
+}
+
+.tokens-family {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: var(--spacing-200); */
+  padding-top: var(--spacing-100);
+  padding-left: var(--spacing-100);
+}
+
+.tokens-family :deep(h4):first-child {
+  margin-top: var(--spacing-50);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue b/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue
new file mode 100644
index 0000000..3c984d3
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import tokensCss from '../../../../.agents/skills/codex-tokens/assets/tokens.css?raw'
+import { getTokensForFamily, parseTokensFromCss } from '../lib/parse-tokens'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import TokenSwatch from '../playground/TokenSwatch.vue'
+
+const typographyTokens = getTokensForFamily(parseTokensFromCss(tokensCss), 'Typography')
+</script>
+
+<template>
+  <section class="styles-section">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <p>Body</p>
+    <p><small>Small</small></p>
+    <p><cite>Cite</cite></p>
+    <p><figcaption>Figure caption</figcaption></p>
+    <p><code>Code</code></p>
+    <blockquote>Block quote</blockquote>
+    <pre>Pre</pre>
+  </section>
+
+  <PlaygroundSection title="Tokens">
+    <PlaygroundGrid min="140px" dense>
+      <TokenSwatch v-for="token in typographyTokens" :key="token.name" :token="token" />
+    </PlaygroundGrid>
+  </PlaygroundSection>
+</template>
+
+<style scoped>
+.styles-section {
+  padding-top: var(--spacing-100);
+}
+</style>