@vector-im/compound-web 8.3.0 → 8.3.1

package/dist/components/Avatar/Avatar.module.css.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_1jp1e_8";
-const image = "_image_1jp1e_43";
+const avatar = "_avatar_zysgz_8";
+const image = "_image_zysgz_43";
 const styles = {
   avatar,
   image,
-  "avatar-imageless": "_avatar-imageless_1jp1e_54",
-  "stacked-avatars": "_stacked-avatars_1jp1e_107",
-  "clip-path": "_clip-path_1jp1e_126"
+  "avatar-imageless": "_avatar-imageless_zysgz_55",
+  "stacked-avatars": "_stacked-avatars_zysgz_109",
+  "clip-path": "_clip-path_zysgz_128"
 };
 exports.avatar = avatar;
 exports.default = styles;

package/dist/components/Avatar/Avatar.module.css.js

@@ -1,11 +1,11 @@
-const avatar = "_avatar_1jp1e_8";
-const image = "_image_1jp1e_43";
+const avatar = "_avatar_zysgz_8";
+const image = "_image_zysgz_43";
 const styles = {
   avatar,
   image,
-  "avatar-imageless": "_avatar-imageless_1jp1e_54",
-  "stacked-avatars": "_stacked-avatars_1jp1e_107",
-  "clip-path": "_clip-path_1jp1e_126"
+  "avatar-imageless": "_avatar-imageless_zysgz_55",
+  "stacked-avatars": "_stacked-avatars_zysgz_109",
+  "clip-path": "_clip-path_zysgz_128"
 };
 export {
   avatar,

package/dist/style.css

@@ -463,7 +463,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._avatar_1jp1e_8 {
+._avatar_zysgz_8 {
   display: inline-block;
   box-sizing: border-box;
 
@@ -483,7 +483,7 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-button._avatar_1jp1e_8 {
+button._avatar_zysgz_8 {
   /**
    * The avatar can be a button element, we need to reset its style
    */
@@ -493,23 +493,25 @@ button._avatar_1jp1e_8 {
   cursor: pointer;
 }
 
-button._avatar_1jp1e_8:disabled {
+button._avatar_zysgz_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_1jp1e_8,
-._image_1jp1e_43 {
+._avatar_zysgz_8,
+._image_zysgz_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_1jp1e_43 {
+._image_zysgz_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
-._avatar-imageless_1jp1e_54 {
+/* Additional selector for button to raise selector above button.avatar */
+button._avatar-imageless_zysgz_55,
+._avatar-imageless_zysgz_55 {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below
      but this is currently not supported in all browsers */
@@ -520,41 +522,41 @@ button._avatar_1jp1e_8:disabled {
   border: 1px solid var(--cpd-avatar-bg);
 }
 
-._avatar_1jp1e_8[data-color] {
+._avatar_zysgz_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_1jp1e_8[data-color="2"] {
+._avatar_zysgz_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_1jp1e_8[data-color="3"] {
+._avatar_zysgz_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_1jp1e_8[data-color="4"] {
+._avatar_zysgz_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_1jp1e_8[data-color="5"] {
+._avatar_zysgz_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_1jp1e_8[data-color="6"] {
+._avatar_zysgz_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_1jp1e_8[data-type="round"] {
+._avatar_zysgz_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_1jp1e_8[data-type="square"] {
+._avatar_zysgz_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -562,26 +564,26 @@ button._avatar_1jp1e_8:disabled {
  * Stacked avatars 
  */
 
-._stacked-avatars_1jp1e_107::after {
+._stacked-avatars_zysgz_109::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8 {
+._stacked-avatars_zysgz_109 ._avatar_zysgz_8 {
   float: inline-start;
 }
 
-._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8:not(:last-child) {
+._stacked-avatars_zysgz_109 ._avatar_zysgz_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_1jp1e_107 > *:not(:first-child) {
+._stacked-avatars_zysgz_109 > *:not(:first-child) {
   margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
 }
 
-._clip-path_1jp1e_126 {
+._clip-path_zysgz_128 {
   /* In theory the SVG is invisible, but we still need to ensure it doesn't
   affect the page's layout or otherwise make an appearance */
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.3.0",
+  "version": "8.3.1",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -74,7 +74,7 @@
     "@typescript-eslint/parser": "^8.0.0",
     "@vector-im/compound-design-tokens": "^6.0.0",
     "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.0.0",
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^10.0.0",
@@ -98,7 +98,7 @@
     "typescript": "^5.2.2",
     "vite": "^7.0.3",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.0",

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

@@ -51,6 +51,8 @@ button.avatar:disabled {
   overflow: hidden;
 }
 
+/* Additional selector for button to raise selector above button.avatar */
+button.avatar-imageless,
 .avatar-imageless {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below