@vector-im/compound-web 8.2.4 → 8.3.0

package/dist/style.css

@@ -361,7 +361,7 @@ Please see LICENSE files in the repository root for full details.
  * dot plus the stroke (dimensions calculated from the figma).
  */
 
-._indicator-icon_zr2a0_17 {
+._indicator-icon_147l5_17 {
   /* This is called 'button size' but the docs say 'icon size' */
   inline-size: var(--cpd-icon-button-size);
   block-size: var(--cpd-icon-button-size);
@@ -370,19 +370,19 @@ Please see LICENSE files in the repository root for full details.
   position: relative;
 }
 
-._indicator-icon_zr2a0_17 svg {
+._indicator-icon_147l5_17 svg {
   inline-size: 100%;
   block-size: 100%;
 }
 
-._indicator-icon_zr2a0_17[data-indicator] svg {
+._indicator-icon_147l5_17[data-indicator] svg {
   mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0%200v24h24v-16.359a6%206%200%200%201-2%200.35938%206%206%200%200%201-6-6%206%206%200%200%201%200.35938-2h-16.359z'%20fill='%23000'%20stroke-width='0'/%3e%3c/svg%3e");
   mask-position: center center;
   mask-repeat: no-repeat;
   mask-size: 100%;
 }
 
-._indicator-icon_zr2a0_17[data-indicator]::before {
+._indicator-icon_147l5_17[data-indicator]::before {
   content: "";
   position: absolute;
 
@@ -394,15 +394,25 @@ 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_147l5_17[data-indicator="success"]::before {
+  --background-color: var(--cpd-color-icon-success-primary);
 }
 
-._indicator-icon_zr2a0_17[data-indicator="success"]::before {
-  background: var(--cpd-color-icon-success-primary);
+._indicator-icon_147l5_17[data-indicator="critical"]::before {
+  --background-color: var(--cpd-color-icon-critical-primary);
 }
 
-._indicator-icon_zr2a0_17[data-indicator="critical"]::before {
-  background: var(--cpd-color-icon-critical-primary);
+@media (forced-colors: active) {
+  ._indicator-icon_147l5_17[data-indicator]::before {
+    border: 1px solid var(--background-color);
+  }
 }
 /*
 Copyright 2023, 2024 New Vector Ltd.
@@ -411,7 +421,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._tooltip_6ode6_8 {
+._tooltip_1nqnq_8 {
   font: var(--cpd-font-body-xs-medium);
   padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
   background: var(--cpd-color-alpha-gray-1400);
@@ -424,22 +434,28 @@ Please see LICENSE files in the repository root for full details.
   cursor: pointer;
 }
 
-._tooltip_6ode6_8._invisible_6ode6_21 {
+._tooltip_1nqnq_8._invisible_1nqnq_21 {
   /* Hide the tooltip in a way that allows it to act as an accessible label,
   even when invisible */
   clip-path: inset(50%);
   pointer-events: none;
 }
 
-._caption_6ode6_28 {
+._caption_1nqnq_28 {
   font-weight: var(--cpd-font-weight-regular);
   color: var(--cpd-color-text-secondary);
 }
 
-._arrow_6ode6_33 {
+._arrow_1nqnq_33 {
   /* same color as the tooltip background */
   fill: var(--cpd-color-alpha-gray-1400);
 }
+
+@media (forced-colors: active) {
+  ._tooltip_1nqnq_8:not(._invisible_1nqnq_21) {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -447,10 +463,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._avatar_1qbcf_8 {
+._avatar_1jp1e_8 {
   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;
@@ -465,7 +483,7 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-button._avatar_1qbcf_8 {
+button._avatar_1jp1e_8 {
   /**
    * The avatar can be a button element, we need to reset its style
    */
@@ -475,65 +493,68 @@ button._avatar_1qbcf_8 {
   cursor: pointer;
 }
 
-button._avatar_1qbcf_8:disabled {
+button._avatar_1jp1e_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_1qbcf_8,
-._image_1qbcf_41 {
+._avatar_1jp1e_8,
+._image_1jp1e_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_1qbcf_41 {
+._image_1jp1e_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
-._avatar-imageless_1qbcf_52 {
+._avatar-imageless_1jp1e_54 {
   /* 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 */
   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_1qbcf_8[data-color] {
+._avatar_1jp1e_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_1qbcf_8[data-color="2"] {
+._avatar_1jp1e_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_1qbcf_8[data-color="3"] {
+._avatar_1jp1e_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_1qbcf_8[data-color="4"] {
+._avatar_1jp1e_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_1qbcf_8[data-color="5"] {
+._avatar_1jp1e_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_1qbcf_8[data-color="6"] {
+._avatar_1jp1e_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_1qbcf_8[data-type="round"] {
+._avatar_1jp1e_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_1qbcf_8[data-type="square"] {
+._avatar_1jp1e_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -541,26 +562,26 @@ button._avatar_1qbcf_8:disabled {
  * Stacked avatars 
  */
 
-._stacked-avatars_1qbcf_102::after {
+._stacked-avatars_1jp1e_107::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8 {
+._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8 {
   float: inline-start;
 }
 
-._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8:not(:last-child) {
+._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_1qbcf_102 > *:not(:first-child) {
+._stacked-avatars_1jp1e_107 > *:not(:first-child) {
   margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
 }
 
-._clip-path_1qbcf_121 {
+._clip-path_1jp1e_126 {
   /* 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;
@@ -573,7 +594,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._badge_1t12g_8 {
+._badge_18gm1_8 {
   display: inline-flex;
   gap: var(--cpd-space-1x);
   align-items: center;
@@ -581,35 +602,42 @@ Please see LICENSE files in the repository root for full details.
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
 }
 
-._badge_1t12g_8[data-kind="default"] {
+._badge_18gm1_8[data-kind="default"] {
   border: 1px solid var(--cpd-color-alpha-gray-400);
+  outline: none;
   color: var(--cpd-color-gray-1100);
 }
 
-._badge_1t12g_8[data-kind="grey"] {
+._badge_18gm1_8[data-kind="grey"] {
   background: var(--cpd-color-alpha-gray-300);
   color: var(--cpd-color-gray-1100);
 }
 
-._badge_1t12g_8[data-kind="on-solid"] {
+._badge_18gm1_8[data-kind="on-solid"] {
   background: var(--cpd-color-alpha-gray-1200);
   color: var(--cpd-color-text-on-solid-primary);
 }
 
-._badge_1t12g_8[data-kind="blue"] {
+._badge_18gm1_8[data-kind="blue"] {
   background: var(--cpd-color-alpha-blue-300);
   color: var(--cpd-color-blue-1100);
 }
 
-._badge_1t12g_8[data-kind="green"] {
+._badge_18gm1_8[data-kind="green"] {
   background: var(--cpd-color-alpha-green-300);
   color: var(--cpd-color-green-1100);
 }
 
-._badge_1t12g_8[data-kind="red"] {
+._badge_18gm1_8[data-kind="red"] {
   background: var(--cpd-color-alpha-red-300);
   color: var(--cpd-color-red-1100);
 }
+
+@media (forced-colors: active) {
+  ._badge_18gm1_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -997,7 +1025,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1e0uz_10 {
+._container_1qhtc_10 {
   --size: 20px;
 
   display: grid;
@@ -1005,21 +1033,21 @@ Please see LICENSE files in the repository root for full details.
   block-size: var(--size);
 }
 
-._input_1e0uz_18,
-._ui_1e0uz_19 {
+._input_1qhtc_18,
+._ui_1qhtc_19 {
   box-sizing: border-box;
   grid-area: 1/1;
   inline-size: var(--size);
   block-size: var(--size);
 }
 
-._input_1e0uz_18 {
+._input_1qhtc_18 {
   opacity: 0;
   margin: 0;
   cursor: pointer;
 }
 
-._ui_1e0uz_19 {
+._ui_1qhtc_19 {
   pointer-events: none;
   border-radius: 50%;
   border: 1px solid;
@@ -1031,79 +1059,91 @@ Please see LICENSE files in the repository root for full details.
   justify-content: center;
 }
 
-._ui_1e0uz_19::after {
+._ui_1qhtc_19::after {
   content: "";
   inline-size: 6px;
   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_1e0uz_18:checked + ._ui_1e0uz_19 {
+._input_1qhtc_18:checked + ._ui_1qhtc_19 {
   background-color: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
+  color: unset;
 }
 
-._input_1e0uz_18:checked + ._ui_1e0uz_19::after {
+._input_1qhtc_18:checked + ._ui_1qhtc_19::after {
   background: var(--cpd-color-icon-on-solid-primary);
+  border-color: var(--cpd-color-icon-on-solid-primary);
+  color: unset;
 }
 
-._input_1e0uz_18:focus-visible + ._ui_1e0uz_19 {
+._input_1qhtc_18:focus-visible + ._ui_1qhtc_19 {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }
 
-._input_1e0uz_18[readonly] {
+._input_1qhtc_18[readonly] {
   pointer-events: none;
 }
 
-._input_1e0uz_18[readonly] + ._ui_1e0uz_19 {
+._input_1qhtc_18[readonly] + ._ui_1qhtc_19 {
   border-color: var(--cpd-color-border-interactive-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._input_1e0uz_18[disabled] + ._ui_1e0uz_19 {
+._input_1qhtc_18[disabled] + ._ui_1qhtc_19 {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._input_1e0uz_18[disabled]:checked + ._ui_1e0uz_19 {
+._input_1qhtc_18[disabled]:checked + ._ui_1qhtc_19 {
   border-color: var(--cpd-color-bg-action-primary-disabled);
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._input_1e0uz_18[readonly]:checked + ._ui_1e0uz_19::after {
+._input_1qhtc_18[readonly]:checked + ._ui_1qhtc_19::after {
   background-color: var(--cpd-color-icon-secondary);
+  border-color: var(--cpd-color-icon-secondary);
+  color: unset;
 }
 
 @media (hover) {
-  ._input_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19 {
+  ._input_1qhtc_18:not([disabled], [readonly], :checked):hover + ._ui_1qhtc_19 {
     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_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19::after {
+  ._input_1qhtc_18:not([disabled], [readonly], :checked):hover + ._ui_1qhtc_19::after {
     background: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-icon-quaternary);
+    color: unset;
   }
 
-  ._input_1e0uz_18:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
+  ._input_1qhtc_18:not([disabled], [readonly]):checked:hover + ._ui_1qhtc_19 {
     border-color: var(--cpd-color-bg-accent-hovered);
     background: var(--cpd-color-bg-accent-hovered);
   }
 
-  ._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
+  ._input_1qhtc_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1qhtc_19 {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._input_1e0uz_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1e0uz_19 {
+._input_1qhtc_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1qhtc_19 {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1e0uz_19 {
+._input_1qhtc_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1qhtc_19 {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
@@ -1114,7 +1154,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._progress-bar_9g67e_8 {
+._progress-bar_1l6pa_8 {
   position: relative;
   background-color: var(--cpd-color-gray-200);
   border: 1px solid var(--cpd-color-gray-400);
@@ -1130,7 +1170,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-container_9g67e_24 {
+._progress-bar-container_1l6pa_24 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
@@ -1159,13 +1199,13 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-label_9g67e_53 {
+._progress-bar-label_1l6pa_53 {
   font: var(--cpd-font-body-sm-medium);
   letter-spacing: var(--cpd-font-letter-spacing-body-sm);
   color: var(--cpd-progress-bar-main);
 }
 
-._progress-bar-indicator_9g67e_59 {
+._progress-bar-indicator_1l6pa_59 {
   position: absolute;
   inset: 0;
   transition: transform 0.2s ease-in-out;
@@ -1185,6 +1225,12 @@ 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_1l6pa_59 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -1383,32 +1429,38 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._separator_7ckbw_8 {
+._separator_cqpyv_8 {
   --cpd-separator-color: var(--cpd-color-gray-400);
   --cpd-separator-size: 1px;
 
   background-color: var(--cpd-separator-color);
 }
 
-._separator_7ckbw_8[data-kind="secondary"] {
+._separator_cqpyv_8[data-kind="secondary"] {
   --cpd-separator-color: var(--cpd-color-gray-300);
 }
 
-._separator_7ckbw_8[data-kind="section"] {
+._separator_cqpyv_8[data-kind="section"] {
   --cpd-separator-size: 2px;
 }
 
-._separator_7ckbw_8[data-orientation="horizontal"] {
+._separator_cqpyv_8[data-orientation="horizontal"] {
   margin-block: var(--cpd-separator-spacing);
   margin-inline: var(--cpd-separator-inset);
   block-size: var(--cpd-separator-size);
 }
 
-._separator_7ckbw_8[data-orientation="vertical"] {
+._separator_cqpyv_8[data-orientation="vertical"] {
   margin-inline: var(--cpd-separator-spacing);
   margin-block: var(--cpd-separator-inset);
   inline-size: var(--cpd-separator-size);
 }
+
+@media (forced-colors: active) {
+  ._separator_cqpyv_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
@@ -1418,31 +1470,31 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_19o42_10 {
+._container_udcm8_10 {
   display: grid;
   inline-size: 2.25rem;
   block-size: 1.25rem;
   box-sizing: border-box;
 }
 
-._container_19o42_10 > * {
+._container_udcm8_10 > * {
   grid-area: 1/1;
   inline-size: inherit;
   block-size: inherit;
   box-sizing: inherit;
 }
 
-._container_19o42_10 > ._input_19o42_24 {
+._container_udcm8_10 > ._input_udcm8_24 {
   opacity: 0;
   margin: 0;
   cursor: pointer;
 }
 
-._container_19o42_10 > ._input_19o42_24[disabled] {
+._container_udcm8_10 > ._input_udcm8_24[disabled] {
   cursor: not-allowed;
 }
 
-._ui_19o42_34 {
+._ui_udcm8_34 {
   pointer-events: none;
   border-radius: var(--cpd-radius-pill-effect);
   border: 1px solid var(--cpd-color-border-interactive-primary);
@@ -1454,18 +1506,24 @@ Please see LICENSE files in the repository root for full details.
   transition-property: background-color, border-color;
 }
 
-._input_19o42_24:checked + ._ui_19o42_34 {
+._input_udcm8_24:checked + ._ui_udcm8_34 {
   background: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
 }
 
-._ui_19o42_34::after {
+._ui_udcm8_34::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;
@@ -1474,70 +1532,71 @@ Please see LICENSE files in the repository root for full details.
 
 /* Note the use of :focus-visible rather than :focus to avoid showing the focus
 ring after a simple click */
-._input_19o42_24:focus-visible + ._ui_19o42_34 {
+._input_udcm8_24:focus-visible + ._ui_udcm8_34 {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }
 
-:checked + ._ui_19o42_34::after {
+:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
+
   transform: translateX(100%);
-  background: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
-  :checked:not([disabled]):hover + ._ui_19o42_34 {
+  :checked:not([disabled]):hover + ._ui_udcm8_34 {
     background: var(--cpd-color-bg-accent-hovered);
     border-color: var(--cpd-color-bg-accent-hovered);
   }
 }
 
-:checked:active + ._ui_19o42_34 {
+:checked:active + ._ui_udcm8_34 {
   background: var(--cpd-color-bg-accent-hovered);
   border-color: var(--cpd-color-bg-accent-hovered);
 }
 
-._input_19o42_24[readonly] {
+._input_udcm8_24[readonly] {
   pointer-events: none;
 }
 
-._input_19o42_24[readonly] + ._ui_19o42_34 {
+._input_udcm8_24[readonly] + ._ui_udcm8_34 {
   border-color: var(--cpd-color-border-interactive-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._input_19o42_24[readonly] + ._ui_19o42_34::after {
-  background: var(--cpd-color-icon-secondary);
+._input_udcm8_24[readonly] + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-secondary);
 }
 
-._input_19o42_24[disabled] + ._ui_19o42_34 {
+._input_udcm8_24[disabled] + ._ui_udcm8_34 {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._input_19o42_24[disabled] + ._ui_19o42_34::after {
-  background: var(--cpd-color-bg-action-primary-disabled);
+._input_udcm8_24[disabled] + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._input_19o42_24[readonly]:checked + ._ui_19o42_34 {
+._input_udcm8_24[readonly]:checked + ._ui_udcm8_34 {
   border-color: var(--cpd-color-icon-secondary);
   background: var(--cpd-color-icon-secondary);
 }
 
-._input_19o42_24[readonly]:checked + ._ui_19o42_34::after {
-  background: var(--cpd-color-icon-on-solid-primary);
+._input_udcm8_24[readonly]:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
 
-._input_19o42_24[disabled]:checked + ._ui_19o42_34 {
+._input_udcm8_24[disabled]:checked + ._ui_udcm8_34 {
   background: var(--cpd-color-bg-action-primary-disabled);
   border-color: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._input_19o42_24[disabled]:checked + ._ui_19o42_34::after {
-  background: var(--cpd-color-icon-on-solid-primary);
+._input_udcm8_24[disabled]:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
-  ._input_19o42_24:not(:checked, [disabled], [readonly]):hover + ._ui_19o42_34 {
+  ._input_udcm8_24:not(:checked, [disabled], [readonly]):hover + ._ui_udcm8_34 {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1545,7 +1604,7 @@ ring after a simple click */
   }
 }
 
-._input_19o42_24:not(:checked, [disabled], [readonly]):active + ._ui_19o42_34 {
+._input_udcm8_24:not(:checked, [disabled], [readonly]):active + ._ui_udcm8_34 {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 /*
@@ -1557,7 +1616,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1hel1_10 {
+._container_1md5v_10 {
   --size: 20px;
 
   display: grid;
@@ -1565,97 +1624,103 @@ Please see LICENSE files in the repository root for full details.
   block-size: var(--size);
 }
 
-._input_1hel1_18,
-._ui_1hel1_19 {
+._input_1md5v_18,
+._ui_1md5v_19 {
   box-sizing: border-box;
   grid-area: 1/1;
   inline-size: var(--size);
   block-size: var(--size);
 }
 
-._input_1hel1_18 {
+._input_1md5v_18 {
   opacity: 0;
   margin: 0;
   cursor: pointer;
 }
 
-._ui_1hel1_19 {
+._ui_1md5v_19 {
   pointer-events: none;
   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_1hel1_19 svg {
+._ui_1md5v_19 svg {
   inline-size: var(--size);
   block-size: var(--size);
 
   /* compensate for the parent border */
   margin: -1px;
+
+  /** Default, rest state */
+  color: transparent;
 }
 
-._input_1hel1_18:checked + ._ui_1hel1_19 {
-  color: var(--cpd-color-icon-on-solid-primary);
+._input_1md5v_18:checked + ._ui_1md5v_19 {
   background-color: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
 }
 
-._input_1hel1_18:focus-visible + ._ui_1hel1_19 {
+._input_1md5v_18:checked + ._ui_1md5v_19 svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+._input_1md5v_18:focus-visible + ._ui_1md5v_19 {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }
 
-._input_1hel1_18[disabled] + ._ui_1hel1_19 {
+._input_1md5v_18[disabled] + ._ui_1md5v_19 {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._input_1hel1_18[readonly] {
+._input_1md5v_18[readonly] {
   pointer-events: none;
 }
 
-._input_1hel1_18[readonly] + ._ui_1hel1_19 {
+._input_1md5v_18[readonly] + ._ui_1md5v_19 {
   border-color: var(--cpd-color-border-interactive-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._input_1hel1_18[disabled]:checked + ._ui_1hel1_19 {
+._input_1md5v_18[disabled]:checked + ._ui_1md5v_19 {
   border-color: var(--cpd-color-bg-action-primary-disabled);
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._input_1hel1_18[readonly]:checked + ._ui_1hel1_19 {
+._input_1md5v_18[readonly]:checked + ._ui_1md5v_19 svg {
   color: var(--cpd-color-icon-secondary);
 }
 
 @media (hover) {
-  ._input_1hel1_18:not([disabled], [readonly], :checked):hover + ._ui_1hel1_19 {
-    color: var(--cpd-color-icon-quaternary);
+  ._input_1md5v_18:not([disabled], [readonly], :checked):hover + ._ui_1md5v_19 {
     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_1hel1_18:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
+  ._input_1md5v_18:not([disabled], [readonly], :checked):hover + ._ui_1md5v_19 svg {
+    color: var(--cpd-color-icon-quaternary);
+  }
+
+  ._input_1md5v_18:not([disabled], [readonly]):checked:hover + ._ui_1md5v_19 {
     border-color: var(--cpd-color-bg-accent-hovered);
     background: var(--cpd-color-bg-accent-hovered);
   }
 
-  ._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
+  ._input_1md5v_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1md5v_19 {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._input_1hel1_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1hel1_19 {
+._input_1md5v_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1md5v_19 {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1hel1_19 {
+._input_1md5v_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1md5v_19 {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
@@ -1666,7 +1731,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._toast-container_xzz4o_8 {
+._toast-container_1xofk_8 {
   inline-size: fit-content;
   background-color: var(--cpd-color-alpha-gray-1300);
   color: var(--cpd-color-text-on-solid-primary);
@@ -1674,6 +1739,12 @@ 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_1xofk_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2024 New Vector Ltd.
 
@@ -1707,7 +1778,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._button_vczzf_8 {
+._button_187yx_8 {
   border-radius: var(--cpd-radius-pill-effect);
   cursor: pointer;
   appearance: none;
@@ -1721,22 +1792,22 @@ Please see LICENSE files in the repository root for full details.
   transition-property: color, background-color, border-color;
 }
 
-a._button_vczzf_8 {
+a._button_187yx_8 {
   /* Make the width match that of a real button */
   inline-size: max-content;
 }
 
-._button_vczzf_8 > svg {
+._button_187yx_8 > svg {
   transition: color 0.1s;
 }
 
-._button_vczzf_8[aria-disabled="true"] {
+._button_187yx_8[aria-disabled="true"] {
   cursor: not-allowed;
   pointer-events: all !important;
   color: var(--cpd-color-text-disabled) !important;
 }
 
-._button_vczzf_8[aria-disabled="true"] > svg {
+._button_187yx_8[aria-disabled="true"] > svg {
   color: var(--cpd-color-icon-disabled) !important;
 }
 
@@ -1744,35 +1815,35 @@ a._button_vczzf_8 {
  * SIZES
  */
 
-._button_vczzf_8[data-size="lg"] {
+._button_187yx_8[data-size="lg"] {
   padding-block: var(--cpd-space-2x);
   padding-inline: var(--cpd-space-8x);
   min-block-size: var(--cpd-space-12x);
 
-  &._icon-only_vczzf_50 {
+  &._icon-only_187yx_50 {
     padding-inline: var(--cpd-space-2x);
     block-size: var(--cpd-space-12x);
     inline-size: var(--cpd-space-12x);
   }
 }
 
-._button_vczzf_8[data-size="lg"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
+._button_187yx_8[data-size="lg"]._has-icon_187yx_57:not(._icon-only_187yx_50) {
   padding-inline-start: var(--cpd-space-7x);
 }
 
-._button_vczzf_8[data-size="sm"] {
+._button_187yx_8[data-size="sm"] {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-5x);
   min-block-size: var(--cpd-space-9x);
 
-  &._icon-only_vczzf_50 {
+  &._icon-only_187yx_50 {
     padding-inline: var(--cpd-space-1x);
     block-size: var(--cpd-space-9x);
     inline-size: var(--cpd-space-9x);
   }
 }
 
-._button_vczzf_8[data-size="sm"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
+._button_187yx_8[data-size="sm"]._has-icon_187yx_57:not(._icon-only_187yx_50) {
   padding-inline-start: var(--cpd-space-4x);
 }
 
@@ -1780,100 +1851,100 @@ a._button_vczzf_8 {
  * KINDS
  */
 
-._button_vczzf_8[data-kind="primary"] {
+._button_187yx_8[data-kind="primary"] {
   color: var(--cpd-color-text-on-solid-primary);
   background: var(--cpd-color-bg-action-primary-rest);
   border-width: 0;
 }
 
-._button_vczzf_8[data-kind="primary"] > svg {
+._button_187yx_8[data-kind="primary"] > svg {
   color: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="primary"]:hover {
+  ._button_187yx_8[data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
-._button_vczzf_8[data-kind="primary"]:active,
-._button_vczzf_8[data-kind="primary"][aria-expanded="true"] {
+._button_187yx_8[data-kind="primary"]:active,
+._button_187yx_8[data-kind="primary"][aria-expanded="true"] {
   background: var(--cpd-color-bg-action-primary-pressed);
 }
 
-._button_vczzf_8[data-kind="primary"][aria-disabled="true"] {
+._button_187yx_8[data-kind="primary"][aria-disabled="true"] {
   /* !important to override destructive background */
   background: var(--cpd-color-bg-subtle-primary) !important;
 }
 
-._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107 {
+._button_187yx_8[data-kind="primary"]._destructive_187yx_107 {
   background: var(--cpd-color-bg-critical-primary);
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:hover {
+  ._button_187yx_8[data-kind="primary"]._destructive_187yx_107:hover {
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:active,
-._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107[aria-expanded="true"] {
+._button_187yx_8[data-kind="primary"]._destructive_187yx_107:active,
+._button_187yx_8[data-kind="primary"]._destructive_187yx_107[aria-expanded="true"] {
   /* TODO: We're waiting for this value to be formalized as a semantic token */
   background: var(--cpd-color-red-1100);
 }
 
-._button_vczzf_8[data-kind="secondary"] {
+._button_187yx_8[data-kind="secondary"] {
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   color: var(--cpd-color-text-primary);
   background: var(--cpd-color-bg-canvas-default);
 }
 
-._button_vczzf_8[data-kind="secondary"] > svg {
+._button_187yx_8[data-kind="secondary"] > svg {
   color: var(--cpd-color-icon-primary);
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="secondary"]:hover {
+  ._button_187yx_8[data-kind="secondary"]:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
     background: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._button_vczzf_8[data-kind="secondary"]:active,
-._button_vczzf_8[data-kind="secondary"][aria-expanded="true"] {
+._button_187yx_8[data-kind="secondary"]:active,
+._button_187yx_8[data-kind="secondary"][aria-expanded="true"] {
   border-color: var(--cpd-color-border-interactive-hovered);
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-._button_vczzf_8[data-kind="secondary"][aria-disabled="true"] {
+._button_187yx_8[data-kind="secondary"][aria-disabled="true"] {
   /* !important to override destructive values */
   border-color: var(--cpd-color-border-interactive-secondary) !important;
   background: var(--cpd-color-bg-subtle-secondary) !important;
 }
 
-._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 {
+._button_187yx_8[data-kind="secondary"]._destructive_187yx_107 {
   border-color: var(--cpd-color-border-critical-subtle);
   color: var(--cpd-color-text-critical-primary);
 }
 
-._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 > svg {
+._button_187yx_8[data-kind="secondary"]._destructive_187yx_107 > svg {
   color: var(--cpd-color-icon-critical-primary);
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:hover {
+  ._button_187yx_8[data-kind="secondary"]._destructive_187yx_107:hover {
     border-color: var(--cpd-color-border-critical-hovered);
     background: var(--cpd-color-bg-critical-subtle);
   }
 }
 
-._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:active,
-._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107[aria-expanded="true"] {
+._button_187yx_8[data-kind="secondary"]._destructive_187yx_107:active,
+._button_187yx_8[data-kind="secondary"]._destructive_187yx_107[aria-expanded="true"] {
   border-color: var(--cpd-color-border-critical-hovered);
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._button_vczzf_8[data-kind="tertiary"] {
+._button_187yx_8[data-kind="tertiary"] {
   border: none;
   color: var(--cpd-color-text-primary);
   text-decoration: underline;
@@ -1881,37 +1952,43 @@ a._button_vczzf_8 {
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="tertiary"]:hover {
+  ._button_187yx_8[data-kind="tertiary"]:hover {
     background: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._button_vczzf_8[data-kind="tertiary"]:active,
-._button_vczzf_8[data-kind="tertiary"][aria-expanded="true"] {
+._button_187yx_8[data-kind="tertiary"]:active,
+._button_187yx_8[data-kind="tertiary"][aria-expanded="true"] {
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-._button_vczzf_8[data-kind="tertiary"][aria-disabled="true"] {
+._button_187yx_8[data-kind="tertiary"][aria-disabled="true"] {
   color: var(--cpd-color-text-disabled);
 
   /* !important to override destructive background */
   background: transparent !important;
 }
 
-._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107 {
+._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107 {
   color: var(--cpd-color-text-critical-primary);
 }
 
 @media (hover) {
-  ._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:hover {
+  ._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
 }
 
-._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:active,
-._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107[aria-expanded="true"] {
+._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107:active,
+._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107[aria-expanded="true"] {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
+
+@media (forced-colors: active) {
+  ._button_187yx_8[data-kind="primary"] {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -2214,7 +2291,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._content_o77nw_8 {
+._content_1r8kr_8 {
   display: inline-flex;
   background-color: var(--cpd-color-bg-subtle-secondary);
   padding: var(--cpd-space-4x);
@@ -2227,11 +2304,11 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._content_o77nw_8[data-size="medium"] {
+._content_1r8kr_8[data-size="medium"] {
   padding: var(--cpd-space-3x);
 }
 
-._content_o77nw_8[data-size="small"] {
+._content_1r8kr_8[data-size="small"] {
   padding: var(--cpd-space-3x);
 
   > svg {
@@ -2240,15 +2317,21 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._destructive_o77nw_34 {
+._destructive_1r8kr_34 {
   background-color: var(--cpd-color-bg-critical-subtle);
   color: var(--cpd-color-icon-critical-primary);
 }
 
-._success_o77nw_39 {
+._success_1r8kr_39 {
   background-color: var(--cpd-color-bg-success-subtle);
   color: var(--cpd-color-icon-success-primary);
 }
+
+@media (forced-colors: active) {
+  ._content_1r8kr_8 {
+    outline: 1px solid transparent;
+  }
+}
 /* Copyright 2025 New Vector Ltd.
  * Copyright 2023 The Matrix.org Foundation C.I.C.
  *
@@ -2256,13 +2339,13 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._nav-bar_1fp3r_8 {
+._nav-bar_z70g4_8 {
   border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
   margin: var(--cpd-space-6x) 0;
   padding: 0;
 }
 
-._nav-bar-items_1fp3r_14 {
+._nav-bar-items_z70g4_14 {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -2273,13 +2356,13 @@ Please see LICENSE files in the repository root for full details.
   margin: 0;
 }
 
-._nav-tab_1fp3r_25 {
+._nav-tab_z70g4_25 {
   padding: var(--cpd-space-4x) 0;
   position: relative;
 }
 
 /* Underline effect */
-._nav-tab_1fp3r_25::before {
+._nav-tab_z70g4_25::before {
   content: "";
   position: absolute;
   inset-block-end: 0;
@@ -2290,12 +2373,12 @@ Please see LICENSE files in the repository root for full details.
   transition: height 0.1s ease-in-out;
 }
 
-._nav-tab_1fp3r_25[data-current]::before {
+._nav-tab_z70g4_25[data-current]::before {
   /* This is not exactly right: designs says 3px, but there are no variables for that */
   block-size: var(--cpd-border-width-4);
 }
 
-._nav-item_1fp3r_47 {
+._nav-item_z70g4_47 {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-2x);
   border-radius: var(--cpd-radius-pill-effect);
@@ -2314,33 +2397,39 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._nav-item_1fp3r_47:not([disabled]):hover {
+  ._nav-item_z70g4_47:not([disabled]):hover {
     color: var(--cpd-color-text-primary);
     background-color: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._nav-item_1fp3r_47:focus-visible {
+._nav-item_z70g4_47:focus-visible {
   outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
 }
 
-._nav-item_1fp3r_47:not([disabled]):active {
+._nav-item_z70g4_47:not([disabled]):active {
   color: var(--cpd-color-text-primary);
   background-color: var(--cpd-color-bg-subtle-primary);
 }
 
-._nav-item_1fp3r_47[aria-current],
-._nav-item_1fp3r_47[aria-selected="true"] {
+._nav-item_z70g4_47[aria-current],
+._nav-item_z70g4_47[aria-selected="true"] {
   color: var(--cpd-color-text-primary);
 }
 
-._nav-item_1fp3r_47[disabled] {
+._nav-item_z70g4_47[disabled] {
   cursor: not-allowed;
 
   /* Enable pointer events for svgs even with fill=none */
   pointer-events: all !important;
   color: var(--cpd-color-text-disabled);
 }
+
+@media (forced-colors: active) {
+  ._nav-tab_z70g4_25[data-current]::before {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2024 New Vector Ltd.
 
@@ -2348,7 +2437,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._content_3xq91_8 {
+._content_16f2y_8 {
   /* 320px + 20px padding left + 20px padding right */
   max-inline-size: 320px;
   border-radius: var(--cpd-space-3x);
@@ -2377,25 +2466,31 @@ Please see LICENSE files in the repository root for full details.
   column-gap: var(--cpd-space-6x);
 }
 
-._header_3xq91_37 {
+._header_16f2y_37 {
   margin: 0;
   color: var(--cpd-color-text-on-solid-primary);
   grid-area: header;
 }
 
-._description_3xq91_43 {
+._description_16f2y_43 {
   color: var(--cpd-color-gray-500);
   grid-area: description;
 }
 
-._button_3xq91_48 {
+._button_16f2y_48 {
   color: var(--cpd-color-bg-subtle-secondary);
   grid-area: button;
 }
 
-._arrow_3xq91_53 {
+._arrow_16f2y_53 {
   fill: var(--cpd-color-bg-action-primary-rest);
 }
+
+@media (forced-colors: active) {
+  ._content_16f2y_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2024 New Vector Ltd.
 
@@ -2597,7 +2692,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._visual-list_15wzx_8 {
+._visual-list_1mgc1_8 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
@@ -2607,6 +2702,12 @@ 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_1mgc1_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
  * Copyright 2024 New Vector Ltd.
  *
@@ -2614,7 +2715,7 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._visual-list-item_1ma3e_8 {
+._visual-list-item_1nc1y_8 {
   display: flex;
   gap: var(--cpd-space-3x);
   padding: var(--cpd-space-3x) var(--cpd-space-4x);
@@ -2623,18 +2724,24 @@ Please see LICENSE files in the repository root for full details.
   align-items: center;
 }
 
-._visual-list-item-icon_1ma3e_17 {
+._visual-list-item-icon_1nc1y_17 {
   flex-shrink: 0;
   color: var(--cpd-color-icon-secondary);
 }
 
-._visual-list-item-icon-success_1ma3e_22 {
+._visual-list-item-icon-success_1nc1y_22 {
   color: var(--cpd-color-icon-success-primary);
 }
 
-._visual-list-item-icon-destructive_1ma3e_26 {
+._visual-list-item-icon-destructive_1nc1y_26 {
   color: var(--cpd-color-icon-critical-primary);
 }
+
+@media (forced-colors: active) {
+  ._visual-list-item_1nc1y_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
  * Copyright 2025 New Vector Ltd
  *
@@ -2675,7 +2782,7 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._unread-counter_9mg0k_8 {
+._unread-counter_1147r_8 {
   border-radius: 38px;
   font: var(--cpd-font-body-xs-semibold);
   color: var(--cpd-color-text-on-solid-primary);
@@ -2688,6 +2795,12 @@ Please see LICENSE files in the repository root for full details.
   justify-content: center;
   box-sizing: border-box;
 }
+
+@media (forced-colors: active) {
+  ._unread-counter_1147r_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
  * Copyright 2025 New Vector Ltd
  *
@@ -2695,7 +2808,7 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._pill_1pem8_8 {
+._pill_187tn_8 {
   border-radius: 38px;
   font: var(--cpd-font-body-xs-semibold);
   color: var(--cpd-color-text-on-solid-primary);
@@ -2705,6 +2818,12 @@ Please see LICENSE files in the repository root for full details.
   display: inline-flex;
   align-items: center;
 }
+
+@media (forced-colors: active) {
+  ._pill_187tn_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
  * Copyright 2025 New Vector Ltd
  *
@@ -2712,7 +2831,7 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._unread_1k06b_8 {
+._unread_cti0f_8 {
   inline-size: 20px;
   display: flex;
   justify-content: center;
@@ -2724,3 +2843,9 @@ Please see LICENSE files in the repository root for full details.
     border-radius: 100%;
   }
 }
+
+@media (forced-colors: active) {
+  ._unread_cti0f_8 div {
+    outline: 1px solid transparent;
+  }
+}