@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/utils/platform.cjs

@@ -1,14 +1,15 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/utils/platform.ts
+/**
+* Gets the platform on which the application is running.
+* If the userAgent could not be determined, this will default to "other"
+*/
 function getPlatform() {
-  const userAgent = globalThis.navigator?.userAgent;
-  if (/android/i.test(userAgent)) {
-    return "android";
-  } else if (/iPad|iPhone|iPod|Mac/.test(userAgent) && "ontouchend" in document) {
-    return "ios";
-  } else {
-    return "other";
-  }
+	const userAgent = globalThis.navigator?.userAgent;
+	if (/android/i.test(userAgent)) return "android";
+	else if (/iPad|iPhone|iPod|Mac/.test(userAgent) && "ontouchend" in document) return "ios";
+	else return "other";
 }
+//#endregion
 exports.getPlatform = getPlatform;
-//# sourceMappingURL=platform.cjs.map
+
+//# sourceMappingURL=platform.cjs.map

package/dist/utils/platform.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"platform.cjs","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":";;AAWO,SAAS,cAA2C;AAMzD,QAAM,YAAY,WAAW,WAAW;AAExC,MAAI,WAAW,KAAK,SAAS,GAAG;AAC9B,WAAO;AAAA,EAGT,WACE,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;;"}
+{"version":3,"file":"platform.cjs","names":[],"sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"mappings":";;;;;AAWA,SAAgB,cAA2C;CAMzD,MAAM,YAAY,WAAW,WAAW;AAExC,KAAI,WAAW,KAAK,UAAU,CAC5B,QAAO;UAIP,uBAAuB,KAAK,UAAU,IACtC,gBAAgB,SAEhB,QAAO;KAEP,QAAO"}

package/dist/utils/platform.js

@@ -1,14 +1,15 @@
+//#region src/utils/platform.ts
+/**
+* Gets the platform on which the application is running.
+* If the userAgent could not be determined, this will default to "other"
+*/
 function getPlatform() {
-  const userAgent = globalThis.navigator?.userAgent;
-  if (/android/i.test(userAgent)) {
-    return "android";
-  } else if (/iPad|iPhone|iPod|Mac/.test(userAgent) && "ontouchend" in document) {
-    return "ios";
-  } else {
-    return "other";
-  }
+	const userAgent = globalThis.navigator?.userAgent;
+	if (/android/i.test(userAgent)) return "android";
+	else if (/iPad|iPhone|iPod|Mac/.test(userAgent) && "ontouchend" in document) return "ios";
+	else return "other";
 }
-export {
-  getPlatform
-};
-//# sourceMappingURL=platform.js.map
+//#endregion
+export { getPlatform };
+
+//# sourceMappingURL=platform.js.map

package/dist/utils/platform.js.map

@@ -1 +1 @@
-{"version":3,"file":"platform.js","sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"names":[],"mappings":"AAWO,SAAS,cAA2C;AAMzD,QAAM,YAAY,WAAW,WAAW;AAExC,MAAI,WAAW,KAAK,SAAS,GAAG;AAC9B,WAAO;AAAA,EAGT,WACE,uBAAuB,KAAK,SAAS,KACrC,gBAAgB,UAChB;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"platform.js","names":[],"sources":["../../src/utils/platform.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/**\n * Gets the platform on which the application is running.\n * If the userAgent could not be determined, this will default to \"other\"\n */\nexport function getPlatform(): \"android\" | \"ios\" | \"other\" {\n  // The granularity of this value is kind of arbitrary: it distinguishes exactly\n  // the platforms that this library needs to know about in order to correctly\n  // implement the designs.\n\n  // Some SSR environments don't provide access to this.\n  const userAgent = globalThis.navigator?.userAgent;\n\n  if (/android/i.test(userAgent)) {\n    return \"android\";\n    // We include 'Mac' here and double-check for touch support because iPads on\n    // iOS 13 pretend to be a MacOS desktop\n  } else if (\n    /iPad|iPhone|iPod|Mac/.test(userAgent) &&\n    \"ontouchend\" in document\n  ) {\n    return \"ios\";\n  } else {\n    return \"other\";\n  }\n}\n"],"mappings":";;;;;AAWA,SAAgB,cAA2C;CAMzD,MAAM,YAAY,WAAW,WAAW;AAExC,KAAI,WAAW,KAAK,UAAU,CAC5B,QAAO;UAIP,uBAAuB,KAAK,UAAU,IACtC,gBAAgB,SAEhB,QAAO;KAEP,QAAO"}

package/dist/utils/size.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A t-shirt size.
+ */
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+//# sourceMappingURL=size.d.ts.map

package/dist/utils/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/utils/size.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/utils/string.cjs

@@ -1,22 +1,22 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const MX_USERNAME_PREFIX = "@";
-const MX_ROOM_PREFIX = "#";
-const MX_ALIAS_PREFIX = "+";
-const graphemeSegmenter = new Intl.Segmenter();
+var graphemeSegmenter = new Intl.Segmenter();
+/**
+* returns the first (non-sigil) character of 'name',
+* converted to uppercase
+* @param {string} name
+* @return {string} the first letter
+*/
 function getInitialLetter(name) {
-  if (name.length < 1) {
-    return "";
-  }
-  const initial = name[0];
-  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {
-    name = name.substring(1);
-  }
-  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();
-  return result.done ? "" : result.value.segment;
+	if (name.length < 1) return "";
+	const initial = name[0];
+	if ([
+		"@",
+		"#",
+		"+"
+	].includes(initial)) name = name.substring(1);
+	const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();
+	return result.done ? "" : result.value.segment;
 }
-exports.MX_ALIAS_PREFIX = MX_ALIAS_PREFIX;
-exports.MX_ROOM_PREFIX = MX_ROOM_PREFIX;
-exports.MX_USERNAME_PREFIX = MX_USERNAME_PREFIX;
+//#endregion
 exports.getInitialLetter = getInitialLetter;
-//# sourceMappingURL=string.cjs.map
+
+//# sourceMappingURL=string.cjs.map

package/dist/utils/string.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"string.cjs","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":";;AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAA;AAQ5B,SAAS,iBAAiB,MAAsB;AACrD,MAAI,KAAK,SAAS,GAAG;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AAC3E,WAAO,KAAK,UAAU,CAAC;AAAA,EACzB;AAGA,QAAM,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAA,EAAI,KAAA;AAClE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;;;;;"}
+{"version":3,"file":"string.cjs","names":[],"sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"mappings":"AAWA,IAAM,oBAAoB,IAAI,KAAK,WAAW;;;;;;;AAQ9C,SAAgB,iBAAiB,MAAsB;AACrD,KAAI,KAAK,SAAS,EAChB,QAAO;CAGT,MAAM,UAAU,KAAK;AACrB,KAAI;;;;EAAqD,CAAC,SAAS,QAAQ,CACzE,QAAO,KAAK,UAAU,EAAE;CAI1B,MAAM,SAAS,kBAAkB,QAAQ,KAAK,CAAC,OAAO,WAAW,CAAC,MAAM;AACxE,QAAO,OAAO,OAAO,KAAK,OAAO,MAAM"}

package/dist/utils/string.js

@@ -1,22 +1,22 @@
-const MX_USERNAME_PREFIX = "@";
-const MX_ROOM_PREFIX = "#";
-const MX_ALIAS_PREFIX = "+";
-const graphemeSegmenter = new Intl.Segmenter();
+var graphemeSegmenter = new Intl.Segmenter();
+/**
+* returns the first (non-sigil) character of 'name',
+* converted to uppercase
+* @param {string} name
+* @return {string} the first letter
+*/
 function getInitialLetter(name) {
-  if (name.length < 1) {
-    return "";
-  }
-  const initial = name[0];
-  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {
-    name = name.substring(1);
-  }
-  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();
-  return result.done ? "" : result.value.segment;
+	if (name.length < 1) return "";
+	const initial = name[0];
+	if ([
+		"@",
+		"#",
+		"+"
+	].includes(initial)) name = name.substring(1);
+	const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();
+	return result.done ? "" : result.value.segment;
 }
-export {
-  MX_ALIAS_PREFIX,
-  MX_ROOM_PREFIX,
-  MX_USERNAME_PREFIX,
-  getInitialLetter
-};
-//# sourceMappingURL=string.js.map
+//#endregion
+export { getInitialLetter };
+
+//# sourceMappingURL=string.js.map

package/dist/utils/string.js.map

@@ -1 +1 @@
-{"version":3,"file":"string.js","sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"names":[],"mappings":"AAOO,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAE/B,MAAM,oBAAoB,IAAI,KAAK,UAAA;AAQ5B,SAAS,iBAAiB,MAAsB;AACrD,MAAI,KAAK,SAAS,GAAG;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,KAAK,CAAC;AACtB,MAAI,CAAC,oBAAoB,gBAAgB,eAAe,EAAE,SAAS,OAAO,GAAG;AAC3E,WAAO,KAAK,UAAU,CAAC;AAAA,EACzB;AAGA,QAAM,SAAS,kBAAkB,QAAQ,IAAI,EAAE,OAAO,QAAQ,EAAA,EAAI,KAAA;AAClE,SAAO,OAAO,OAAO,KAAK,OAAO,MAAM;AACzC;"}
+{"version":3,"file":"string.js","names":[],"sources":["../../src/utils/string.ts"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nexport const MX_USERNAME_PREFIX = \"@\";\nexport const MX_ROOM_PREFIX = \"#\";\nexport const MX_ALIAS_PREFIX = \"+\";\n\nconst graphemeSegmenter = new Intl.Segmenter();\n\n/**\n * returns the first (non-sigil) character of 'name',\n * converted to uppercase\n * @param {string} name\n * @return {string} the first letter\n */\nexport function getInitialLetter(name: string): string {\n  if (name.length < 1) {\n    return \"\";\n  }\n\n  const initial = name[0];\n  if ([MX_USERNAME_PREFIX, MX_ROOM_PREFIX, MX_ALIAS_PREFIX].includes(initial)) {\n    name = name.substring(1);\n  }\n\n  // rely on a grapheme cluster splitter so that we don't break apart compound emojis\n  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();\n  return result.done ? \"\" : result.value.segment;\n}\n"],"mappings":"AAWA,IAAM,oBAAoB,IAAI,KAAK,WAAW;;;;;;;AAQ9C,SAAgB,iBAAiB,MAAsB;AACrD,KAAI,KAAK,SAAS,EAChB,QAAO;CAGT,MAAM,UAAU,KAAK;AACrB,KAAI;;;;EAAqD,CAAC,SAAS,QAAQ,CACzE,QAAO,KAAK,UAAU,EAAE;CAI1B,MAAM,SAAS,kBAAkB,QAAQ,KAAK,CAAC,OAAO,WAAW,CAAC,MAAM;AACxE,QAAO,OAAO,OAAO,KAAK,OAAO,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.4.0",
+  "version": "9.0.1",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -55,12 +55,12 @@
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
-    "@storybook/addon-a11y": "^10.0.0",
-    "@storybook/addon-designs": "11.1.2",
-    "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-links": "^10.0.0",
-    "@storybook/addon-themes": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
+    "@storybook/addon-a11y": "^10.3.1",
+    "@storybook/addon-designs": "11.1.3",
+    "@storybook/addon-docs": "^10.3.1",
+    "@storybook/addon-links": "^10.3.1",
+    "@storybook/addon-themes": "^10.3.1",
+    "@storybook/react-vite": "^10.3.1",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
@@ -72,8 +72,8 @@
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vector-im/compound-design-tokens": "^6.0.0",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@vector-im/compound-design-tokens": "^10.1.0",
+    "@vitejs/plugin-react": "^6.0.0",
     "@vitest/coverage-v8": "^4.0.0",
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
@@ -82,21 +82,21 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "prettier": "3.8.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.0.0",
     "serve": "^14.2.1",
-    "storybook": "^10.0.0",
+    "storybook": "^10.3.1",
     "stylelint": "^17.0.0",
     "stylelint-config-standard": "^40.0.0",
-    "stylelint-plugin-defensive-css": "^1.0.0",
+    "stylelint-plugin-defensive-css": "^2.0.0",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.0",
-    "typescript": "^5.2.2",
-    "vite": "^7.0.3",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.0"
   },
@@ -115,7 +115,7 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@vector-im/compound-design-tokens": ">=1.6.1 <7.0.0",
+    "@vector-im/compound-design-tokens": ">=1.6.1 <11.0.0",
     "react": "^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {

package/src/components/Avatar/Avatar.module.css

@@ -122,7 +122,7 @@ button.avatar-imageless,
 }
 
 .stacked-avatars > *:not(:first-child) {
-  margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
+  margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);
 }
 
 .clip-path {

package/src/components/Avatar/avatar-clip.mask.svg

@@ -1,5 +1,6 @@
 <!--
 Copyright 2023 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
@@ -11,11 +12,6 @@ Please see LICENSE files in the repository root for full details.
         All values below need to be between 0 and 1
         for objectBoundingBox to work
      -->
-    <path d="
-        M 0.875 0.16666
-        A 0.5 0.5 0 1 0 0.875 0.83333
-        Q 0.65 0.5 0.875 0.16666
-        Z
-     "/>
+    <path d="M 0,0 V 1 H 0.7683594 A 0.6,0.6 0 0 1 0.5,0.5 0.6,0.6 0 0 1 0.7683594,0 Z" />
   </clipPath>
 </svg>

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
     gap: var(--cpd-space-1x);
 
     /* override list styles */
-    list-style: none;
+    list-style-type: "";
     margin: 0;
     padding: 0;
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -108,7 +108,7 @@ function Page({ page, isLastPage, onClick }: PageProps): JSX.Element {
         </span>
       ) : (
         <Link
-          size="small"
+          size="sm"
           role="button"
           onClick={onClick}
           onKeyDown={onKeyDown}

package/src/components/Button/Button.tsx

@@ -15,6 +15,7 @@ import React, {
 } from "react";
 import styles from "./Button.module.css";
 import { UnstyledButton, type UnstyledButtonPropsFor } from "./UnstyledButton";
+import type { Size } from "../../utils/size";
 
 interface ButtonComponent {
   // With the explicit `as` prop
@@ -35,7 +36,7 @@ type ButtonOwnProps = PropsWithChildren<{
   /**
    * The t-shirt size of the button.
    */
-  size?: "sm" | "lg";
+  size?: Size & ("sm" | "lg");
 
   /**
    * Whether the button is an icon only button.

package/src/components/Dropdown/Dropdown.module.css

@@ -81,7 +81,7 @@ Please see LICENSE files in the repository root for full details.
       cursor: pointer;
 
       li {
-        list-style: none;
+        list-style-type: "";
         font: var(--cpd-font-body-md-medium);
         padding: var(--cpd-space-3x) var(--cpd-space-4x);
         border-block-end: 1px solid var(--cpd-color-gray-300);

package/src/components/Icon/BigIcon/BigIcon.module.css

@@ -5,12 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-.content {
+.big-icon {
   display: inline-flex;
-  background-color: var(--cpd-color-bg-subtle-secondary);
   padding: var(--cpd-space-4x);
   border-radius: var(--cpd-space-2x);
-  color: var(--cpd-color-icon-secondary);
 
   > svg {
     inline-size: 32px;
@@ -18,11 +16,11 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-.content[data-size="medium"] {
+.big-icon[data-size="md"] {
   padding: var(--cpd-space-3x);
 }
 
-.content[data-size="small"] {
+.big-icon[data-size="sm"] {
   padding: var(--cpd-space-3x);
 
   > svg {
@@ -31,18 +29,23 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-.destructive {
+.big-icon[data-kind="primary"] {
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-icon-primary);
+}
+
+.big-icon[data-kind="critical"] {
   background-color: var(--cpd-color-bg-critical-subtle);
   color: var(--cpd-color-icon-critical-primary);
 }
 
-.success {
+.big-icon[data-kind="success"] {
   background-color: var(--cpd-color-bg-success-subtle);
   color: var(--cpd-color-icon-success-primary);
 }
 
 @media (forced-colors: active) {
-  .content {
+  .big-icon {
     outline: 1px solid transparent;
   }
 }

package/src/components/Icon/BigIcon/BigIcon.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type PropsWithChildren } from "react";
 import styles from "./BigIcon.module.css";
 import classNames from "classnames";
+import type { Size } from "../../../utils/size";
 
 interface BigIconProps {
   /**
@@ -15,36 +16,28 @@ interface BigIconProps {
    */
   className?: string;
   /**
-   * The size of the icon.
-   * @default "large"
+   * The t-shirt size of the icon.
+   * @default "lg"
    */
-  size?: "small" | "medium" | "large";
+  size?: Size & ("sm" | "md" | "lg");
   /**
-   * Whether this button triggers a destructive action.
-   * @default false
+   * The color variant of the icon.
+   * @default "primary"
    */
-  destructive?: boolean;
-  /**
-   * Whether this button triggers a success action.
-   * @default false
-   */
-  success?: boolean;
+  kind?: "primary" | "critical" | "success";
 }
 
 export function BigIcon({
   className,
-  size = "large",
-  destructive = false,
-  success = false,
+  size = "lg",
+  kind = "primary",
   children,
 }: PropsWithChildren<BigIconProps>): JSX.Element {
   return (
     <div
-      className={classNames(styles.content, className, {
-        [styles.destructive]: destructive,
-        [styles.success]: success,
-      })}
+      className={classNames(styles["big-icon"], className)}
       data-size={size}
+      data-kind={kind}
     >
       {React.Children.only(children)}
     </div>

package/src/components/Link/Link.module.css

@@ -44,6 +44,10 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-text-critical-primary);
 }
 
-.link[data-size="small"] {
+.link[data-size="md"] {
+  font-size: var(--cpd-font-size-body-md);
+}
+
+.link[data-size="sm"] {
   font-size: var(--cpd-font-size-body-sm);
 }

package/src/components/Link/Link.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { forwardRef, type PropsWithChildren } from "react";
 import styles from "./Link.module.css";
 import classNames from "classnames";
+import type { Size } from "../../utils/size";
 
 type LinkProps = {
   /**
@@ -15,15 +16,15 @@ type LinkProps = {
    */
   className?: string;
   /**
-   * The type of link.
+   * The color variant of the link.
    * @default "primary"
    */
   kind?: "primary" | "critical";
   /**
-   * The size of link.
-   * @default "medium"
+   * The t-shirt size of the link.
+   * @default "md"
    */
-  size?: "small" | "medium";
+  size?: Size & ("sm" | "md");
 } & Omit<React.HTMLProps<HTMLAnchorElement>, "rel" | "size">;
 
 /**
@@ -31,7 +32,7 @@ type LinkProps = {
  */
 export const Link = forwardRef<HTMLAnchorElement, PropsWithChildren<LinkProps>>(
   function Link(
-    { children, className, kind = "primary", size = "medium", ...props },
+    { children, className, kind = "primary", size = "md", ...props },
     ref,
   ) {
     return (

package/src/components/Nav/Nav.module.css

@@ -17,7 +17,7 @@
   justify-content: flex-start;
   align-items: center;
   gap: var(--cpd-space-3x);
-  list-style: none;
+  list-style-type: "";
   padding: 0;
   margin: 0;
 }

package/src/components/PageHeader/PageHeader.module.css

@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cpd-space-2x);
+  max-inline-size: 480px;
+}
+
+.header[data-size="md"] .icon {
+  margin-block-end: var(--cpd-space-2x);
+}
+
+.header[data-size="lg"] .icon {
+  margin-block-end: var(--cpd-space-4x);
+}
+
+.header > h1 {
+  margin: 0;
+  text-align: center;
+}
+
+.header > p {
+  color: var(--cpd-color-text-secondary);
+  text-align: center;
+  margin: 0;
+}
+
+.header[data-size="md"] > p {
+  font: var(--cpd-font-body-md-regular);
+}
+
+.header[dat-size="lg"] > p {
+  font: var(--cpd-font-body-lg-regular);
+}

package/src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,67 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import classnames from "classnames";
+import React, {
+  forwardRef,
+  type ComponentType,
+  type PropsWithChildren,
+  type ReactNode,
+  type SVGAttributes,
+} from "react";
+import styles from "./PageHeader.module.css";
+import { BigIcon } from "../Icon/BigIcon";
+import { Heading } from "../Typography/Heading";
+
+type PageHeaderProps = {
+  Icon: ComponentType<SVGAttributes<SVGElement>>;
+  /**
+   * The heading text.
+   */
+  heading: string;
+  /**
+   * The t-shirt size of the header.
+   * @default "lg"
+   */
+  size?: "md" | "lg";
+  /**
+   * The contents of the header. At a minimum, this should include a description
+   * wrapped in a `<p>` element.
+   */
+  children: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  function PageHeader(
+    {
+      children,
+      className,
+      Icon,
+      heading,
+      size = "lg",
+      ...props
+    }: PropsWithChildren<PageHeaderProps>,
+    ref,
+  ) {
+    return (
+      <div
+        {...props}
+        className={classnames(styles.header, className)}
+        ref={ref}
+        data-size={size}
+      >
+        <BigIcon size={size} className={styles.icon}>
+          <Icon aria-hidden />
+        </BigIcon>
+        <Heading as="h1" weight="semibold" size={size === "lg" ? "md" : "sm"}>
+          {heading}
+        </Heading>
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/Progress/Progress.tsx

@@ -11,10 +11,11 @@ import classNames from "classnames";
 import styles from "./Progress.module.css";
 
 import { Root, Indicator } from "@radix-ui/react-progress";
+import type { Size } from "../../utils/size";
 
 type ProgressProps = {
   /** The size variant of the progress bar */
-  size: "sm" | "lg";
+  size: Size & ("sm" | "lg");
 
   /**
    * The colour variant to use for the progress bar indicator