@vector-im/compound-web 8.2.4 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.2.4",
+  "version": "8.3.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -51,16 +51,16 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
-    "@element-hq/element-web-playwright-common": "^1.4.2",
+    "@element-hq/element-web-playwright-common": "^2.0.0",
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
-    "@storybook/addon-a11y": "^9.0.16",
-    "@storybook/addon-designs": "10.0.2",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/addon-links": "^9.0.16",
-    "@storybook/addon-themes": "^9.0.16",
-    "@storybook/react-vite": "^9.0.16",
+    "@storybook/addon-a11y": "^10.0.0",
+    "@storybook/addon-designs": "11.0.1",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-links": "^10.0.0",
+    "@storybook/addon-themes": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
@@ -68,7 +68,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
-    "@types/node": "^22.0.0",
+    "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
@@ -78,18 +78,18 @@
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-matrix-org": "^2.0.0",
+    "eslint-plugin-matrix-org": "^3.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^9.0.16",
-    "jsdom": "^26.1.0",
+    "eslint-plugin-storybook": "^10.0.0",
+    "jsdom": "^27.0.0",
     "prettier": "3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.0.0",
     "serve": "^14.2.1",
-    "storybook": "^9.0.16",
+    "storybook": "^10.0.0",
     "stylelint": "^16.13.2",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-plugin-defensive-css": "^1.0.0",

package/src/components/ActivityMarker/Pill.module.css

@@ -15,3 +15,9 @@
   display: inline-flex;
   align-items: center;
 }
+
+@media (forced-colors: active) {
+  .pill {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/ActivityMarker/Unread.module.css

@@ -17,3 +17,9 @@
     border-radius: 100%;
   }
 }
+
+@media (forced-colors: active) {
+  .unread div {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/ActivityMarker/UnreadCounter.module.css

@@ -18,3 +18,9 @@
   justify-content: center;
   box-sizing: border-box;
 }
+
+@media (forced-colors: active) {
+  .unread-counter {
+    outline: 1px solid transparent;
+  }
+}

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

@@ -8,7 +8,9 @@ Please see LICENSE files in the repository root for full details.
 .avatar {
   display: inline-block;
   box-sizing: border-box;
-  line-height: var(--cpd-avatar-size);
+
+  /* -2px to account for the border styling below */
+  line-height: calc(var(--cpd-avatar-size) - 2px);
   text-align: center;
   font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);
   text-transform: uppercase;
@@ -55,6 +57,9 @@ button.avatar:disabled {
      but this is currently not supported in all browsers */
   background: var(--cpd-avatar-bg);
   color: var(--cpd-avatar-color);
+
+  /* Additional style to ensure visibility in contrast-mode */
+  border: 1px solid var(--cpd-avatar-bg);
 }
 
 .avatar[data-color] {

package/src/components/Badge/Badge.module.css

@@ -15,6 +15,7 @@ Please see LICENSE files in the repository root for full details.
 
 .badge[data-kind="default"] {
   border: 1px solid var(--cpd-color-alpha-gray-400);
+  outline: none;
   color: var(--cpd-color-gray-1100);
 }
 
@@ -42,3 +43,9 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-alpha-red-300);
   color: var(--cpd-color-red-1100);
 }
+
+@media (forced-colors: active) {
+  .badge {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Button/Button.module.css

@@ -210,3 +210,9 @@ a.button {
 .button[data-kind="tertiary"].destructive[aria-expanded="true"] {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
+
+@media (forced-colors: active) {
+  .button[data-kind="primary"] {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Form/Controls/Checkbox/Checkbox.module.css

@@ -34,9 +34,6 @@ Please see LICENSE files in the repository root for full details.
   border-radius: 4px; /* TODO: Ought to be a token */
   border: 1px solid;
   border-color: var(--cpd-color-border-interactive-primary);
-
-  /** Default, rest state */
-  color: transparent;
 }
 
 .ui svg {
@@ -45,14 +42,20 @@ Please see LICENSE files in the repository root for full details.
 
   /* compensate for the parent border */
   margin: -1px;
+
+  /** Default, rest state */
+  color: transparent;
 }
 
 .input:checked + .ui {
-  color: var(--cpd-color-icon-on-solid-primary);
   background-color: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
 }
 
+.input:checked + .ui svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
 .input:focus-visible + .ui {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
@@ -77,19 +80,22 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-.input[readonly]:checked + .ui {
+.input[readonly]:checked + .ui svg {
   color: var(--cpd-color-icon-secondary);
 }
 
 @media (hover) {
   .input:not([disabled], [readonly], :checked):hover + .ui {
-    color: var(--cpd-color-icon-quaternary);
     border-color: var(--cpd-color-bg-accent-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 
+  .input:not([disabled], [readonly], :checked):hover + .ui svg {
+    color: var(--cpd-color-icon-quaternary);
+  }
+
   .input:not([disabled], [readonly]):checked:hover + .ui {
     border-color: var(--cpd-color-bg-accent-hovered);
     background: var(--cpd-color-bg-accent-hovered);

package/src/components/Form/Controls/Radio/Radio.module.css

@@ -47,15 +47,23 @@ Please see LICENSE files in the repository root for full details.
   block-size: 6px;
   border-radius: 50%;
   background: transparent;
+  box-sizing: border-box;
+
+  /* Additional style to ensure visibility in contrast-mode */
+  border: 1px solid transparent;
+  color: transparent;
 }
 
 .input:checked + .ui {
   background-color: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
+  color: unset;
 }
 
 .input:checked + .ui::after {
   background: var(--cpd-color-icon-on-solid-primary);
+  border-color: var(--cpd-color-icon-on-solid-primary);
+  color: unset;
 }
 
 .input:focus-visible + .ui {
@@ -84,6 +92,8 @@ Please see LICENSE files in the repository root for full details.
 
 .input[readonly]:checked + .ui::after {
   background-color: var(--cpd-color-icon-secondary);
+  border-color: var(--cpd-color-icon-secondary);
+  color: unset;
 }
 
 @media (hover) {
@@ -96,6 +106,8 @@ Please see LICENSE files in the repository root for full details.
 
   .input:not([disabled], [readonly], :checked):hover + .ui::after {
     background: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-icon-quaternary);
+    color: unset;
   }
 
   .input:not([disabled], [readonly]):checked:hover + .ui {

package/src/components/Form/Controls/Toggle/Toggle.module.css

@@ -49,12 +49,18 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .ui::after {
+  --dot-color: var(--cpd-color-icon-secondary);
+
   content: "";
   display: block;
   block-size: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
-  background: var(--cpd-color-icon-secondary);
+  background: var(--dot-color);
+
+  /* Additional style to ensure visibility in contrast-mode */
+  border: 1px solid var(--dot-color);
+  box-sizing: border-box;
   transform: translateX(0);
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
@@ -69,8 +75,9 @@ ring after a simple click */
 }
 
 :checked + .ui::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
+
   transform: translateX(100%);
-  background: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
@@ -95,7 +102,7 @@ ring after a simple click */
 }
 
 .input[readonly] + .ui::after {
-  background: var(--cpd-color-icon-secondary);
+  --dot-color: var(--cpd-color-icon-secondary);
 }
 
 .input[disabled] + .ui {
@@ -104,7 +111,7 @@ ring after a simple click */
 }
 
 .input[disabled] + .ui::after {
-  background: var(--cpd-color-bg-action-primary-disabled);
+  --dot-color: var(--cpd-color-bg-action-primary-disabled);
 }
 
 .input[readonly]:checked + .ui {
@@ -113,7 +120,7 @@ ring after a simple click */
 }
 
 .input[readonly]:checked + .ui::after {
-  background: var(--cpd-color-icon-on-solid-primary);
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
 
 .input[disabled]:checked + .ui {
@@ -122,7 +129,7 @@ ring after a simple click */
 }
 
 .input[disabled]:checked + .ui::after {
-  background: var(--cpd-color-icon-on-solid-primary);
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {

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

@@ -40,3 +40,9 @@ Please see LICENSE files in the repository root for full details.
   background-color: var(--cpd-color-bg-success-subtle);
   color: var(--cpd-color-icon-success-primary);
 }
+
+@media (forced-colors: active) {
+  .content {
+    outline: 1px solid transparent;
+  }
+}

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

@@ -47,13 +47,23 @@ Please see LICENSE files in the repository root for full details.
   inline-size: 33.3333%;
   block-size: 33.333%;
   border-radius: 50%;
-  background: var(--cpd-color-icon-primary);
+  box-sizing: border-box;
+
+  --background-color: var(--cpd-color-icon-primary);
+
+  background-color: var(--background-color);
 }
 
 .indicator-icon[data-indicator="success"]::before {
-  background: var(--cpd-color-icon-success-primary);
+  --background-color: var(--cpd-color-icon-success-primary);
 }
 
 .indicator-icon[data-indicator="critical"]::before {
-  background: var(--cpd-color-icon-critical-primary);
+  --background-color: var(--cpd-color-icon-critical-primary);
+}
+
+@media (forced-colors: active) {
+  .indicator-icon[data-indicator]::before {
+    border: 1px solid var(--background-color);
+  }
 }

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

@@ -90,3 +90,9 @@
   pointer-events: all !important;
   color: var(--cpd-color-text-disabled);
 }
+
+@media (forced-colors: active) {
+  .nav-tab[data-current]::before {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Progress/Progress.module.css

@@ -76,3 +76,9 @@ Please see LICENSE files in the repository root for full details.
   /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */
   background-size: 5.6569px 5.6569px;
 }
+
+@media (forced-colors: active) {
+  .progress-bar-indicator {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/ReleaseAnnouncement/ReleaseAnnouncement.module.css

@@ -53,3 +53,9 @@ Please see LICENSE files in the repository root for full details.
 .arrow {
   fill: var(--cpd-color-bg-action-primary-rest);
 }
+
+@media (forced-colors: active) {
+  .content {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Separator/Separator.module.css

@@ -31,3 +31,9 @@ Please see LICENSE files in the repository root for full details.
   margin-block: var(--cpd-separator-inset);
   inline-size: var(--cpd-separator-size);
 }
+
+@media (forced-colors: active) {
+  .separator {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Toast/Toast.module.css

@@ -13,3 +13,9 @@ Please see LICENSE files in the repository root for full details.
   font-size: var(--cpd-font-body-sm-medium);
   padding: var(--cpd-space-2x) var(--cpd-space-4x);
 }
+
+@media (forced-colors: active) {
+  .toast-container {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/Tooltip/Tooltip.module.css

@@ -34,3 +34,9 @@ Please see LICENSE files in the repository root for full details.
   /* same color as the tooltip background */
   fill: var(--cpd-color-alpha-gray-1400);
 }
+
+@media (forced-colors: active) {
+  .tooltip:not(.invisible) {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/VisualList/VisualList.module.css

@@ -15,3 +15,9 @@ Please see LICENSE files in the repository root for full details.
   border-radius: var(--cpd-space-3x);
   overflow: hidden;
 }
+
+@media (forced-colors: active) {
+  .visual-list {
+    outline: 1px solid transparent;
+  }
+}

package/src/components/VisualList/VisualListItem.module.css

@@ -26,3 +26,9 @@
 .visual-list-item-icon-destructive {
   color: var(--cpd-color-icon-critical-primary);
 }
+
+@media (forced-colors: active) {
+  .visual-list-item {
+    outline: 1px solid transparent;
+  }
+}