@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/style.css

@@ -1,3 +1,77 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._pill_187tn_8 {
+  border-radius: 38px;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  padding: 0 var(--cpd-space-2x);
+  block-size: 20px;
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (forced-colors: active) {
+  ._pill_187tn_8 {
+    outline: 1px solid transparent;
+  }
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._unread_cti0f_8 {
+  inline-size: 20px;
+  display: flex;
+  justify-content: center;
+
+  div {
+    block-size: 8px;
+    inline-size: 8px;
+    background-color: var(--cpd-color-icon-secondary);
+    border-radius: 100%;
+  }
+}
+
+@media (forced-colors: active) {
+  ._unread_cti0f_8 div {
+    outline: 1px solid transparent;
+  }
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._unread-counter_1147r_8 {
+  border-radius: 38px;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  block-size: 20px;
+  min-inline-size: 20px;
+  padding: 0 var(--cpd-space-1-5x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+@media (forced-colors: active) {
+  ._unread-counter_1147r_8 {
+    outline: 1px solid transparent;
+  }
+}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -92,161 +166,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-/**
- * Font – Body – Extra Small
- */
-
-._font-body-xs-regular_6v6n8_12 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
-  font: var(--cpd-font-body-xs-regular);
-}
-
-._font-body-xs-semibold_6v6n8_17 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
-  font: var(--cpd-font-body-xs-semibold);
-}
-
-._font-body-xs-medium_6v6n8_22 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
-  font: var(--cpd-font-body-xs-medium);
-}
-
-/**
- * Font – Body – Small
- */
-
-._font-body-sm-regular_6v6n8_31 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-  font: var(--cpd-font-body-sm-regular);
-}
-
-._font-body-sm-semibold_6v6n8_36 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-  font: var(--cpd-font-body-sm-semibold);
-}
-
-._font-body-sm-medium_6v6n8_41 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-  font: var(--cpd-font-body-sm-medium);
-}
-
-/**
- * Font – Body – Medium
- */
-
-._font-body-md-regular_6v6n8_50 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-md);
-  font: var(--cpd-font-body-md-regular);
-}
-
-._font-body-md-semibold_6v6n8_55 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-md);
-  font: var(--cpd-font-body-md-semibold);
-}
-
-._font-body-md-medium_6v6n8_60 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-md);
-  font: var(--cpd-font-body-md-medium);
-}
-
-/**
- * Font – Body – Large
- */
-
-._font-body-lg-regular_6v6n8_69 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
-  font: var(--cpd-font-body-lg-regular);
-}
-
-._font-body-lg-semibold_6v6n8_74 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
-  font: var(--cpd-font-body-lg-semibold);
-}
-
-._font-body-lg-medium_6v6n8_79 {
-  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
-  font: var(--cpd-font-body-lg-medium);
-}
-
-/**
- * Font – Heading – Small
- */
-
-._font-heading-sm-regular_6v6n8_88 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
-  font: var(--cpd-font-heading-sm-regular);
-}
-
-._font-heading-sm-semibold_6v6n8_93 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
-  font: var(--cpd-font-heading-sm-semibold);
-}
-
-._font-heading-sm-medium_6v6n8_98 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
-  font: var(--cpd-font-heading-sm-medium);
-}
-
-/**
- * Font – Heading – Medium
- */
-
-._font-heading-md-regular_6v6n8_107 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
-  font: var(--cpd-font-heading-md-regular);
-}
-
-._font-heading-md-semibold_6v6n8_112 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
-  font: var(--cpd-font-heading-md-semibold);
-}
-
-/**
- * Font – Heading – Large
- */
-
-._font-heading-lg-regular_6v6n8_121 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
-  font: var(--cpd-font-heading-lg-regular);
-}
-
-._font-heading-lg-semibold_6v6n8_126 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
-  font: var(--cpd-font-heading-lg-semibold);
-}
-
-/**
- * Font – Heading – Extra Large
- */
-
-._font-heading-xl-regular_6v6n8_135 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
-  font: var(--cpd-font-heading-xl-regular);
-}
-
-._font-heading-xl-semibold_6v6n8_140 {
-  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
-  font: var(--cpd-font-heading-xl-semibold);
-}
-
-/**
-  * Reset font-feature-settings after letter-spacing has been tweaked.
-  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
-  * We need to tweak the `letter-spacing` property and doing so, disables by
-  * default the optional ligatures
-  * `font-feature-settings` allows us to override this behaviour and have the
-  * correct ligatures and the proper dynamic metric spacing.
-  */
-._typography_6v6n8_153 {
-  font-feature-settings: var(--cpd-font-feature-settings);
-}
-/*
-Copyright 2023 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
 ._icon-button_1215g_8 {
   --cpd-icon-button-indicator-border-size: calc(
     var(--cpd-icon-button-size) * 0.0625
@@ -463,29 +382,184 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._avatar_zysgz_8 {
-  display: inline-block;
-  box-sizing: border-box;
+/**
+ * Font – Body – Extra Small
+ */
 
-  /* -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;
-  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */
-  font-family: var(--cpd-font-family-sans);
-  font-weight: bold;
-  overflow: hidden;
-  user-select: none;
+._font-body-xs-regular_6v6n8_12 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
+  font: var(--cpd-font-body-xs-regular);
+}
 
-  /* Set a background color to help with visual consistency when displaying
-   * avatars with a translucent background */
-  background: var(--cpd-color-bg-canvas-default);
+._font-body-xs-semibold_6v6n8_17 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
+  font: var(--cpd-font-body-xs-semibold);
 }
 
-button._avatar_zysgz_8 {
-  /**
-   * The avatar can be a button element, we need to reset its style
+._font-body-xs-medium_6v6n8_22 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
+  font: var(--cpd-font-body-xs-medium);
+}
+
+/**
+ * Font – Body – Small
+ */
+
+._font-body-sm-regular_6v6n8_31 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+  font: var(--cpd-font-body-sm-regular);
+}
+
+._font-body-sm-semibold_6v6n8_36 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+  font: var(--cpd-font-body-sm-semibold);
+}
+
+._font-body-sm-medium_6v6n8_41 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+  font: var(--cpd-font-body-sm-medium);
+}
+
+/**
+ * Font – Body – Medium
+ */
+
+._font-body-md-regular_6v6n8_50 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
+  font: var(--cpd-font-body-md-regular);
+}
+
+._font-body-md-semibold_6v6n8_55 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
+  font: var(--cpd-font-body-md-semibold);
+}
+
+._font-body-md-medium_6v6n8_60 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
+  font: var(--cpd-font-body-md-medium);
+}
+
+/**
+ * Font – Body – Large
+ */
+
+._font-body-lg-regular_6v6n8_69 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
+  font: var(--cpd-font-body-lg-regular);
+}
+
+._font-body-lg-semibold_6v6n8_74 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
+  font: var(--cpd-font-body-lg-semibold);
+}
+
+._font-body-lg-medium_6v6n8_79 {
+  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
+  font: var(--cpd-font-body-lg-medium);
+}
+
+/**
+ * Font – Heading – Small
+ */
+
+._font-heading-sm-regular_6v6n8_88 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
+  font: var(--cpd-font-heading-sm-regular);
+}
+
+._font-heading-sm-semibold_6v6n8_93 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
+  font: var(--cpd-font-heading-sm-semibold);
+}
+
+._font-heading-sm-medium_6v6n8_98 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
+  font: var(--cpd-font-heading-sm-medium);
+}
+
+/**
+ * Font – Heading – Medium
+ */
+
+._font-heading-md-regular_6v6n8_107 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
+  font: var(--cpd-font-heading-md-regular);
+}
+
+._font-heading-md-semibold_6v6n8_112 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
+  font: var(--cpd-font-heading-md-semibold);
+}
+
+/**
+ * Font – Heading – Large
+ */
+
+._font-heading-lg-regular_6v6n8_121 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
+  font: var(--cpd-font-heading-lg-regular);
+}
+
+._font-heading-lg-semibold_6v6n8_126 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
+  font: var(--cpd-font-heading-lg-semibold);
+}
+
+/**
+ * Font – Heading – Extra Large
+ */
+
+._font-heading-xl-regular_6v6n8_135 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
+  font: var(--cpd-font-heading-xl-regular);
+}
+
+._font-heading-xl-semibold_6v6n8_140 {
+  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
+  font: var(--cpd-font-heading-xl-semibold);
+}
+
+/**
+  * Reset font-feature-settings after letter-spacing has been tweaked.
+  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
+  * We need to tweak the `letter-spacing` property and doing so, disables by
+  * default the optional ligatures
+  * `font-feature-settings` allows us to override this behaviour and have the
+  * correct ligatures and the proper dynamic metric spacing.
+  */
+._typography_6v6n8_153 {
+  font-feature-settings: var(--cpd-font-feature-settings);
+}
+/*
+Copyright 2023 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._avatar_7h2br_8 {
+  display: inline-block;
+  box-sizing: border-box;
+
+  /* -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;
+  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */
+  font-family: var(--cpd-font-family-sans);
+  font-weight: bold;
+  overflow: hidden;
+  user-select: none;
+
+  /* Set a background color to help with visual consistency when displaying
+   * avatars with a translucent background */
+  background: var(--cpd-color-bg-canvas-default);
+}
+
+button._avatar_7h2br_8 {
+  /**
+   * The avatar can be a button element, we need to reset its style
    */
   padding: 0;
   border: 0;
@@ -493,25 +567,25 @@ button._avatar_zysgz_8 {
   cursor: pointer;
 }
 
-button._avatar_zysgz_8:disabled {
+button._avatar_7h2br_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_zysgz_8,
-._image_zysgz_43 {
+._avatar_7h2br_8,
+._image_7h2br_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_zysgz_43 {
+._image_7h2br_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
 /* Additional selector for button to raise selector above button.avatar */
-button._avatar-imageless_zysgz_55,
-._avatar-imageless_zysgz_55 {
+button._avatar-imageless_7h2br_55,
+._avatar-imageless_7h2br_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 */
@@ -522,41 +596,41 @@ button._avatar-imageless_zysgz_55,
   border: 1px solid var(--cpd-avatar-bg);
 }
 
-._avatar_zysgz_8[data-color] {
+._avatar_7h2br_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_zysgz_8[data-color="2"] {
+._avatar_7h2br_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_zysgz_8[data-color="3"] {
+._avatar_7h2br_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_zysgz_8[data-color="4"] {
+._avatar_7h2br_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_zysgz_8[data-color="5"] {
+._avatar_7h2br_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_zysgz_8[data-color="6"] {
+._avatar_7h2br_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_zysgz_8[data-type="round"] {
+._avatar_7h2br_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_zysgz_8[data-type="square"] {
+._avatar_7h2br_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -564,26 +638,26 @@ button._avatar-imageless_zysgz_55,
  * Stacked avatars 
  */
 
-._stacked-avatars_zysgz_109::after {
+._stacked-avatars_7h2br_109::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_zysgz_109 ._avatar_zysgz_8 {
+._stacked-avatars_7h2br_109 ._avatar_7h2br_8 {
   float: inline-start;
 }
 
-._stacked-avatars_zysgz_109 ._avatar_zysgz_8:not(:last-child) {
+._stacked-avatars_7h2br_109 ._avatar_7h2br_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_zysgz_109 > *:not(:first-child) {
-  margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
+._stacked-avatars_7h2br_109 > *:not(:first-child) {
+  margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);
 }
 
-._clip-path_zysgz_128 {
+._clip-path_7h2br_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;
@@ -641,496 +715,367 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 /*
-Copyright 2023 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._menu_1w1u7_8 {
-  border-radius: var(--cpd-space-3x);
-  background: var(--cpd-color-bg-canvas-default);
-
-  /* Here we use outline to create a border internal to the container. The Radix
-  menu component may try to override it with outline: none, hence the need for
-  !important. */
-  outline: var(--cpd-border-width-1) solid
-    var(--cpd-color-border-interactive-secondary) !important;
-  outline-offset: calc(-1 * var(--cpd-border-width-1));
-  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
-  inline-size: fit-content;
-  max-inline-size: 320px;
+._breadcrumb_t96w3_8 {
   display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-1x);
-  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);
+  align-items: center;
+  block-size: 40px;
+  gap: var(--cpd-space-3x);
+  padding-block-end: var(--cpd-space-3x);
+  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
+  box-sizing: border-box;
 
-  --cpd-separator-spacing: 0;
-  --cpd-separator-inset: var(--cpd-space-4x);
-}
+  ._pages_t96w3_17 {
+    display: flex;
+    gap: var(--cpd-space-1x);
 
-@keyframes _slide-in_1w1u7_1 {
-  from {
-    opacity: 0;
-    transform: translate(0, var(--cpd-space-3x));
+    /* override list styles */
+    list-style-type: "";
+    margin: 0;
+    padding: 0;
+
+    a {
+      cursor: pointer;
+    }
+
+    ._last-page_t96w3_30 {
+      font: var(--cpd-font-body-sm-regular);
+      color: var(--cpd-color-text-secondary);
+    }
+
+    /*
+     * Breadcrumb separator
+     * We want this separator to be only visual and to not be in the accessibility tree.
+     * The nav html element already provides an accessible way to separate the links.
+     */
+    li + li::before {
+      display: inline-block;
+      margin: 0 0.3em 0 0.25em;
+      transform: rotate(15deg);
+      border-inline-end: 1px solid var(--cpd-color-text-secondary);
+      block-size: var(--cpd-space-3x);
+      content: "";
+    }
+
+    /* Last page */
+    :last-child {
+      span {
+        padding-inline-start: var(--cpd-space-1x);
+      }
+    }
   }
 }
+/*
+Copyright 2023 New Vector Ltd.
 
-._menu_1w1u7_8[data-state="open"] {
-  animation: _slide-in_1w1u7_1 180ms;
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._link_k9ljz_8 {
+  display: inline-block;
+  text-decoration: underline;
+  color: var(--cpd-color-text-primary);
+  font-weight: var(--cpd-font-weight-medium);
+  border-radius: var(--cpd-radius-pill-effect);
+  padding-inline: 0.25rem;
 }
 
-@keyframes _fade-in_1w1u7_1 {
-  from {
-    opacity: 0;
-  }
+._link_k9ljz_8[data-kind="primary"] {
+  color: var(--cpd-color-text-primary);
 }
 
-@keyframes _fade-out_1w1u7_1 {
-  to {
-    opacity: 0;
-  }
+._link_k9ljz_8[data-kind="critical"] {
+  color: var(--cpd-color-text-critical-primary);
 }
 
-@media (prefers-reduced-motion) {
-  ._menu_1w1u7_8[data-state="open"] {
-    animation-name: _fade-in_1w1u7_1;
+@media (hover) {
+  ._link_k9ljz_8[data-kind="primary"]:hover {
+    background: var(--cpd-color-gray-300);
   }
 
-  ._menu_1w1u7_8[data-state="closed"] {
-    animation-name: _fade-out_1w1u7_1;
+  ._link_k9ljz_8[data-kind="critical"]:hover {
+    background: var(--cpd-color-red-300);
   }
 }
 
-._title_1w1u7_63 {
-  /** Override MenuTitle margin top **/
-  margin-block-start: 0 !important;
+._link_k9ljz_8:active {
+  color: var(--cpd-color-text-on-solid-primary);
 }
-/*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
 
-._menu-title_1sgvx_8 {
-  color: var(--cpd-color-text-secondary);
-  padding-inline: var(--cpd-space-4x);
-  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
-  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-  margin-block: var(--cpd-space-2x);
+._link_k9ljz_8[data-kind="primary"]:active {
+  background: var(--cpd-color-text-primary);
+}
+
+._link_k9ljz_8[data-kind="critical"]:active {
+  background: var(--cpd-color-text-critical-primary);
+}
+
+._link_k9ljz_8[data-size="md"] {
+  font-size: var(--cpd-font-size-body-md);
+}
+
+._link_k9ljz_8[data-size="sm"] {
+  font-size: var(--cpd-font-size-body-sm);
 }
 /*
-Copyright 2023 New Vector Ltd.
+Copyright 2023, 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._bg_610zp_8 {
-  position: fixed;
-  inset: 0;
-
-  /* TODO: This value is used across modals and menu drawers, so would be worth
-  tokenizing */
-  background: rgb(3 12 27 / 52.8%);
+._button_13vu4_8 {
+  border-radius: var(--cpd-radius-pill-effect);
+  cursor: pointer;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cpd-space-2x);
+  box-sizing: border-box;
+  font: var(--cpd-font-body-md-semibold);
+  transition-duration: 0.1s;
+  transition-property: color, background-color, border-color;
 }
 
-._drawer_610zp_17 {
-  position: fixed;
-  background: var(--cpd-color-bg-canvas-default);
-  inset-block-end: 0;
-  inset-inline: 0;
-
-  /* Cap the inline content size at 520px, filling the rest of the space with
-  padding */
-  padding-inline: max(0px, calc((100% - 520px) / 2));
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-  display: flex;
-  flex-direction: column;
+a._button_13vu4_8 {
+  /* Make the width match that of a real button */
+  inline-size: max-content;
 
-  /* Drawer comes in the Android style by default */
-  --border-radius: 28px;
-  --handle-block-size: 4px;
-  --handle-inline-size: 32px;
-  --handle-inset-block-start: var(--cpd-space-4x);
-  --handle-inset-block-end: 0px;
-  --content-inset-block-start: calc(
-    var(--handle-inset-block-start) + var(--handle-block-size) +
-      var(--handle-inset-block-end)
-  );
+  /* Buttons should not be underlined */
+  text-decoration: none;
 }
 
-._drawer_610zp_17[data-platform="ios"] {
-  --border-radius: 10px;
-  --handle-block-size: 5px;
-  --handle-inline-size: 36px;
-  --handle-inset-block-start: var(--cpd-space-1-5x);
-  --handle-inset-block-end: 1px;
+._button_13vu4_8 > svg {
+  transition: color 0.1s;
 }
 
-._body_610zp_51 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-2x);
-  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))
-    var(--cpd-space-12x);
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-
-  /* Even with overflow: auto, the content can still overflow at the corners
-  where it meets with the curved border. A contain: paint fixes that. */
-  contain: paint;
-  overflow: auto;
-  scrollbar-width: none;
-
-  --cpd-separator-spacing: 0;
-  --cpd-separator-inset: var(--cpd-space-4x);
+._button_13vu4_8[aria-disabled="true"] {
+  cursor: not-allowed;
+  pointer-events: all !important;
+  color: var(--cpd-color-text-disabled) !important;
 }
 
-._body_610zp_51::before {
-  content: "";
-  position: absolute;
-  block-size: var(--handle-block-size);
-  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
-  inset-block-start: var(--handle-inset-block-start);
-  background: var(--cpd-color-icon-secondary);
-  border-radius: var(--cpd-radius-pill-effect);
+._button_13vu4_8[aria-disabled="true"] > svg {
+  color: var(--cpd-color-icon-disabled) !important;
 }
-/*
-Copyright 2023 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+/**
+ * SIZES
+ */
 
-._glass_sepwu_8 {
-  border-radius: var(--cpd-space-9x);
-  padding: var(--cpd-space-3x);
+._button_13vu4_8[data-size="lg"] {
+  padding-block: var(--cpd-space-2x);
+  padding-inline: var(--cpd-space-8x);
+  min-block-size: var(--cpd-space-12x);
 
-  /* We use an outline here to create an "inner border", rather than one that
-  adds to the component's size */
-  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
-  outline-offset: calc(-1 * var(--cpd-border-width-1));
-  background: var(--cpd-color-alpha-gray-400);
-  backdrop-filter: blur(20px);
+  &._icon-only_13vu4_53 {
+    padding-inline: var(--cpd-space-2x);
+    block-size: var(--cpd-space-12x);
+    inline-size: var(--cpd-space-12x);
+  }
 }
 
-._glass_sepwu_8 > :first-child {
-  border-radius: var(--cpd-space-6x);
-  inline-size: 100%;
-  block-size: 100%;
+._button_13vu4_8[data-size="lg"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
+  padding-inline-start: var(--cpd-space-7x);
 }
-/*
-Copyright 2023 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+._button_13vu4_8[data-size="sm"] {
+  padding-block: var(--cpd-space-1x);
+  padding-inline: var(--cpd-space-5x);
+  min-block-size: var(--cpd-space-9x);
 
-._link_1v5rz_8 {
-  display: inline-block;
-  text-decoration: underline;
-  color: var(--cpd-color-text-primary);
-  font-weight: var(--cpd-font-weight-medium);
-  border-radius: var(--cpd-radius-pill-effect);
-  padding-inline: 0.25rem;
+  &._icon-only_13vu4_53 {
+    padding-inline: var(--cpd-space-1x);
+    block-size: var(--cpd-space-9x);
+    inline-size: var(--cpd-space-9x);
+  }
 }
 
-._link_1v5rz_8[data-kind="primary"] {
-  color: var(--cpd-color-text-primary);
+._button_13vu4_8[data-size="sm"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
+  padding-inline-start: var(--cpd-space-4x);
 }
 
-._link_1v5rz_8[data-kind="critical"] {
-  color: var(--cpd-color-text-critical-primary);
+/**
+ * KINDS
+ */
+
+._button_13vu4_8[data-kind="primary"] {
+  color: var(--cpd-color-text-on-solid-primary);
+  background: var(--cpd-color-bg-action-primary-rest);
+  border-width: 0;
 }
 
-@media (hover) {
-  ._link_1v5rz_8[data-kind="primary"]:hover {
-    background: var(--cpd-color-gray-300);
-  }
+._button_13vu4_8[data-kind="primary"] > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
 
-  ._link_1v5rz_8[data-kind="critical"]:hover {
-    background: var(--cpd-color-red-300);
+@media (hover) {
+  ._button_13vu4_8[data-kind="primary"]:hover {
+    background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
-._link_1v5rz_8:active {
-  color: var(--cpd-color-text-on-solid-primary);
+._button_13vu4_8[data-kind="primary"]:active,
+._button_13vu4_8[data-kind="primary"][aria-expanded="true"] {
+  background: var(--cpd-color-bg-action-primary-pressed);
 }
 
-._link_1v5rz_8[data-kind="primary"]:active {
-  background: var(--cpd-color-text-primary);
+._button_13vu4_8[data-kind="primary"][aria-disabled="true"] {
+  /* !important to override destructive background */
+  background: var(--cpd-color-bg-subtle-primary) !important;
 }
 
-._link_1v5rz_8[data-kind="critical"]:active {
-  background: var(--cpd-color-text-critical-primary);
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110 {
+  background: var(--cpd-color-bg-critical-primary);
 }
 
-._link_1v5rz_8[data-size="small"] {
-  font-size: var(--cpd-font-size-body-sm);
+@media (hover) {
+  ._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:hover {
+    background: var(--cpd-color-bg-critical-hovered);
+  }
 }
-/*
-Copyright 2023 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110[aria-expanded="true"] {
+  /* TODO: We're waiting for this value to be formalized as a semantic token */
+  background: var(--cpd-color-red-1100);
+}
 
-._item_lqfwq_8 {
-  display: grid;
-  grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
-      /* Reserve space for the chevron so that the layout doesn't shift on
-      hover */
-      var(--cpd-space-2x),
-      1fr
-    );
-  place-items: center end;
-  padding-block: var(--cpd-space-2x);
-  padding-inline: var(--cpd-space-4x);
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-inline-size: 200px;
-  color: var(--cpd-color-text-secondary);
-  background: var(--cpd-color-bg-action-secondary-rest);
+._button_13vu4_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);
 }
 
-._item_lqfwq_8._interactive_lqfwq_26 {
-  cursor: pointer;
+._button_13vu4_8[data-kind="secondary"] > svg {
+  color: var(--cpd-color-icon-primary);
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 {
-  grid-template: "icon ." auto / auto 1fr;
+@media (hover) {
+  ._button_13vu4_8[data-kind="secondary"]:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+    background: var(--cpd-color-bg-subtle-secondary);
+  }
 }
 
-._label_lqfwq_34 {
-  grid-area: label;
-  margin-inline-end: var(--cpd-space-4x);
-  text-align: start;
-  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
+._button_13vu4_8[data-kind="secondary"]:active,
+._button_13vu4_8[data-kind="secondary"][aria-expanded="true"] {
+  border-color: var(--cpd-color-border-interactive-hovered);
+  background: var(--cpd-color-bg-subtle-primary);
 }
 
-._item_lqfwq_8._no-icon_lqfwq_41 {
-  grid-template: "label ." auto / auto 1fr;
-
-  ._label_lqfwq_34 {
-    /* Without icon, the height changes when hovered */
-    min-block-size: 24px;
-  }
+._button_13vu4_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;
 }
 
-._icon_lqfwq_50 {
-  grid-area: icon;
-  margin-inline-end: var(--cpd-space-3x);
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 {
+  border-color: var(--cpd-color-border-critical-subtle);
+  color: var(--cpd-color-text-critical-primary);
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
-  margin-inline-end: var(--cpd-space-4x);
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 > svg {
+  color: var(--cpd-color-icon-critical-primary);
 }
 
-._nav-hint_lqfwq_59 {
-  /* Hidden until the item is hovered over */
-  display: none;
-  flex-shrink: 0;
+@media (hover) {
+  ._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:hover {
+    border-color: var(--cpd-color-border-critical-hovered);
+    background: var(--cpd-color-bg-critical-subtle);
+  }
 }
 
-button._item_lqfwq_8 {
-  appearance: none;
-  border: none;
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110[aria-expanded="true"] {
+  border-color: var(--cpd-color-border-critical-hovered);
+  background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
+._button_13vu4_8[data-kind="tertiary"] {
+  border: none;
   color: var(--cpd-color-text-primary);
+  text-decoration: underline;
+  background: transparent;
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
-  color: var(--cpd-color-icon-primary);
+@media (hover) {
+  ._button_13vu4_8[data-kind="tertiary"]:hover {
+    background: var(--cpd-color-bg-subtle-secondary);
+  }
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
-  color: var(--cpd-color-icon-tertiary);
+._button_13vu4_8[data-kind="tertiary"]:active,
+._button_13vu4_8[data-kind="tertiary"][aria-expanded="true"] {
+  background: var(--cpd-color-bg-subtle-primary);
 }
 
-._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
-  color: var(--cpd-color-text-critical-primary);
+._button_13vu4_8[data-kind="tertiary"][aria-disabled="true"] {
+  color: var(--cpd-color-text-disabled);
+
+  /* !important to override destructive background */
+  background: transparent !important;
 }
 
-._item_lqfwq_8[data-kind="critical"] > ._icon_lqfwq_50,
-._item_lqfwq_8[data-kind="critical"] > ._nav-hint_lqfwq_59 {
-  color: var(--cpd-color-icon-critical-primary);
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110 {
+  color: var(--cpd-color-text-critical-primary);
 }
 
 @media (hover) {
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
-    background: var(--cpd-color-bg-action-secondary-hovered);
-  }
-
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:hover {
+  ._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
-
-  /* Replace the children with the navigation hint on hover */
-  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 {
-    display: initial;
-  }
-
-  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
-    display: none;
-  }
 }
 
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
-  background: var(--cpd-color-bg-action-secondary-pressed);
-}
-
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110[aria-expanded="true"] {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
-  pointer-events: none;
-}
-
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._label_lqfwq_34,
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._icon_lqfwq_50,
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._nav-hint_lqfwq_59 {
-  color: var(--cpd-color-text-disabled);
+@media (forced-colors: active) {
+  ._button_13vu4_8[data-kind="primary"] {
+    outline: 1px solid transparent;
+  }
 }
 /*
-Copyright 2025 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-Copyright 2023 New Vector Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-._container_1ug7n_10 {
-  --size: 20px;
-
-  display: grid;
-  inline-size: var(--size);
-  block-size: var(--size);
-}
-
-._input_1ug7n_18,
-._ui_1ug7n_19 {
-  box-sizing: border-box;
-  grid-area: 1/1;
-  inline-size: var(--size);
-  block-size: var(--size);
-}
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
-._input_1ug7n_18 {
-  opacity: 0;
-  margin: 0;
+._chat-filter_5qdp0_8 {
+  font: var(--cpd-font-body-sm-medium);
+  color: var(--cpd-color-text-primary);
+  background-color: transparent;
+  border: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary);
+  border-radius: 99px;
   cursor: pointer;
-}
-
-._ui_1ug7n_19 {
-  pointer-events: none;
-  border-radius: 50%;
-  border: 1px solid;
-  border-color: var(--cpd-color-border-interactive-primary);
-
-  /* To align the ::after pseudo-element to the center of the radio button */
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-._ui_1ug7n_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_1ug7n_18:checked + ._ui_1ug7n_19 {
-  background-color: var(--cpd-color-bg-accent-rest);
-  border-color: var(--cpd-color-bg-accent-rest);
-  color: unset;
-}
-
-._input_1ug7n_18:checked + ._ui_1ug7n_19::after {
-  background: var(--cpd-color-icon-on-solid-primary);
-  border-color: var(--cpd-color-icon-on-solid-primary);
-  color: unset;
-}
-
-._input_1ug7n_18:focus-visible + ._ui_1ug7n_19 {
-  outline: 2px solid var(--cpd-color-border-focused);
-  outline-offset: 1px;
-}
-
-._input_1ug7n_18[readonly] {
-  pointer-events: none;
-}
-
-._input_1ug7n_18[readonly] + ._ui_1ug7n_19 {
-  border-color: var(--cpd-color-border-interactive-secondary);
-  background: var(--cpd-color-bg-subtle-secondary);
-}
-
-._input_1ug7n_18[disabled] {
-  cursor: not-allowed;
-}
-
-._input_1ug7n_18[disabled] + ._ui_1ug7n_19 {
-  border-color: var(--cpd-color-border-disabled);
-  background: var(--cpd-color-bg-canvas-disabled);
-}
-
-._input_1ug7n_18[disabled]:checked + ._ui_1ug7n_19 {
-  border-color: var(--cpd-color-bg-action-primary-disabled);
-  background: var(--cpd-color-bg-action-primary-disabled);
-}
-
-._input_1ug7n_18[readonly]:checked + ._ui_1ug7n_19::after {
-  background-color: var(--cpd-color-icon-secondary);
-  border-color: var(--cpd-color-icon-secondary);
-  color: unset;
+  padding: var(--cpd-space-1x) var(--cpd-space-2x);
 }
 
 @media (hover) {
-  ._input_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_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_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_19::after {
-    background: var(--cpd-color-icon-quaternary);
-    border-color: var(--cpd-color-icon-quaternary);
-    color: unset;
-  }
-
-  ._input_1ug7n_18:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
-    border-color: var(--cpd-color-bg-accent-hovered);
-    background: var(--cpd-color-bg-accent-hovered);
-  }
-
-  ._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
-    border-color: var(--cpd-color-bg-critical-hovered);
-    background: var(--cpd-color-bg-critical-hovered);
+  ._chat-filter_5qdp0_8:hover {
+    border-color: var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-subtle-primary);
   }
 }
 
-._input_1ug7n_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1ug7n_19 {
-  border-color: var(--cpd-color-border-critical-primary);
-}
-
-._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1ug7n_19 {
-  background-color: var(--cpd-color-bg-critical-primary);
-  border-color: var(--cpd-color-bg-critical-primary);
+._chat-filter_5qdp0_8[aria-selected="true"] {
+  border-color: var(--cpd-color-bg-action-primary-rest);
+  background: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-text-on-solid-primary);
 }
 /*
 Copyright 2024 New Vector Ltd.
@@ -1139,312 +1084,198 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._progress-bar_1l6pa_8 {
-  position: relative;
-  background-color: var(--cpd-color-gray-200);
-  border: 1px solid var(--cpd-color-gray-400);
-  border-radius: var(--cpd-radius-pill-effect);
-  overflow: hidden;
+._container_gn3xc_8 {
+  display: flex;
+  flex-direction: column;
 
-  &[data-size="sm"] {
-    block-size: var(--cpd-space-2x);
+  label {
+    font: var(--cpd-font-body-md-medium);
+    margin-block-end: var(--cpd-space-1x);
   }
 
-  &[data-size="lg"] {
-    block-size: var(--cpd-space-4x);
-  }
-}
-
-._progress-bar-container_1l6pa_24 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-1x);
-
-  --cpd-progress-bar-main: var(--cpd-color-text-secondary);
-  --cpd-progress-bar-muted: var(--cpd-color-gray-800);
+  button {
+    inline-size: 100%;
+    border: 1px solid var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-canvas-default);
+    border-radius: 0.5rem;
+    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)
+      var(--cpd-space-4x);
+    box-sizing: border-box;
+    color: var(--cpd-color-text-primary);
+    font: var(--cpd-font-body-md-regular);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--cpd-space-4x);
 
-  &[data-tint="green"] {
-    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);
-    --cpd-progress-bar-muted: var(--cpd-color-green-800);
+    svg {
+      transition: transform 0.1s linear;
+    }
   }
 
-  &[data-tint="lime"] {
-    --cpd-progress-bar-main: var(--cpd-color-lime-900);
-    --cpd-progress-bar-muted: var(--cpd-color-lime-800);
+  /**
+   * When the dropdown is open, rotate the arrow icon
+   */
+  button[aria-expanded="true"] {
+    svg {
+      transform: rotate(180deg);
+    }
   }
 
-  &[data-tint="orange"] {
-    --cpd-progress-bar-main: var(--cpd-color-orange-900);
-    --cpd-progress-bar-muted: var(--cpd-color-orange-800);
+  button._placeholder_gn3xc_47 {
+    color: var(--cpd-color-text-secondary);
   }
 
-  &[data-tint="red"] {
-    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);
-    --cpd-progress-bar-muted: var(--cpd-color-red-800);
+  ._border_gn3xc_51 {
+    display: none;
+    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
+    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
+    block-size: var(--cpd-space-1x);
+    margin-block-start: calc(var(--cpd-space-1x) * -1);
+    box-sizing: border-box;
   }
-}
-
-._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_1l6pa_59 {
-  position: absolute;
-  inset: 0;
-  transition: transform 0.2s ease-in-out;
-  background-image: linear-gradient(
-    135deg,
-    var(--cpd-progress-bar-muted) 0%,
-    var(--cpd-progress-bar-muted) 25%,
-    var(--cpd-progress-bar-main) 25%,
-    var(--cpd-progress-bar-main) 50%,
-    var(--cpd-progress-bar-muted) 50%,
-    var(--cpd-progress-bar-muted) 75%,
-    var(--cpd-progress-bar-main) 75%,
-    var(--cpd-progress-bar-main) 100%,
-    var(--cpd-progress-bar-muted) 100%
-  );
 
-  /* 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.
+  ._content_gn3xc_60 {
+    display: none;
+    position: relative;
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+    ul {
+      /**
+       * To make the component going over the other elements
+       */
+      position: absolute;
+      display: block;
+      inline-size: 100%;
+      background: var(--cpd-color-bg-canvas-default);
+      border: 1px solid var(--cpd-color-border-interactive-secondary);
+      border-block-start: 0;
+      border-end-start-radius: var(--cpd-space-4x);
+      border-end-end-radius: var(--cpd-space-4x);
+      box-sizing: border-box;
+      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
+      margin: 0;
+      padding: 0;
+      padding-block-end: var(--cpd-space-4x);
+      cursor: pointer;
 
-._search_b2pjl_8 {
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  border-radius: 9999px;
-  block-size: 36px;
-  box-sizing: border-box;
-  color: var(--cpd-color-text-primary);
-  display: flex;
+      li {
+        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);
+        color: var(--cpd-color-text-secondary);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--cpd-space-4x);
 
-  /* !important to override Field's default flex settings */
-  flex-direction: row !important;
-  gap: var(--cpd-space-2x) !important;
-  align-items: center;
-  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
-}
+        @media (hover) {
+          &:hover {
+            background: var(--cpd-color-gray-200);
+          }
+        }
 
-@media (hover) {
-  ._search_b2pjl_8:hover {
-    border-color: var(--cpd-color-border-interactive-hovered);
+        &[aria-selected="true"] {
+          color: var(--cpd-color-text-primary);
+          background: var(--cpd-color-gray-300);
+        }
+      }
+    }
   }
-}
-
-._search_b2pjl_8:active {
-  border-color: var(--cpd-color-border-interactive-hovered);
-}
-
-._search_b2pjl_8:focus-within {
-  border-color: currentcolor;
-}
-
-._icon_b2pjl_37 {
-  color: var(--cpd-color-icon-secondary);
-  flex-shrink: 0;
-}
 
-@media (hover) {
-  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
-    color: var(--cpd-color-icon-primary);
+  ._open_gn3xc_108 {
+    display: block;
   }
-}
 
-._search_b2pjl_8:active ._icon_b2pjl_37 {
-  color: var(--cpd-color-icon-primary);
-}
+  ._help_gn3xc_112 {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+  }
 
-._input_b2pjl_52 {
-  border: 0;
-  background: inherit;
-  outline: 0;
-  flex: 1;
-  min-inline-size: 0;
-}
+  ._error_gn3xc_117 {
+    font: var(--cpd-font-body-sm-medium);
+    color: var(--cpd-color-text-critical-primary);
+    display: flex;
+    gap: var(--cpd-space-2x);
+  }
 
-._input_b2pjl_52::placeholder {
-  color: var(--cpd-color-text-secondary);
-}
+  ._error_gn3xc_117,
+  ._help_gn3xc_112 {
+    margin-block-start: var(--cpd-space-2x);
+  }
 
-._input_b2pjl_52:focus::placeholder {
-  color: var(--cpd-color-text-secondary);
-}
+  &[aria-invalid="true"] {
+    label {
+      color: var(--cpd-color-text-critical-primary);
+    }
 
-@media (hover) {
-  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
-    color: var(--cpd-color-text-secondary);
+    button {
+      border-color: var(--cpd-color-text-critical-primary);
+    }
   }
 }
 /*
-Copyright 2025 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-Copyright 2023 New Vector Ltd
+Copyright 2023 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-/* Styling the Radix UI Form component */
-
-/**
- * ROOT: Form Element
- */
-
-._root_19upo_16 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-5x);
-}
-
-/**
- * FIELD: Wrapper around label, control and message
- */
-
-._field_19upo_26 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-1x);
-}
-
-._inline-field_19upo_32 {
-  display: flex;
-  flex-direction: row;
-  gap: var(--cpd-space-2x);
+._container_1s836_8 {
+  display: inline-flex;
+  position: relative;
 }
 
-._inline-field-body_19upo_38 {
+._control_1s836_13 {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-._inline-field-control_19upo_44 {
-  /* The control should have the same height as the label */
-  block-size: calc(
-    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)
-  );
-
-  /* Align the control in the middle of the label */
-  display: flex;
-  align-items: center;
-}
-
-/**
- * LABEL
- */
+  padding-inline-end: var(--cpd-space-12x) !important;
 
-._label_19upo_59 {
-  font: var(--cpd-font-body-md-medium);
-  letter-spacing: var(--cpd-font-letter-spacing-body-md);
+  /* From the flexbox spec:
+   *   "By default, flex items won’t shrink below their minimum content size"
+   * This allows the element to shrink lower than its natural default size.
+   */
+  min-inline-size: 0;
 }
 
-._label_19upo_59[for] {
+._action_1s836_24 {
+  all: unset;
+  color: var(--cpd-color-icon-secondary);
+  background-color: transparent;
   cursor: pointer;
+  position: absolute;
+  inset-block: var(--cpd-space-2x);
+  inset-inline-end: var(--cpd-space-2x);
+  padding: var(--cpd-space-1x);
+  overflow: visible;
+  border-radius: 50%;
 }
 
-._label_19upo_59[data-invalid] {
-  color: var(--cpd-color-text-critical-primary);
-}
-
-/* Currently working everywhere but on Firefox (only behind a labs flag)
-https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
-._label_19upo_59:has(~ * input[disabled]),
-._label_19upo_59:has(~ input[disabled]),
-._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._label_19upo_59 {
-  color: var(--cpd-color-text-disabled);
-  cursor: not-allowed;
-}
-
-/**
- * Help and error messages
- */
-
-._message_19upo_85 {
-  font: var(--cpd-font-body-sm-regular);
-  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
-  margin-block-start: var(--cpd-space-1x);
-}
-
-._help-message_19upo_91 {
-  color: var(--cpd-color-text-secondary);
+._action_1s836_24 > svg {
+  inline-size: var(--cpd-space-6x);
+  block-size: var(--cpd-space-6x);
 }
 
-._error-message_19upo_95 {
-  color: var(--cpd-color-text-critical-primary);
+@media (hover) {
+  ._action_1s836_24:hover {
+    color: var(--cpd-color-icon-primary);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+  }
 }
 
-._success-message_19upo_99 {
-  color: var(--cpd-color-text-success-primary);
+._action_1s836_24:focus-visible {
+  outline: 2px solid var(--cpd-color-border-focused);
+  outline-offset: 1px;
 }
 
-/* Currently working everywhere but on Firefox (only behind a labs flag)
-https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
-input[disabled] ~ ._message_19upo_85,
-*:has(input[disabled]) ~ ._message_19upo_85,
-._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._message_19upo_85 {
+._control_1s836_13[disabled] + ._action_1s836_24 {
+  pointer-events: none;
   color: var(--cpd-color-text-disabled);
 }
 
-._message_19upo_85 > svg {
-  display: inline-block;
-  vertical-align: bottom;
-  margin-inline-end: var(--cpd-space-2x);
-
-  /* Calculate the size of the icon based on the font size and line height */
-  block-size: calc(1em * var(--cpd-font-line-height-regular));
-  inline-size: calc(1em * var(--cpd-font-line-height-regular));
-}
-/*
-Copyright 2023, 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-._separator_cqpyv_8 {
-  --cpd-separator-color: var(--cpd-color-gray-400);
-  --cpd-separator-size: 1px;
-
-  background-color: var(--cpd-separator-color);
-}
-
-._separator_cqpyv_8[data-kind="secondary"] {
-  --cpd-separator-color: var(--cpd-color-gray-300);
-}
-
-._separator_cqpyv_8[data-kind="section"] {
-  --cpd-separator-size: 2px;
-}
-
-._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_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;
-  }
+._control_1s836_13[readonly] + ._action_1s836_24 {
+  pointer-events: none;
+  color: var(--cpd-color-text-secondary);
 }
 /*
 Copyright 2025 New Vector Ltd.
@@ -1455,133 +1286,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_udcm8_10 {
-  display: grid;
-  inline-size: 2.25rem;
-  block-size: 1.25rem;
-  box-sizing: border-box;
-}
-
-._container_udcm8_10 > * {
-  grid-area: 1/1;
-  inline-size: inherit;
-  block-size: inherit;
-  box-sizing: inherit;
-}
-
-._container_udcm8_10 > ._input_udcm8_24 {
-  opacity: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-._container_udcm8_10 > ._input_udcm8_24[disabled] {
-  cursor: not-allowed;
-}
-
-._ui_udcm8_34 {
-  pointer-events: none;
-  border-radius: var(--cpd-radius-pill-effect);
+._control_sqdq4_10 {
   border: 1px solid var(--cpd-color-border-interactive-primary);
   background: var(--cpd-color-bg-canvas-default);
-  position: relative;
-  padding: 1px;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-property: background-color, border-color;
-}
-
-._input_udcm8_24:checked + ._ui_udcm8_34 {
-  background: var(--cpd-color-bg-accent-rest);
-  border-color: var(--cpd-color-bg-accent-rest);
-}
-
-._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(--dot-color);
-
-  /* Additional style to ensure visibility in contrast-mode */
-  border: 1px solid var(--dot-color);
+  border-radius: 0.5rem;
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
   box-sizing: border-box;
-  transform: translateX(0);
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-property: background-color, transform;
-}
 
-/* Note the use of :focus-visible rather than :focus to avoid showing the focus
-ring after a simple click */
-._input_udcm8_24:focus-visible + ._ui_udcm8_34 {
-  outline: 2px solid var(--cpd-color-border-focused);
-  outline-offset: 1px;
-}
-
-:checked + ._ui_udcm8_34::after {
-  --dot-color: var(--cpd-color-icon-on-solid-primary);
-
-  transform: translateX(100%);
-}
-
-@media (hover) {
-  :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_udcm8_34 {
-  background: var(--cpd-color-bg-accent-hovered);
-  border-color: var(--cpd-color-bg-accent-hovered);
-}
-
-._input_udcm8_24[readonly] {
-  pointer-events: none;
-}
-
-._input_udcm8_24[readonly] + ._ui_udcm8_34 {
-  border-color: var(--cpd-color-border-interactive-secondary);
-  background: var(--cpd-color-bg-subtle-secondary);
-}
-
-._input_udcm8_24[readonly] + ._ui_udcm8_34::after {
-  --dot-color: var(--cpd-color-icon-secondary);
-}
-
-._input_udcm8_24[disabled] + ._ui_udcm8_34 {
-  border-color: var(--cpd-color-border-disabled);
-  background: var(--cpd-color-bg-canvas-disabled);
-}
-
-._input_udcm8_24[disabled] + ._ui_udcm8_34::after {
-  --dot-color: var(--cpd-color-bg-action-primary-disabled);
-}
-
-._input_udcm8_24[readonly]:checked + ._ui_udcm8_34 {
-  border-color: var(--cpd-color-icon-secondary);
-  background: var(--cpd-color-icon-secondary);
-}
-
-._input_udcm8_24[readonly]:checked + ._ui_udcm8_34::after {
-  --dot-color: var(--cpd-color-icon-on-solid-primary);
-}
-
-._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_udcm8_24[disabled]:checked + ._ui_udcm8_34::after {
-  --dot-color: var(--cpd-color-icon-on-solid-primary);
+  /**
+  * Disable contextual alternate ligatures in inputs
+  * https://github.com/rsms/inter/issues/222
+  * https://github.com/rsms/inter/blob/master/src/features/calt.fea
+  */
+  font-feature-settings: "calt" 0;
 }
 
 @media (hover) {
-  ._input_udcm8_24:not(:checked, [disabled], [readonly]):hover + ._ui_udcm8_34 {
+  ._control_sqdq4_10:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1589,9 +1310,37 @@ ring after a simple click */
   }
 }
 
-._input_udcm8_24:not(:checked, [disabled], [readonly]):active + ._ui_udcm8_34 {
+._control_sqdq4_10:active {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
+
+._control_sqdq4_10:focus {
+  outline: 2px solid var(--cpd-color-border-focused);
+  border-color: transparent;
+}
+
+._control_sqdq4_10[data-invalid] {
+  border-color: var(--cpd-color-text-critical-primary);
+}
+
+._control_sqdq4_10:disabled {
+  box-shadow: none;
+  background: var(--cpd-color-bg-canvas-disabled);
+  border-color: var(--cpd-color-border-disabled);
+  color: var(--cpd-color-text-disabled);
+  cursor: not-allowed;
+}
+
+._control_sqdq4_10[readonly] {
+  box-shadow: none;
+  background: var(--cpd-color-bg-subtle-secondary);
+  border-color: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-secondary);
+}
+
+._control_sqdq4_10._enable-ligatures_sqdq4_62 {
+  font-feature-settings: var(--cpd-font-feature-settings);
+}
 /*
 Copyright 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
@@ -1720,329 +1469,268 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._toast-container_1xofk_8 {
-  inline-size: fit-content;
-  background-color: var(--cpd-color-alpha-gray-1300);
-  color: var(--cpd-color-text-on-solid-primary);
-  border-radius: 99px;
-  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.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-@keyframes _spin_11k6c_1 {
-  from {
-    transform: rotateZ(0deg);
-  }
+._controls_17lij_8 {
+  display: flex;
+  gap: 15px;
 
-  to {
-    transform: rotateZ(360deg);
+  & > input {
+    flex: 1;
+    min-inline-size: 0;
   }
 }
 
-._icon_11k6c_18 {
-  color: var(--cpd-color-icon-secondary);
-  display: inline-flex;
-  justify-content: center;
+._button-group_17lij_18 {
+  display: flex;
+  inset-block-start: var(--cpd-space-1x);
   align-items: center;
-  inline-size: 100%;
-  block-size: 100%;
-  animation: 1s linear _spin_11k6c_1 infinite;
+  gap: var(--cpd-space-2x);
 }
 /*
-Copyright 2023, 2024 New Vector Ltd.
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 New Vector Ltd
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._button_13vu4_8 {
-  border-radius: var(--cpd-radius-pill-effect);
-  cursor: pointer;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cpd-space-2x);
-  box-sizing: border-box;
-  font: var(--cpd-font-body-md-semibold);
-  transition-duration: 0.1s;
-  transition-property: color, background-color, border-color;
-}
-
-a._button_13vu4_8 {
-  /* Make the width match that of a real button */
-  inline-size: max-content;
-
-  /* Buttons should not be underlined */
-  text-decoration: none;
-}
-
-._button_13vu4_8 > svg {
-  transition: color 0.1s;
-}
-
-._button_13vu4_8[aria-disabled="true"] {
-  cursor: not-allowed;
-  pointer-events: all !important;
-  color: var(--cpd-color-text-disabled) !important;
-}
-
-._button_13vu4_8[aria-disabled="true"] > svg {
-  color: var(--cpd-color-icon-disabled) !important;
-}
+/* Styling the Radix UI Form component */
 
 /**
- * SIZES
+ * ROOT: Form Element
  */
 
-._button_13vu4_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_13vu4_53 {
-    padding-inline: var(--cpd-space-2x);
-    block-size: var(--cpd-space-12x);
-    inline-size: var(--cpd-space-12x);
-  }
-}
-
-._button_13vu4_8[data-size="lg"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
-  padding-inline-start: var(--cpd-space-7x);
-}
-
-._button_13vu4_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_13vu4_53 {
-    padding-inline: var(--cpd-space-1x);
-    block-size: var(--cpd-space-9x);
-    inline-size: var(--cpd-space-9x);
-  }
-}
-
-._button_13vu4_8[data-size="sm"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
-  padding-inline-start: var(--cpd-space-4x);
+._root_19upo_16 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-5x);
 }
 
 /**
- * KINDS
+ * FIELD: Wrapper around label, control and message
  */
 
-._button_13vu4_8[data-kind="primary"] {
-  color: var(--cpd-color-text-on-solid-primary);
-  background: var(--cpd-color-bg-action-primary-rest);
-  border-width: 0;
-}
-
-._button_13vu4_8[data-kind="primary"] > svg {
-  color: var(--cpd-color-icon-on-solid-primary);
-}
-
-@media (hover) {
-  ._button_13vu4_8[data-kind="primary"]:hover {
-    background: var(--cpd-color-bg-action-primary-hovered);
-  }
-}
-
-._button_13vu4_8[data-kind="primary"]:active,
-._button_13vu4_8[data-kind="primary"][aria-expanded="true"] {
-  background: var(--cpd-color-bg-action-primary-pressed);
-}
-
-._button_13vu4_8[data-kind="primary"][aria-disabled="true"] {
-  /* !important to override destructive background */
-  background: var(--cpd-color-bg-subtle-primary) !important;
-}
-
-._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110 {
-  background: var(--cpd-color-bg-critical-primary);
+._field_19upo_26 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-1x);
 }
 
-@media (hover) {
-  ._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:hover {
-    background: var(--cpd-color-bg-critical-hovered);
-  }
+._inline-field_19upo_32 {
+  display: flex;
+  flex-direction: row;
+  gap: var(--cpd-space-2x);
 }
 
-._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:active,
-._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110[aria-expanded="true"] {
-  /* TODO: We're waiting for this value to be formalized as a semantic token */
-  background: var(--cpd-color-red-1100);
+._inline-field-body_19upo_38 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-._button_13vu4_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);
-}
+._inline-field-control_19upo_44 {
+  /* The control should have the same height as the label */
+  block-size: calc(
+    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)
+  );
 
-._button_13vu4_8[data-kind="secondary"] > svg {
-  color: var(--cpd-color-icon-primary);
+  /* Align the control in the middle of the label */
+  display: flex;
+  align-items: center;
 }
 
-@media (hover) {
-  ._button_13vu4_8[data-kind="secondary"]:hover {
-    border-color: var(--cpd-color-border-interactive-hovered);
-    background: var(--cpd-color-bg-subtle-secondary);
-  }
-}
+/**
+ * LABEL
+ */
 
-._button_13vu4_8[data-kind="secondary"]:active,
-._button_13vu4_8[data-kind="secondary"][aria-expanded="true"] {
-  border-color: var(--cpd-color-border-interactive-hovered);
-  background: var(--cpd-color-bg-subtle-primary);
+._label_19upo_59 {
+  font: var(--cpd-font-body-md-medium);
+  letter-spacing: var(--cpd-font-letter-spacing-body-md);
 }
 
-._button_13vu4_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;
+._label_19upo_59[for] {
+  cursor: pointer;
 }
 
-._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 {
-  border-color: var(--cpd-color-border-critical-subtle);
+._label_19upo_59[data-invalid] {
   color: var(--cpd-color-text-critical-primary);
 }
 
-._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 > svg {
-  color: var(--cpd-color-icon-critical-primary);
+/* Currently working everywhere but on Firefox (only behind a labs flag)
+https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
+._label_19upo_59:has(~ * input[disabled]),
+._label_19upo_59:has(~ input[disabled]),
+._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._label_19upo_59 {
+  color: var(--cpd-color-text-disabled);
+  cursor: not-allowed;
 }
 
-@media (hover) {
-  ._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:hover {
-    border-color: var(--cpd-color-border-critical-hovered);
-    background: var(--cpd-color-bg-critical-subtle);
-  }
-}
+/**
+ * Help and error messages
+ */
 
-._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:active,
-._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110[aria-expanded="true"] {
-  border-color: var(--cpd-color-border-critical-hovered);
-  background: var(--cpd-color-bg-critical-subtle-hovered);
+._message_19upo_85 {
+  font: var(--cpd-font-body-sm-regular);
+  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
+  margin-block-start: var(--cpd-space-1x);
 }
 
-._button_13vu4_8[data-kind="tertiary"] {
-  border: none;
-  color: var(--cpd-color-text-primary);
-  text-decoration: underline;
-  background: transparent;
+._help-message_19upo_91 {
+  color: var(--cpd-color-text-secondary);
 }
 
-@media (hover) {
-  ._button_13vu4_8[data-kind="tertiary"]:hover {
-    background: var(--cpd-color-bg-subtle-secondary);
-  }
+._error-message_19upo_95 {
+  color: var(--cpd-color-text-critical-primary);
 }
 
-._button_13vu4_8[data-kind="tertiary"]:active,
-._button_13vu4_8[data-kind="tertiary"][aria-expanded="true"] {
-  background: var(--cpd-color-bg-subtle-primary);
+._success-message_19upo_99 {
+  color: var(--cpd-color-text-success-primary);
 }
 
-._button_13vu4_8[data-kind="tertiary"][aria-disabled="true"] {
+/* Currently working everywhere but on Firefox (only behind a labs flag)
+https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
+input[disabled] ~ ._message_19upo_85,
+*:has(input[disabled]) ~ ._message_19upo_85,
+._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._message_19upo_85 {
   color: var(--cpd-color-text-disabled);
-
-  /* !important to override destructive background */
-  background: transparent !important;
 }
 
-._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110 {
-  color: var(--cpd-color-text-critical-primary);
+._message_19upo_85 > svg {
+  display: inline-block;
+  vertical-align: bottom;
+  margin-inline-end: var(--cpd-space-2x);
+
+  /* Calculate the size of the icon based on the font size and line height */
+  block-size: calc(1em * var(--cpd-font-line-height-regular));
+  inline-size: calc(1em * var(--cpd-font-line-height-regular));
 }
+/*
+Copyright 2024 New Vector Ltd.
 
-@media (hover) {
-  ._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:hover {
-    background: var(--cpd-color-bg-critical-subtle);
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+@keyframes _spin_11k6c_1 {
+  from {
+    transform: rotateZ(0deg);
   }
-}
 
-._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:active,
-._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110[aria-expanded="true"] {
-  background: var(--cpd-color-bg-critical-subtle-hovered);
+  to {
+    transform: rotateZ(360deg);
+  }
 }
 
-@media (forced-colors: active) {
-  ._button_13vu4_8[data-kind="primary"] {
-    outline: 1px solid transparent;
-  }
+._icon_11k6c_18 {
+  color: var(--cpd-color-icon-secondary);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  animation: 1s linear _spin_11k6c_1 infinite;
 }
 /*
-Copyright 2023 New Vector Ltd.
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 New Vector Ltd
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1s836_8 {
-  display: inline-flex;
-  position: relative;
-}
+._container_43om7_10 {
+  --gap: var(--cpd-space-3x);
+  --digit-size: var(--cpd-space-10x);
+  --digit-height: var(--cpd-space-12x);
 
-._control_1s836_13 {
-  flex: 1;
-  padding-inline-end: var(--cpd-space-12x) !important;
+  display: flex;
+  inline-size: fit-content;
+  flex-direction: row;
+  gap: var(--gap);
 
-  /* From the flexbox spec:
-   *   "By default, flex items won’t shrink below their minimum content size"
-   * This allows the element to shrink lower than its natural default size.
-   */
-  min-inline-size: 0;
+  /* The input is positioned absolutely
+     so the container needs to be positioned relatively */
+  position: relative;
 }
 
-._action_1s836_24 {
+._control_43om7_25 {
   all: unset;
-  color: var(--cpd-color-icon-secondary);
-  background-color: transparent;
-  cursor: pointer;
+
+  /** TODO: semantic token */
+  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
+  font-weight: 700;
+
+  /* Position the input to fill the container */
   position: absolute;
-  inset-block: var(--cpd-space-2x);
-  inset-inline-end: var(--cpd-space-2x);
-  padding: var(--cpd-space-1x);
-  overflow: visible;
-  border-radius: 50%;
+  inset: 0;
+
+  /* Spacing between digits is set to the gap
+     plus the size of one digit box
+     minus the size of one character */
+  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
+  line-height: var(--digit-height);
+
+  /* The padding at the start positions the first digit at the middle of the digit box */
+  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));
+
+  /* The negative margin at the end is to keep space for the cursor when the input is full */
+  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
 }
 
-._action_1s836_24 > svg {
-  inline-size: var(--cpd-space-6x);
-  block-size: var(--cpd-space-6x);
+._digit_43om7_49 {
+  box-sizing: border-box;
+  inline-size: var(--cpd-space-10x);
+  block-size: var(--cpd-space-12x);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  background: var(--cpd-color-bg-canvas-default);
+  border-radius: 0.5rem;
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
 }
 
 @media (hover) {
-  ._action_1s836_24:hover {
-    color: var(--cpd-color-icon-primary);
-    background-color: var(--cpd-color-bg-subtle-secondary);
+  ._control_43om7_25:hover ~ ._digit_43om7_49 {
+    border-color: var(--cpd-color-border-interactive-hovered);
+
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 }
 
-._action_1s836_24:focus-visible {
-  outline: 2px solid var(--cpd-color-border-focused);
-  outline-offset: 1px;
+._control_43om7_25:disabled {
+  color: var(--cpd-color-text-disabled);
+  cursor: not-allowed;
 }
 
-._control_1s836_13[disabled] + ._action_1s836_24 {
-  pointer-events: none;
-  color: var(--cpd-color-text-disabled);
+._control_43om7_25:disabled ~ ._digit_43om7_49 {
+  box-shadow: none;
+  background: var(--cpd-color-bg-canvas-disabled);
+  border-color: var(--cpd-color-border-disabled);
 }
 
-._control_1s836_13[readonly] + ._action_1s836_24 {
-  pointer-events: none;
+._control_43om7_25[readonly] {
   color: var(--cpd-color-text-secondary);
 }
+
+._control_43om7_25[readonly] ~ ._digit_43om7_49 {
+  box-shadow: none;
+  background: var(--cpd-color-bg-subtle-secondary);
+  border-color: var(--cpd-color-bg-subtle-secondary);
+}
+
+._control_43om7_25[data-invalid] ~ ._digit_43om7_49 {
+  border-color: var(--cpd-color-text-critical-primary);
+}
+
+._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
+  outline: 2px solid var(--cpd-color-border-focused);
+  border-color: transparent;
+}
+
+._digit_43om7_49[data-selected] {
+  border-color: var(--cpd-color-border-focused);
+  background-color: var(--cpd-color-bg-info-subtle);
+}
 /*
 Copyright 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
@@ -2052,83 +1740,131 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._control_sqdq4_10 {
-  border: 1px solid var(--cpd-color-border-interactive-primary);
-  background: var(--cpd-color-bg-canvas-default);
-  border-radius: 0.5rem;
-  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+._container_1ug7n_10 {
+  --size: 20px;
+
+  display: grid;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+._input_1ug7n_18,
+._ui_1ug7n_19 {
   box-sizing: border-box;
+  grid-area: 1/1;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
 
-  /**
-  * Disable contextual alternate ligatures in inputs
-  * https://github.com/rsms/inter/issues/222
-  * https://github.com/rsms/inter/blob/master/src/features/calt.fea
-  */
-  font-feature-settings: "calt" 0;
+._input_1ug7n_18 {
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
 }
 
-@media (hover) {
-  ._control_sqdq4_10:hover {
-    border-color: var(--cpd-color-border-interactive-hovered);
+._ui_1ug7n_19 {
+  pointer-events: none;
+  border-radius: 50%;
+  border: 1px solid;
+  border-color: var(--cpd-color-border-interactive-primary);
+
+  /* To align the ::after pseudo-element to the center of the radio button */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+._ui_1ug7n_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_1ug7n_18:checked + ._ui_1ug7n_19 {
+  background-color: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
+  color: unset;
+}
+
+._input_1ug7n_18:checked + ._ui_1ug7n_19::after {
+  background: var(--cpd-color-icon-on-solid-primary);
+  border-color: var(--cpd-color-icon-on-solid-primary);
+  color: unset;
+}
 
-    /** TODO: have the shadow in the design tokens */
-    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
-  }
+._input_1ug7n_18:focus-visible + ._ui_1ug7n_19 {
+  outline: 2px solid var(--cpd-color-border-focused);
+  outline-offset: 1px;
 }
 
-._control_sqdq4_10:active {
-  border-color: var(--cpd-color-border-interactive-hovered);
+._input_1ug7n_18[readonly] {
+  pointer-events: none;
 }
 
-._control_sqdq4_10:focus {
-  outline: 2px solid var(--cpd-color-border-focused);
-  border-color: transparent;
+._input_1ug7n_18[readonly] + ._ui_1ug7n_19 {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._control_sqdq4_10[data-invalid] {
-  border-color: var(--cpd-color-text-critical-primary);
+._input_1ug7n_18[disabled] {
+  cursor: not-allowed;
 }
 
-._control_sqdq4_10:disabled {
-  box-shadow: none;
-  background: var(--cpd-color-bg-canvas-disabled);
+._input_1ug7n_18[disabled] + ._ui_1ug7n_19 {
   border-color: var(--cpd-color-border-disabled);
-  color: var(--cpd-color-text-disabled);
-  cursor: not-allowed;
+  background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._control_sqdq4_10[readonly] {
-  box-shadow: none;
-  background: var(--cpd-color-bg-subtle-secondary);
-  border-color: var(--cpd-color-bg-subtle-secondary);
-  color: var(--cpd-color-text-secondary);
+._input_1ug7n_18[disabled]:checked + ._ui_1ug7n_19 {
+  border-color: var(--cpd-color-bg-action-primary-disabled);
+  background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._control_sqdq4_10._enable-ligatures_sqdq4_62 {
-  font-feature-settings: var(--cpd-font-feature-settings);
+._input_1ug7n_18[readonly]:checked + ._ui_1ug7n_19::after {
+  background-color: var(--cpd-color-icon-secondary);
+  border-color: var(--cpd-color-icon-secondary);
+  color: unset;
 }
-/*
-Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+@media (hover) {
+  ._input_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_19 {
+    border-color: var(--cpd-color-bg-accent-hovered);
 
-._controls_17lij_8 {
-  display: flex;
-  gap: 15px;
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
 
-  & > input {
-    flex: 1;
-    min-inline-size: 0;
+  ._input_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_19::after {
+    background: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-icon-quaternary);
+    color: unset;
+  }
+
+  ._input_1ug7n_18:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
+    border-color: var(--cpd-color-bg-accent-hovered);
+    background: var(--cpd-color-bg-accent-hovered);
+  }
+
+  ._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
+    border-color: var(--cpd-color-bg-critical-hovered);
+    background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._button-group_17lij_18 {
-  display: flex;
-  inset-block-start: var(--cpd-space-1x);
-  align-items: center;
-  gap: var(--cpd-space-2x);
+._input_1ug7n_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1ug7n_19 {
+  border-color: var(--cpd-color-border-critical-primary);
+}
+
+._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1ug7n_19 {
+  background-color: var(--cpd-color-bg-critical-primary);
+  border-color: var(--cpd-color-bg-critical-primary);
 }
 /*
 Copyright 2025 New Vector Ltd.
@@ -2139,142 +1875,166 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_43om7_10 {
-  --gap: var(--cpd-space-3x);
-  --digit-size: var(--cpd-space-10x);
-  --digit-height: var(--cpd-space-12x);
+._container_udcm8_10 {
+  display: grid;
+  inline-size: 2.25rem;
+  block-size: 1.25rem;
+  box-sizing: border-box;
+}
 
-  display: flex;
-  inline-size: fit-content;
-  flex-direction: row;
-  gap: var(--gap);
+._container_udcm8_10 > * {
+  grid-area: 1/1;
+  inline-size: inherit;
+  block-size: inherit;
+  box-sizing: inherit;
+}
 
-  /* The input is positioned absolutely
-     so the container needs to be positioned relatively */
-  position: relative;
+._container_udcm8_10 > ._input_udcm8_24 {
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
 }
 
-._control_43om7_25 {
-  all: unset;
+._container_udcm8_10 > ._input_udcm8_24[disabled] {
+  cursor: not-allowed;
+}
 
-  /** TODO: semantic token */
-  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
-  font-weight: 700;
+._ui_udcm8_34 {
+  pointer-events: none;
+  border-radius: var(--cpd-radius-pill-effect);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  background: var(--cpd-color-bg-canvas-default);
+  position: relative;
+  padding: 1px;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-property: background-color, border-color;
+}
 
-  /* Position the input to fill the container */
-  position: absolute;
-  inset: 0;
+._input_udcm8_24:checked + ._ui_udcm8_34 {
+  background: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
+}
 
-  /* Spacing between digits is set to the gap
-     plus the size of one digit box
-     minus the size of one character */
-  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
-  line-height: var(--digit-height);
+._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-secondary);
 
-  /* The padding at the start positions the first digit at the middle of the digit box */
-  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));
+  content: "";
+  display: block;
+  block-size: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background: var(--dot-color);
 
-  /* The negative margin at the end is to keep space for the cursor when the input is full */
-  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
+  /* 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;
+  transition-property: background-color, transform;
 }
 
-._digit_43om7_49 {
-  box-sizing: border-box;
-  inline-size: var(--cpd-space-10x);
-  block-size: var(--cpd-space-12x);
-  border: 1px solid var(--cpd-color-border-interactive-primary);
-  background: var(--cpd-color-bg-canvas-default);
-  border-radius: 0.5rem;
-  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+/* Note the use of :focus-visible rather than :focus to avoid showing the focus
+ring after a simple click */
+._input_udcm8_24:focus-visible + ._ui_udcm8_34 {
+  outline: 2px solid var(--cpd-color-border-focused);
+  outline-offset: 1px;
 }
 
-@media (hover) {
-  ._control_43om7_25:hover ~ ._digit_43om7_49 {
-    border-color: var(--cpd-color-border-interactive-hovered);
+:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 
-    /** TODO: have the shadow in the design tokens */
-    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  transform: translateX(100%);
+}
+
+@media (hover) {
+  :checked:not([disabled]):hover + ._ui_udcm8_34 {
+    background: var(--cpd-color-bg-accent-hovered);
+    border-color: var(--cpd-color-bg-accent-hovered);
   }
 }
 
-._control_43om7_25:disabled {
-  color: var(--cpd-color-text-disabled);
-  cursor: not-allowed;
+:checked:active + ._ui_udcm8_34 {
+  background: var(--cpd-color-bg-accent-hovered);
+  border-color: var(--cpd-color-bg-accent-hovered);
 }
 
-._control_43om7_25:disabled ~ ._digit_43om7_49 {
-  box-shadow: none;
-  background: var(--cpd-color-bg-canvas-disabled);
+._input_udcm8_24[readonly] {
+  pointer-events: none;
+}
+
+._input_udcm8_24[readonly] + ._ui_udcm8_34 {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+._input_udcm8_24[readonly] + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-secondary);
+}
+
+._input_udcm8_24[disabled] + ._ui_udcm8_34 {
   border-color: var(--cpd-color-border-disabled);
+  background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._control_43om7_25[readonly] {
-  color: var(--cpd-color-text-secondary);
+._input_udcm8_24[disabled] + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._control_43om7_25[readonly] ~ ._digit_43om7_49 {
-  box-shadow: none;
-  background: var(--cpd-color-bg-subtle-secondary);
-  border-color: var(--cpd-color-bg-subtle-secondary);
+._input_udcm8_24[readonly]:checked + ._ui_udcm8_34 {
+  border-color: var(--cpd-color-icon-secondary);
+  background: var(--cpd-color-icon-secondary);
 }
 
-._control_43om7_25[data-invalid] ~ ._digit_43om7_49 {
-  border-color: var(--cpd-color-text-critical-primary);
+._input_udcm8_24[readonly]:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
 
-._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
-  outline: 2px solid var(--cpd-color-border-focused);
-  border-color: transparent;
+._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);
 }
 
-._digit_43om7_49[data-selected] {
-  border-color: var(--cpd-color-border-focused);
-  background-color: var(--cpd-color-bg-info-subtle);
+._input_udcm8_24[disabled]:checked + ._ui_udcm8_34::after {
+  --dot-color: var(--cpd-color-icon-on-solid-primary);
 }
-/*
-Copyright 2025 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-Copyright 2023 New Vector Ltd
+
+@media (hover) {
+  ._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 */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
+}
+
+._input_udcm8_24:not(:checked, [disabled], [readonly]):active + ._ui_udcm8_34 {
+  border-color: var(--cpd-color-border-interactive-hovered);
+}
+/*
+Copyright 2023 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-:root {
-  --cpd-radius-pill-effect: 9999px;
-
-  /* Default icon and avatar size */
-  --cpd-icon-button-size: var(--cpd-space-8x);
-  --cpd-avatar-size: var(--cpd-space-16x);
-
-  /**
-  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
-  * We need to tweak the `letter-spacing` property and doing so, disables by
-  * default the optional ligatures
-  * `font-feature-settings` allows us to override this behaviour and have the
-  * correct ligatures and the proper dynamic metric spacing.
-  */
-  --cpd-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-  --cpd-separator-spacing: var(--cpd-space-2x);
-  --cpd-separator-inset: 0;
-}
+._glass_sepwu_8 {
+  border-radius: var(--cpd-space-9x);
+  padding: var(--cpd-space-3x);
 
-html,
-body,
-input {
-  font: var(--cpd-font-body-md-regular);
-  color: var(--cpd-color-text-primary);
-  font-feature-settings: var(--cpd-font-feature-settings);
+  /* We use an outline here to create an "inner border", rather than one that
+  adds to the component's size */
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  background: var(--cpd-color-alpha-gray-400);
+  backdrop-filter: blur(20px);
 }
 
-html,
-body {
+._glass_sepwu_8 > :first-child {
+  border-radius: var(--cpd-space-6x);
+  inline-size: 100%;
   block-size: 100%;
-  font-size: var(--cpd-font-size-root);
-}
-
-body {
-  background: var(--cpd-color-bg-canvas-default);
 }
 /*
 Copyright 2024 New Vector Ltd.
@@ -2283,12 +2043,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._content_1r8kr_8 {
+._big-icon_1ssbv_8 {
   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;
@@ -2296,11 +2054,11 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._content_1r8kr_8[data-size="medium"] {
+._big-icon_1ssbv_8[data-size="md"] {
   padding: var(--cpd-space-3x);
 }
 
-._content_1r8kr_8[data-size="small"] {
+._big-icon_1ssbv_8[data-size="sm"] {
   padding: var(--cpd-space-3x);
 
   > svg {
@@ -2309,247 +2067,309 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._destructive_1r8kr_34 {
+._big-icon_1ssbv_8[data-kind="primary"] {
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-icon-primary);
+}
+
+._big-icon_1ssbv_8[data-kind="critical"] {
   background-color: var(--cpd-color-bg-critical-subtle);
   color: var(--cpd-color-icon-critical-primary);
 }
 
-._success_1r8kr_39 {
+._big-icon_1ssbv_8[data-kind="success"] {
   background-color: var(--cpd-color-bg-success-subtle);
   color: var(--cpd-color-icon-success-primary);
 }
 
 @media (forced-colors: active) {
-  ._content_1r8kr_8 {
+  ._big-icon_1ssbv_8 {
     outline: 1px solid transparent;
   }
 }
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2023 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._breadcrumb_1xygz_8 {
-  display: flex;
-  align-items: center;
-  block-size: 40px;
-  gap: var(--cpd-space-3x);
-  padding-block-end: var(--cpd-space-3x);
-  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
+._item_lqfwq_8 {
+  display: grid;
+  grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
+      /* Reserve space for the chevron so that the layout doesn't shift on
+      hover */
+      var(--cpd-space-2x),
+      1fr
+    );
+  place-items: center end;
+  padding-block: var(--cpd-space-2x);
+  padding-inline: var(--cpd-space-4x);
   box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 200px;
+  color: var(--cpd-color-text-secondary);
+  background: var(--cpd-color-bg-action-secondary-rest);
+}
 
-  ._pages_1xygz_17 {
-    display: flex;
-    gap: var(--cpd-space-1x);
+._item_lqfwq_8._interactive_lqfwq_26 {
+  cursor: pointer;
+}
 
-    /* override list styles */
-    list-style: none;
-    margin: 0;
-    padding: 0;
+._item_lqfwq_8._no-label_lqfwq_30 {
+  grid-template: "icon ." auto / auto 1fr;
+}
 
-    a {
-      cursor: pointer;
-    }
+._label_lqfwq_34 {
+  grid-area: label;
+  margin-inline-end: var(--cpd-space-4x);
+  text-align: start;
+  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
+}
 
-    ._last-page_1xygz_30 {
-      font: var(--cpd-font-body-sm-regular);
-      color: var(--cpd-color-text-secondary);
-    }
+._item_lqfwq_8._no-icon_lqfwq_41 {
+  grid-template: "label ." auto / auto 1fr;
 
-    /*
-     * Breadcrumb separator
-     * We want this separator to be only visual and to not be in the accessibility tree.
-     * The nav html element already provides an accessible way to separate the links.
-     */
-    li + li::before {
-      display: inline-block;
-      margin: 0 0.3em 0 0.25em;
-      transform: rotate(15deg);
-      border-inline-end: 1px solid var(--cpd-color-text-secondary);
-      block-size: var(--cpd-space-3x);
-      content: "";
-    }
+  ._label_lqfwq_34 {
+    /* Without icon, the height changes when hovered */
+    min-block-size: 24px;
+  }
+}
 
-    /* Last page */
-    :last-child {
-      span {
-        padding-inline-start: var(--cpd-space-1x);
-      }
-    }
+._icon_lqfwq_50 {
+  grid-area: icon;
+  margin-inline-end: var(--cpd-space-3x);
+}
+
+._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
+  margin-inline-end: var(--cpd-space-4x);
+}
+
+._nav-hint_lqfwq_59 {
+  /* Hidden until the item is hovered over */
+  display: none;
+  flex-shrink: 0;
+}
+
+button._item_lqfwq_8 {
+  appearance: none;
+  border: none;
+}
+
+._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
+  color: var(--cpd-color-text-primary);
+}
+
+._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
+  color: var(--cpd-color-icon-primary);
+}
+
+._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
+  color: var(--cpd-color-icon-tertiary);
+}
+
+._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
+  color: var(--cpd-color-text-critical-primary);
+}
+
+._item_lqfwq_8[data-kind="critical"] > ._icon_lqfwq_50,
+._item_lqfwq_8[data-kind="critical"] > ._nav-hint_lqfwq_59 {
+  color: var(--cpd-color-icon-critical-primary);
+}
+
+@media (hover) {
+  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
+    background: var(--cpd-color-bg-action-secondary-hovered);
+  }
+
+  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:hover {
+    background: var(--cpd-color-bg-critical-subtle);
+  }
+
+  /* Replace the children with the navigation hint on hover */
+  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 {
+    display: initial;
+  }
+
+  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
+    display: none;
   }
 }
+
+._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
+  background: var(--cpd-color-bg-action-secondary-pressed);
+}
+
+._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
+  background: var(--cpd-color-bg-critical-subtle-hovered);
+}
+
+._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
+  pointer-events: none;
+}
+
+._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._label_lqfwq_34,
+._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._icon_lqfwq_50,
+._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._nav-hint_lqfwq_59 {
+  color: var(--cpd-color-text-disabled);
+}
 /*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
+Copyright 2023 New Vector Ltd.
 
-._chat-filter_5qdp0_8 {
-  font: var(--cpd-font-body-sm-medium);
-  color: var(--cpd-color-text-primary);
-  background-color: transparent;
-  border: var(--cpd-border-width-1) solid
-    var(--cpd-color-border-interactive-secondary);
-  border-radius: 99px;
-  cursor: pointer;
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._bg_610zp_8 {
+  position: fixed;
+  inset: 0;
+
+  /* TODO: This value is used across modals and menu drawers, so would be worth
+  tokenizing */
+  background: rgb(3 12 27 / 52.8%);
+}
+
+._drawer_610zp_17 {
+  position: fixed;
+  background: var(--cpd-color-bg-canvas-default);
+  inset-block-end: 0;
+  inset-inline: 0;
+
+  /* Cap the inline content size at 520px, filling the rest of the space with
+  padding */
+  padding-inline: max(0px, calc((100% - 520px) / 2));
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cpd-space-1x) var(--cpd-space-2x);
+  flex-direction: column;
+
+  /* Drawer comes in the Android style by default */
+  --border-radius: 28px;
+  --handle-block-size: 4px;
+  --handle-inline-size: 32px;
+  --handle-inset-block-start: var(--cpd-space-4x);
+  --handle-inset-block-end: 0px;
+  --content-inset-block-start: calc(
+    var(--handle-inset-block-start) + var(--handle-block-size) +
+      var(--handle-inset-block-end)
+  );
+}
+
+._drawer_610zp_17[data-platform="ios"] {
+  --border-radius: 10px;
+  --handle-block-size: 5px;
+  --handle-inline-size: 36px;
+  --handle-inset-block-start: var(--cpd-space-1-5x);
+  --handle-inset-block-end: 1px;
 }
 
-@media (hover) {
-  ._chat-filter_5qdp0_8:hover {
-    border-color: var(--cpd-color-border-interactive-primary);
-    background: var(--cpd-color-bg-subtle-primary);
-  }
+._body_610zp_51 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-2x);
+  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))
+    var(--cpd-space-12x);
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+
+  /* Even with overflow: auto, the content can still overflow at the corners
+  where it meets with the curved border. A contain: paint fixes that. */
+  contain: paint;
+  overflow: auto;
+  scrollbar-width: none;
+
+  --cpd-separator-spacing: 0;
+  --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-._chat-filter_5qdp0_8[aria-selected="true"] {
-  border-color: var(--cpd-color-bg-action-primary-rest);
-  background: var(--cpd-color-bg-action-primary-rest);
-  color: var(--cpd-color-text-on-solid-primary);
+._body_610zp_51::before {
+  content: "";
+  position: absolute;
+  block-size: var(--handle-block-size);
+  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
+  inset-block-start: var(--handle-inset-block-start);
+  background: var(--cpd-color-icon-secondary);
+  border-radius: var(--cpd-radius-pill-effect);
 }
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2023 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_j0rlq_8 {
+._menu_1w1u7_8 {
+  border-radius: var(--cpd-space-3x);
+  background: var(--cpd-color-bg-canvas-default);
+
+  /* Here we use outline to create a border internal to the container. The Radix
+  menu component may try to override it with outline: none, hence the need for
+  !important. */
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary) !important;
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
+  inline-size: fit-content;
+  max-inline-size: 320px;
   display: flex;
   flex-direction: column;
+  gap: var(--cpd-space-1x);
+  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);
 
-  label {
-    font: var(--cpd-font-body-md-medium);
-    margin-block-end: var(--cpd-space-1x);
-  }
-
-  button {
-    inline-size: 100%;
-    border: 1px solid var(--cpd-color-border-interactive-primary);
-    background: var(--cpd-color-bg-canvas-default);
-    border-radius: 0.5rem;
-    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)
-      var(--cpd-space-4x);
-    box-sizing: border-box;
-    color: var(--cpd-color-text-primary);
-    font: var(--cpd-font-body-md-regular);
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--cpd-space-4x);
-
-    svg {
-      transition: transform 0.1s linear;
-    }
-  }
-
-  /**
-   * When the dropdown is open, rotate the arrow icon
-   */
-  button[aria-expanded="true"] {
-    svg {
-      transform: rotate(180deg);
-    }
-  }
-
-  button._placeholder_j0rlq_47 {
-    color: var(--cpd-color-text-secondary);
-  }
+  --cpd-separator-spacing: 0;
+  --cpd-separator-inset: var(--cpd-space-4x);
+}
 
-  ._border_j0rlq_51 {
-    display: none;
-    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
-    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
-    block-size: var(--cpd-space-1x);
-    margin-block-start: calc(var(--cpd-space-1x) * -1);
-    box-sizing: border-box;
+@keyframes _slide-in_1w1u7_1 {
+  from {
+    opacity: 0;
+    transform: translate(0, var(--cpd-space-3x));
   }
+}
 
-  ._content_j0rlq_60 {
-    display: none;
-    position: relative;
-
-    ul {
-      /**
-       * To make the component going over the other elements
-       */
-      position: absolute;
-      display: block;
-      inline-size: 100%;
-      background: var(--cpd-color-bg-canvas-default);
-      border: 1px solid var(--cpd-color-border-interactive-secondary);
-      border-block-start: 0;
-      border-end-start-radius: var(--cpd-space-4x);
-      border-end-end-radius: var(--cpd-space-4x);
-      box-sizing: border-box;
-      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
-      margin: 0;
-      padding: 0;
-      padding-block-end: var(--cpd-space-4x);
-      cursor: pointer;
-
-      li {
-        list-style: none;
-        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);
-        color: var(--cpd-color-text-secondary);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--cpd-space-4x);
-
-        @media (hover) {
-          &:hover {
-            background: var(--cpd-color-gray-200);
-          }
-        }
-
-        &[aria-selected="true"] {
-          color: var(--cpd-color-text-primary);
-          background: var(--cpd-color-gray-300);
-        }
-      }
-    }
-  }
+._menu_1w1u7_8[data-state="open"] {
+  animation: _slide-in_1w1u7_1 180ms;
+}
 
-  ._open_j0rlq_108 {
-    display: block;
+@keyframes _fade-in_1w1u7_1 {
+  from {
+    opacity: 0;
   }
+}
 
-  ._help_j0rlq_112 {
-    font: var(--cpd-font-body-sm-regular);
-    color: var(--cpd-color-text-secondary);
+@keyframes _fade-out_1w1u7_1 {
+  to {
+    opacity: 0;
   }
+}
 
-  ._error_j0rlq_117 {
-    font: var(--cpd-font-body-sm-medium);
-    color: var(--cpd-color-text-critical-primary);
-    display: flex;
-    gap: var(--cpd-space-2x);
+@media (prefers-reduced-motion) {
+  ._menu_1w1u7_8[data-state="open"] {
+    animation-name: _fade-in_1w1u7_1;
   }
 
-  ._error_j0rlq_117,
-  ._help_j0rlq_112 {
-    margin-block-start: var(--cpd-space-2x);
+  ._menu_1w1u7_8[data-state="closed"] {
+    animation-name: _fade-out_1w1u7_1;
   }
+}
 
-  &[aria-invalid="true"] {
-    label {
-      color: var(--cpd-color-text-critical-primary);
-    }
+._title_1w1u7_63 {
+  /** Override MenuTitle margin top **/
+  margin-block-start: 0 !important;
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
-    button {
-      border-color: var(--cpd-color-text-critical-primary);
-    }
-  }
+._menu-title_1sgvx_8 {
+  color: var(--cpd-color-text-secondary);
+  padding-inline: var(--cpd-space-4x);
+  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
+  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+  margin-block: var(--cpd-space-2x);
 }
 /* Copyright 2025 New Vector Ltd.
  * Copyright 2023 The Matrix.org Foundation C.I.C.
@@ -2558,30 +2378,30 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._nav-bar_z70g4_8 {
+._nav-bar_1e9qm_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_z70g4_14 {
+._nav-bar-items_1e9qm_14 {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   gap: var(--cpd-space-3x);
-  list-style: none;
+  list-style-type: "";
   padding: 0;
   margin: 0;
 }
 
-._nav-tab_z70g4_25 {
+._nav-tab_1e9qm_25 {
   padding: var(--cpd-space-4x) 0;
   position: relative;
 }
 
 /* Underline effect */
-._nav-tab_z70g4_25::before {
+._nav-tab_1e9qm_25::before {
   content: "";
   position: absolute;
   inset-block-end: 0;
@@ -2592,12 +2412,12 @@ Please see LICENSE files in the repository root for full details.
   transition: height 0.1s ease-in-out;
 }
 
-._nav-tab_z70g4_25[data-current]::before {
+._nav-tab_1e9qm_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_z70g4_47 {
+._nav-item_1e9qm_47 {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-2x);
   border-radius: var(--cpd-radius-pill-effect);
@@ -2615,60 +2435,121 @@ Please see LICENSE files in the repository root for full details.
   text-decoration: none;
 }
 
-@media (hover) {
-  ._nav-item_z70g4_47:not([disabled]):hover {
-    color: var(--cpd-color-text-primary);
-    background-color: var(--cpd-color-bg-subtle-secondary);
+@media (hover) {
+  ._nav-item_1e9qm_47:not([disabled]):hover {
+    color: var(--cpd-color-text-primary);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+  }
+}
+
+._nav-item_1e9qm_47:focus-visible {
+  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
+}
+
+._nav-item_1e9qm_47:not([disabled]):active {
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
+}
+
+._nav-item_1e9qm_47[aria-current],
+._nav-item_1e9qm_47[aria-selected="true"] {
+  color: var(--cpd-color-text-primary);
+}
+
+._nav-item_1e9qm_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_1e9qm_25[data-current]::before {
+    outline: 1px solid transparent;
+  }
+}
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._progress-bar_1l6pa_8 {
+  position: relative;
+  background-color: var(--cpd-color-gray-200);
+  border: 1px solid var(--cpd-color-gray-400);
+  border-radius: var(--cpd-radius-pill-effect);
+  overflow: hidden;
+
+  &[data-size="sm"] {
+    block-size: var(--cpd-space-2x);
+  }
+
+  &[data-size="lg"] {
+    block-size: var(--cpd-space-4x);
+  }
+}
+
+._progress-bar-container_1l6pa_24 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-1x);
+
+  --cpd-progress-bar-main: var(--cpd-color-text-secondary);
+  --cpd-progress-bar-muted: var(--cpd-color-gray-800);
+
+  &[data-tint="green"] {
+    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);
+    --cpd-progress-bar-muted: var(--cpd-color-green-800);
   }
-}
 
-._nav-item_z70g4_47:focus-visible {
-  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
-}
+  &[data-tint="lime"] {
+    --cpd-progress-bar-main: var(--cpd-color-lime-900);
+    --cpd-progress-bar-muted: var(--cpd-color-lime-800);
+  }
 
-._nav-item_z70g4_47:not([disabled]):active {
-  color: var(--cpd-color-text-primary);
-  background-color: var(--cpd-color-bg-subtle-primary);
-}
+  &[data-tint="orange"] {
+    --cpd-progress-bar-main: var(--cpd-color-orange-900);
+    --cpd-progress-bar-muted: var(--cpd-color-orange-800);
+  }
 
-._nav-item_z70g4_47[aria-current],
-._nav-item_z70g4_47[aria-selected="true"] {
-  color: var(--cpd-color-text-primary);
+  &[data-tint="red"] {
+    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);
+    --cpd-progress-bar-muted: var(--cpd-color-red-800);
+  }
 }
 
-._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);
+._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);
 }
 
-@media (forced-colors: active) {
-  ._nav-tab_z70g4_25[data-current]::before {
-    outline: 1px solid transparent;
-  }
-}
-/*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
+._progress-bar-indicator_1l6pa_59 {
+  position: absolute;
+  inset: 0;
+  transition: transform 0.2s ease-in-out;
+  background-image: linear-gradient(
+    135deg,
+    var(--cpd-progress-bar-muted) 0%,
+    var(--cpd-progress-bar-muted) 25%,
+    var(--cpd-progress-bar-main) 25%,
+    var(--cpd-progress-bar-main) 50%,
+    var(--cpd-progress-bar-muted) 50%,
+    var(--cpd-progress-bar-muted) 75%,
+    var(--cpd-progress-bar-main) 75%,
+    var(--cpd-progress-bar-main) 100%,
+    var(--cpd-progress-bar-muted) 100%
+  );
 
-._pill_187tn_8 {
-  border-radius: 38px;
-  font: var(--cpd-font-body-xs-semibold);
-  color: var(--cpd-color-text-on-solid-primary);
-  background-color: var(--cpd-color-icon-success-primary);
-  padding: 0 var(--cpd-space-2x);
-  block-size: 20px;
-  display: inline-flex;
-  align-items: center;
+  /* 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) {
-  ._pill_187tn_8 {
+  ._progress-bar-indicator_1l6pa_59 {
     outline: 1px solid transparent;
   }
 }
@@ -2734,53 +2615,134 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 /*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
+Copyright 2023 New Vector Ltd.
 
-._unread_cti0f_8 {
-  inline-size: 20px;
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._search_b2pjl_8 {
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  border-radius: 9999px;
+  block-size: 36px;
+  box-sizing: border-box;
+  color: var(--cpd-color-text-primary);
   display: flex;
-  justify-content: center;
 
-  div {
-    block-size: 8px;
-    inline-size: 8px;
-    background-color: var(--cpd-color-icon-secondary);
-    border-radius: 100%;
+  /* !important to override Field's default flex settings */
+  flex-direction: row !important;
+  gap: var(--cpd-space-2x) !important;
+  align-items: center;
+  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
+}
+
+@media (hover) {
+  ._search_b2pjl_8:hover {
+    border-color: var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+._search_b2pjl_8:active {
+  border-color: var(--cpd-color-border-interactive-hovered);
+}
+
+._search_b2pjl_8:focus-within {
+  border-color: currentcolor;
+}
+
+._icon_b2pjl_37 {
+  color: var(--cpd-color-icon-secondary);
+  flex-shrink: 0;
+}
+
+@media (hover) {
+  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
+    color: var(--cpd-color-icon-primary);
+  }
+}
+
+._search_b2pjl_8:active ._icon_b2pjl_37 {
+  color: var(--cpd-color-icon-primary);
+}
+
+._input_b2pjl_52 {
+  border: 0;
+  background: inherit;
+  outline: 0;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+._input_b2pjl_52::placeholder {
+  color: var(--cpd-color-text-secondary);
+}
+
+._input_b2pjl_52:focus::placeholder {
+  color: var(--cpd-color-text-secondary);
+}
+
+@media (hover) {
+  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
+    color: var(--cpd-color-text-secondary);
   }
 }
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._separator_13qwf_8 {
+  --cpd-separator-color: var(--cpd-color-separator-primary);
+  --cpd-separator-size: 1px;
+
+  background-color: var(--cpd-separator-color);
+}
+
+._separator_13qwf_8[data-kind="secondary"] {
+  --cpd-separator-color: var(--cpd-color-separator-secondary);
+}
+
+._separator_13qwf_8[data-kind="section"] {
+  --cpd-separator-size: 2px;
+}
+
+._separator_13qwf_8[data-orientation="horizontal"] {
+  margin-block: var(--cpd-separator-spacing);
+  margin-inline: var(--cpd-separator-inset);
+  block-size: var(--cpd-separator-size);
+}
+
+._separator_13qwf_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) {
-  ._unread_cti0f_8 div {
+  ._separator_13qwf_8 {
     outline: 1px solid transparent;
   }
 }
 /*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
+Copyright 2024 New Vector Ltd.
 
-._unread-counter_1147r_8 {
-  border-radius: 38px;
-  font: var(--cpd-font-body-xs-semibold);
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._toast-container_1xofk_8 {
+  inline-size: fit-content;
+  background-color: var(--cpd-color-alpha-gray-1300);
   color: var(--cpd-color-text-on-solid-primary);
-  background-color: var(--cpd-color-icon-success-primary);
-  block-size: 20px;
-  min-inline-size: 20px;
-  padding: 0 var(--cpd-space-1-5x);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+  border-radius: 99px;
+  font-size: var(--cpd-font-body-sm-medium);
+  padding: var(--cpd-space-2x) var(--cpd-space-4x);
 }
 
 @media (forced-colors: active) {
-  ._unread-counter_1147r_8 {
+  ._toast-container_1xofk_8 {
     outline: 1px solid transparent;
   }
 }
@@ -2791,19 +2753,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._visual-list_1mgc1_8 {
+._visual-list_6zpfn_8 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
   margin: 0;
   padding: 0;
-  list-style-type: none;
+  list-style-type: "";
   border-radius: var(--cpd-space-3x);
   overflow: hidden;
 }
 
 @media (forced-colors: active) {
-  ._visual-list_1mgc1_8 {
+  ._visual-list_6zpfn_8 {
     outline: 1px solid transparent;
   }
 }
@@ -2841,3 +2803,49 @@ Please see LICENSE files in the repository root for full details.
     outline: 1px solid transparent;
   }
 }
+/*
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+:root {
+  --cpd-radius-pill-effect: 9999px;
+
+  /* Default icon and avatar size */
+  --cpd-icon-button-size: var(--cpd-space-8x);
+  --cpd-avatar-size: var(--cpd-space-16x);
+
+  /**
+  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
+  * We need to tweak the `letter-spacing` property and doing so, disables by
+  * default the optional ligatures
+  * `font-feature-settings` allows us to override this behaviour and have the
+  * correct ligatures and the proper dynamic metric spacing.
+  */
+  --cpd-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
+  --cpd-separator-spacing: var(--cpd-space-2x);
+  --cpd-separator-inset: 0;
+}
+
+html,
+body,
+input {
+  font: var(--cpd-font-body-md-regular);
+  color: var(--cpd-color-text-primary);
+  font-feature-settings: var(--cpd-font-feature-settings);
+}
+
+html,
+body {
+  block-size: 100%;
+  font-size: var(--cpd-font-size-root);
+}
+
+body {
+  background: var(--cpd-color-bg-canvas-default);
+}
+/*$vite$:1*/