From 0371fe72daef85340cc331654c73dad2b0f1aaaf Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Thu, 10 Jul 2025 15:20:52 +0200
Subject: [PATCH] Upgrade @vector-im/compound-web as well

---
 frontend/package-lock.json     | 10 +++++-----
 frontend/package.json          |  2 +-
 templates/components/icon.html | 23 ++++++++++++++++++++++-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9454a7594..49863e26c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,7 +15,7 @@
         "@tanstack/react-query": "^5.81.5",
         "@tanstack/react-router": "^1.125.6",
         "@vector-im/compound-design-tokens": "5.0.1",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-web": "^8.2.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "classnames": "^2.5.1",
@@ -5754,9 +5754,9 @@
       }
     },
     "node_modules/@vector-im/compound-web": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-8.1.2.tgz",
-      "integrity": "sha512-F9UyQBwRThwju+STz84iJy6JGWQ7UIxaprstfsGpiyS/3ror4E6m/mfwbrNjT0l3fhrhk6sRiTAMlcBRzYgdMQ==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-8.2.0.tgz",
+      "integrity": "sha512-we+EQ/pw2YCEl7EMPdpeqP3HZpnQcCuOHoiAYKFwF4doXBDENLpTyA8ZdX0cViT3sqvExPT0RHZ2Nlt5Y6dQNQ==",
       "license": "SEE LICENSE IN README.md",
       "dependencies": {
         "@floating-ui/react": "^0.27.0",
@@ -5773,7 +5773,7 @@
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@types/react": "*",
-        "@vector-im/compound-design-tokens": ">=1.6.1 <5.0.0",
+        "@vector-im/compound-design-tokens": ">=1.6.1 <6.0.0",
         "react": "^18 || ^19.0.0"
       },
       "peerDependenciesMeta": {
diff --git a/frontend/package.json b/frontend/package.json
index f74835756..bbb7be613 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,7 +25,7 @@
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-router": "^1.125.6",
     "@vector-im/compound-design-tokens": "5.0.1",
-    "@vector-im/compound-web": "^8.1.2",
+    "@vector-im/compound-web": "^8.2.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "classnames": "^2.5.1",
diff --git a/templates/components/icon.html b/templates/components/icon.html
index b1d10a638..b0f6ca186 100644
--- a/templates/components/icon.html
+++ b/templates/components/icon.html
@@ -202,8 +202,12 @@ done
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"/></svg>
 {% endmacro %}
 
+{% macro earpiece() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2c3.93 0 7 3.07 7 7a1 1 0 0 1-2 0c0-2.8-2.2-5-5-5S9 6.2 9 9c0 .93.29 1.98.82 2.94.71 1.29 1.53 1.92 2.32 2.53.92.71 1.88 1.44 2.39 3 .5 1.5 1 2.01 1.71 2.38.2.09.47.15.76.15 1.1 0 2-.9 2-2a1 1 0 1 1 2 0 4 4 0 0 1-5.64 3.65c-1.36-.71-2.13-1.73-2.73-3.55-.32-.98-.9-1.43-1.71-2.05-.87-.67-1.94-1.5-2.85-3.15C7.38 11.65 7 10.26 7 9c0-3.93 3.07-7 7-7"/><path d="M6.145 1.3a1 1 0 0 1 1.427 1.4A8.97 8.97 0 0 0 5 9c0 2.3.862 4.397 2.281 5.988l.291.312.069.077A1 1 0 0 1 6.22 16.77l-.075-.07-.356-.38A10.96 10.96 0 0 1 3 9c0-2.998 1.2-5.717 3.145-7.7M14 6.5a2.5 2.5 0 0 1 0 5 2.501 2.501 0 0 1 0-5"/></svg>
+{% endmacro %}
+
 {% macro edit_solid() %}
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><mask id="a"><path fill-rule="evenodd" d="m4.393 13.95-.02.02-.42.42a1 1 0 0 0-.264.465l-1.414 5.657a1 1 0 0 0 1.213 1.213l5.657-1.414a1 1 0 0 0 .464-.263L21.363 8.294a2 2 0 0 0 0-2.829l-2.828-2.828a2 2 0 0 0-2.829 0zM17.12 4.052l-2.973 2.972 2.829 2.829 2.972-2.972z" clip-rule="evenodd"/></mask><path fill-rule="evenodd" d="m4.393 13.95-.02.02-.42.42a1 1 0 0 0-.264.465l-1.414 5.657a1 1 0 0 0 1.213 1.213l5.657-1.414a1 1 0 0 0 .464-.263L21.363 8.294a2 2 0 0 0 0-2.829l-2.828-2.828a2 2 0 0 0-2.829 0zM17.12 4.052l-2.973 2.972 2.829 2.829 2.972-2.972z" clip-rule="evenodd"/><path d="m4.373 13.97 1.414 1.414.01-.01zm.02-.02-1.415-1.414-.01.01zm-.44.44 1.414 1.415zm-.264.465 1.94.485zm-1.414 5.657-1.94-.485zm1.213 1.213-.485-1.94zm5.657-1.414.485 1.94zm.464-.263 1.415 1.414zM21.363 8.294 19.95 6.88zm0-2.829 1.414-1.414zm-2.828-2.828L17.12 4.05zm-2.829 0-1.414-1.414zm-1.558 4.386L12.734 5.61 11.32 7.023l1.414 1.414zm2.973-2.972 1.414-1.414-1.415-1.414-1.414 1.414zm-.144 5.8-1.415 1.415 1.415 1.414 1.414-1.414zm2.972-2.971 1.414 1.414 1.414-1.414-1.414-1.415zM5.797 15.375l.02-.02-2.848-2.81-.02.02zm-.43.43.42-.42-2.828-2.83-.42.422zm.263-.465a1 1 0 0 1-.263.465l-2.829-2.828a3 3 0 0 0-.789 1.393zm-1.414 5.657L5.63 15.34l-3.88-.97-1.415 5.657zm-1.213-1.212a1 1 0 0 1 1.213 1.212l-3.88-.97c-.55 2.197 1.44 4.187 3.637 3.638zM8.66 18.37l-5.657 1.415.97 3.88 5.657-1.414zm-.465.263a1 1 0 0 1 .465-.263l.97 3.881a3 3 0 0 0 1.394-.79zM19.95 6.88l2.828 2.828a4 4 0 0 0 0-5.657zm-2.83-2.83 2.83 2.83 2.828-2.829-2.828-2.828zm0 0 2.829-2.828a4 4 0 0 0-5.657 0zM5.807 15.365 17.12 4.05l-2.828-2.828L2.978 12.536zm9.756-6.928 2.972-2.972-2.829-2.828-2.972 2.972zm2.828 0L15.563 5.61l-2.829 2.828 2.829 2.829zm.144-2.972-2.972 2.972 2.828 2.829 2.972-2.972zm-2.829 0 2.829 2.829 2.828-2.829-2.828-2.828zM19.95 6.88 8.195 18.634l2.829 2.828L22.777 9.708z" mask="url(#a)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m4.393 13.95-.02.02-.42.42a1 1 0 0 0-.264.465l-1.414 5.657a1 1 0 0 0 1.213 1.213l5.657-1.414a1 1 0 0 0 .464-.263L21.363 8.294a2 2 0 0 0 0-2.829l-2.828-2.828a2 2 0 0 0-2.829 0zM17.12 4.052l-2.973 2.972 2.829 2.829 2.972-2.972z" clip-rule="evenodd"/></svg>
 {% endmacro %}
 
 {% macro edit() %}
@@ -282,6 +286,10 @@ done
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M1 17.2q0-.85.438-1.562.437-.713 1.162-1.088a14.8 14.8 0 0 1 3.15-1.163A13.8 13.8 0 0 1 9 13q1.65 0 3.25.387 1.6.388 3.15 1.163.724.375 1.162 1.087Q17 16.35 17 17.2v.8q0 .824-.587 1.413A1.93 1.93 0 0 1 15 20H3q-.824 0-1.412-.587A1.93 1.93 0 0 1 1 18zM21 20h-2.55q.274-.45.413-.962Q19 18.525 19 18v-1q0-1.1-.613-2.113-.612-1.012-1.737-1.737 1.275.15 2.4.512 1.125.363 2.1.888.9.5 1.375 1.112T23 17v1q0 .824-.587 1.413A1.93 1.93 0 0 1 21 20M9 12q-1.65 0-2.825-1.175T5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12m10-4q0 1.65-1.175 2.825T15 12q-.275 0-.7-.062a6 6 0 0 1-.7-.138 6 6 0 0 0 1.037-1.775Q15 9.05 15 8t-.363-2.025A6 6 0 0 0 13.6 4.2a3 3 0 0 1 .7-.163Q14.65 4 15 4q1.65 0 2.825 1.175T19 8M3 18h12v-.8a.97.97 0 0 0-.5-.85q-1.35-.675-2.725-1.012a11.6 11.6 0 0 0-5.55 0Q4.85 15.675 3.5 16.35a.97.97 0 0 0-.5.85zm6-8q.825 0 1.412-.588Q11 8.826 11 8q0-.824-.588-1.412A1.93 1.93 0 0 0 9 6q-.825 0-1.412.588A1.93 1.93 0 0 0 7 8q0 .825.588 1.412Q8.175 10 9 10"/></svg>
 {% endmacro %}
 
+{% macro guest() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8.148 4.304a1.04 1.04 0 0 1 1.47 0l1.343 1.344-5.5 5.5a1.04 1.04 0 0 0 0 1.47l5.5 5.5-1.344 1.343a1.04 1.04 0 0 1-1.47 0l-6.843-6.843a1.04 1.04 0 0 1 0-1.47z"/><path d="M14.383 4.304a1.04 1.04 0 0 1 1.469 0l6.844 6.844a1.04 1.04 0 0 1 0 1.47l-6.844 6.843a1.04 1.04 0 0 1-1.469 0L7.54 12.618a1.04 1.04 0 0 1 0-1.47z"/></svg>
+{% endmacro %}
+
 {% macro headphones_off_solid() %}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a7.96 7.96 0 0 0-4.665 1.5l-1.43-1.429A9.96 9.96 0 0 1 12 1c5.523 0 10 4.477 10 10v8.166l-4.934-4.935A2 2 0 0 1 18 14h2v-3a8 8 0 0 0-8-8M4.45 4.443l1.418 1.42-.005.005L16 16.006v-.012l5.253 5.253q.085.085.183.145l-.044.044a1 1 0 0 1-1.56 1.231L19.167 22H18a2 2 0 0 1-2-2v-1.166L4.76 7.594A8 8 0 0 0 4 11v3h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9c0-1.776.463-3.445 1.275-4.89L1.333 4.167a1 1 0 0 1 1.414-1.414L4.444 4.45z"/></svg>
 {% endmacro %}
@@ -638,6 +646,10 @@ done
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 16a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 15V7.85L9.125 9.725q-.3.3-.7.3T7.7 9.7a.93.93 0 0 1-.288-.713A.98.98 0 0 1 7.7 8.3l3.6-3.6q.15-.15.325-.213.175-.062.375-.062t.375.062a.9.9 0 0 1 .325.213l3.6 3.6q.3.3.287.712a.98.98 0 0 1-.287.688q-.3.3-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15q0 .424-.287.713A.97.97 0 0 1 12 16m-6 4q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"/></svg>
 {% endmacro %}
 
+{% macro shield() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414" clip-rule="evenodd"/></svg>
+{% endmacro %}
+
 {% macro sidebar() %}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18 3a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm-8 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8zM8 19H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2z" clip-rule="evenodd"/></svg>
 {% endmacro %}
@@ -801,3 +813,12 @@ done
 {% macro windows() %}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12.589 2.4H21.6v9.011h-9.011zM2.4 12.588h9.011v9.011H2.4zM2.4 2.4h9.011v9.011H2.4zm10.189 10.188H21.6v9.011h-9.011z"/></svg>
 {% endmacro %}
+
+{% macro workspace_solid() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M3.175 19.825Q4.35 21 6 21t2.825-1.175T10 17t-1.175-2.825T6 13t-2.825 1.175T2 17t1.175 2.825m12 0Q16.35 21 18 21t2.825-1.175T22 17t-1.175-2.825T18 13t-2.825 1.175T14 17t1.175 2.825m-6-10Q10.35 11 12 11t2.825-1.175T16 7t-1.175-2.825T12 3 9.175 4.175 8 7t1.175 2.825"/></svg>
+{% endmacro %}
+
+{% macro workspace() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"/></svg>
+{% endmacro %}
+