@vector-im/compound-web 8.3.5 → 8.4.0

package/dist/style.css

@@ -647,7 +647,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._menu_1glhz_8 {
+._menu_1w1u7_8 {
   border-radius: var(--cpd-space-3x);
   background: var(--cpd-color-bg-canvas-default);
 
@@ -669,51 +669,40 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-@keyframes _slide-in_1glhz_1 {
+@keyframes _slide-in_1w1u7_1 {
   from {
     opacity: 0;
     transform: translate(0, var(--cpd-space-3x));
   }
 }
 
-@keyframes _slide-out_1glhz_1 {
-  to {
-    opacity: 0;
-    transform: translate(0, var(--cpd-space-2x));
-  }
-}
-
-._menu_1glhz_8[data-state="open"] {
-  animation: _slide-in_1glhz_1 180ms;
-}
-
-._menu_1glhz_8[data-state="closed"] {
-  animation: _slide-out_1glhz_1 110ms;
+._menu_1w1u7_8[data-state="open"] {
+  animation: _slide-in_1w1u7_1 180ms;
 }
 
-@keyframes _fade-in_1glhz_1 {
+@keyframes _fade-in_1w1u7_1 {
   from {
     opacity: 0;
   }
 }
 
-@keyframes _fade-out_1glhz_1 {
+@keyframes _fade-out_1w1u7_1 {
   to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion) {
-  ._menu_1glhz_8[data-state="open"] {
-    animation-name: _fade-in_1glhz_1;
+  ._menu_1w1u7_8[data-state="open"] {
+    animation-name: _fade-in_1w1u7_1;
   }
 
-  ._menu_1glhz_8[data-state="closed"] {
-    animation-name: _fade-out_1glhz_1;
+  ._menu_1w1u7_8[data-state="closed"] {
+    animation-name: _fade-out_1w1u7_1;
   }
 }
 
-._title_1glhz_74 {
+._title_1w1u7_63 {
   /** Override MenuTitle margin top **/
   margin-block-start: 0 !important;
 }
@@ -809,16 +798,6 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-icon-secondary);
   border-radius: var(--cpd-radius-pill-effect);
 }
-/*
- * 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.
- */
-
-._content_vnv5k_8[data-state="closed"] {
-  animation: none;
-}
 /*
 Copyright 2023 New Vector Ltd.
 
@@ -1027,7 +1006,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1qhtc_10 {
+._container_1ug7n_10 {
   --size: 20px;
 
   display: grid;
@@ -1035,21 +1014,21 @@ Please see LICENSE files in the repository root for full details.
   block-size: var(--size);
 }
 
-._input_1qhtc_18,
-._ui_1qhtc_19 {
+._input_1ug7n_18,
+._ui_1ug7n_19 {
   box-sizing: border-box;
   grid-area: 1/1;
   inline-size: var(--size);
   block-size: var(--size);
 }
 
-._input_1qhtc_18 {
+._input_1ug7n_18 {
   opacity: 0;
   margin: 0;
   cursor: pointer;
 }
 
-._ui_1qhtc_19 {
+._ui_1ug7n_19 {
   pointer-events: none;
   border-radius: 50%;
   border: 1px solid;
@@ -1061,7 +1040,7 @@ Please see LICENSE files in the repository root for full details.
   justify-content: center;
 }
 
-._ui_1qhtc_19::after {
+._ui_1ug7n_19::after {
   content: "";
   inline-size: 6px;
   block-size: 6px;
@@ -1074,78 +1053,82 @@ Please see LICENSE files in the repository root for full details.
   color: transparent;
 }
 
-._input_1qhtc_18:checked + ._ui_1qhtc_19 {
+._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_1qhtc_18:checked + ._ui_1qhtc_19::after {
+._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_1qhtc_18:focus-visible + ._ui_1qhtc_19 {
+._input_1ug7n_18:focus-visible + ._ui_1ug7n_19 {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }
 
-._input_1qhtc_18[readonly] {
+._input_1ug7n_18[readonly] {
   pointer-events: none;
 }
 
-._input_1qhtc_18[readonly] + ._ui_1qhtc_19 {
+._input_1ug7n_18[readonly] + ._ui_1ug7n_19 {
   border-color: var(--cpd-color-border-interactive-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._input_1qhtc_18[disabled] + ._ui_1qhtc_19 {
+._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_1qhtc_18[disabled]:checked + ._ui_1qhtc_19 {
+._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_1qhtc_18[readonly]:checked + ._ui_1qhtc_19::after {
+._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;
 }
 
 @media (hover) {
-  ._input_1qhtc_18:not([disabled], [readonly], :checked):hover + ._ui_1qhtc_19 {
+  ._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_1qhtc_18:not([disabled], [readonly], :checked):hover + ._ui_1qhtc_19::after {
+  ._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_1qhtc_18:not([disabled], [readonly]):checked:hover + ._ui_1qhtc_19 {
+  ._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_1qhtc_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1qhtc_19 {
+  ._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);
   }
 }
 
-._input_1qhtc_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1qhtc_19 {
+._input_1ug7n_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1ug7n_19 {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-._input_1qhtc_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1qhtc_19 {
+._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);
 }
@@ -1618,7 +1601,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1md5v_10 {
+._container_153f2_10 {
   --size: 20px;
 
   display: grid;
@@ -1626,28 +1609,28 @@ Please see LICENSE files in the repository root for full details.
   block-size: var(--size);
 }
 
-._input_1md5v_18,
-._ui_1md5v_19 {
+._input_153f2_18,
+._ui_153f2_19 {
   box-sizing: border-box;
   grid-area: 1/1;
   inline-size: var(--size);
   block-size: var(--size);
 }
 
-._input_1md5v_18 {
+._input_153f2_18 {
   opacity: 0;
   margin: 0;
   cursor: pointer;
 }
 
-._ui_1md5v_19 {
+._ui_153f2_19 {
   pointer-events: none;
   border-radius: 4px; /* TODO: Ought to be a token */
   border: 1px solid;
   border-color: var(--cpd-color-border-interactive-primary);
 }
 
-._ui_1md5v_19 svg {
+._ui_153f2_19 svg {
   inline-size: var(--size);
   block-size: var(--size);
 
@@ -1658,71 +1641,75 @@ Please see LICENSE files in the repository root for full details.
   color: transparent;
 }
 
-._input_1md5v_18:checked + ._ui_1md5v_19 {
+._input_153f2_18:checked + ._ui_153f2_19 {
   background-color: var(--cpd-color-bg-accent-rest);
   border-color: var(--cpd-color-bg-accent-rest);
 }
 
-._input_1md5v_18:checked + ._ui_1md5v_19 svg {
+._input_153f2_18:checked + ._ui_153f2_19 svg {
   color: var(--cpd-color-icon-on-solid-primary);
 }
 
-._input_1md5v_18:focus-visible + ._ui_1md5v_19 {
+._input_153f2_18:focus-visible + ._ui_153f2_19 {
   outline: 2px solid var(--cpd-color-border-focused);
   outline-offset: 1px;
 }
 
-._input_1md5v_18[disabled] + ._ui_1md5v_19 {
+._input_153f2_18[disabled] {
+  cursor: not-allowed;
+}
+
+._input_153f2_18[disabled] + ._ui_153f2_19 {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
 }
 
-._input_1md5v_18[readonly] {
+._input_153f2_18[readonly] {
   pointer-events: none;
 }
 
-._input_1md5v_18[readonly] + ._ui_1md5v_19 {
+._input_153f2_18[readonly] + ._ui_153f2_19 {
   border-color: var(--cpd-color-border-interactive-secondary);
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
-._input_1md5v_18[disabled]:checked + ._ui_1md5v_19 {
+._input_153f2_18[disabled]:checked + ._ui_153f2_19 {
   border-color: var(--cpd-color-bg-action-primary-disabled);
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
-._input_1md5v_18[readonly]:checked + ._ui_1md5v_19 svg {
+._input_153f2_18[readonly]:checked + ._ui_153f2_19 svg {
   color: var(--cpd-color-icon-secondary);
 }
 
 @media (hover) {
-  ._input_1md5v_18:not([disabled], [readonly], :checked):hover + ._ui_1md5v_19 {
+  ._input_153f2_18:not([disabled], [readonly], :checked):hover + ._ui_153f2_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_1md5v_18:not([disabled], [readonly], :checked):hover + ._ui_1md5v_19 svg {
+  ._input_153f2_18:not([disabled], [readonly], :checked):hover + ._ui_153f2_19 svg {
     color: var(--cpd-color-icon-quaternary);
   }
 
-  ._input_1md5v_18:not([disabled], [readonly]):checked:hover + ._ui_1md5v_19 {
+  ._input_153f2_18:not([disabled], [readonly]):checked:hover + ._ui_153f2_19 {
     border-color: var(--cpd-color-bg-accent-hovered);
     background: var(--cpd-color-bg-accent-hovered);
   }
 
-  ._input_1md5v_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1md5v_19 {
+  ._input_153f2_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_153f2_19 {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._input_1md5v_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1md5v_19 {
+._input_153f2_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_153f2_19 {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-._input_1md5v_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1md5v_19 {
+._input_153f2_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_153f2_19 {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
@@ -2121,6 +2108,29 @@ Please see LICENSE files in the repository root for full details.
   font-feature-settings: var(--cpd-font-feature-settings);
 }
 /*
+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.
+*/
+
+._controls_17lij_8 {
+  display: flex;
+  gap: 15px;
+
+  & > input {
+    flex: 1;
+    min-inline-size: 0;
+  }
+}
+
+._button-group_17lij_18 {
+  display: flex;
+  inset-block-start: var(--cpd-space-1x);
+  align-items: center;
+  gap: var(--cpd-space-2x);
+}
+/*
 Copyright 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 Copyright 2023 New Vector Ltd
@@ -2222,29 +2232,6 @@ Please see LICENSE files in the repository root for full details.
   background-color: var(--cpd-color-bg-info-subtle);
 }
 /*
-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.
-*/
-
-._controls_17lij_8 {
-  display: flex;
-  gap: 15px;
-
-  & > input {
-    flex: 1;
-    min-inline-size: 0;
-  }
-}
-
-._button-group_17lij_18 {
-  display: flex;
-  inset-block-start: var(--cpd-space-1x);
-  align-items: center;
-  gap: var(--cpd-space-2x);
-}
-/*
 Copyright 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 Copyright 2023 New Vector Ltd
@@ -2337,103 +2324,94 @@ 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.
- *
- * 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.
 
-._nav-bar_z70g4_8 {
-  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-  margin: var(--cpd-space-6x) 0;
-  padding: 0;
-}
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
 
-._nav-bar-items_z70g4_14 {
+._breadcrumb_1xygz_8 {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
   align-items: center;
+  block-size: 40px;
   gap: var(--cpd-space-3x);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+  padding-block-end: var(--cpd-space-3x);
+  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
+  box-sizing: border-box;
 
-._nav-tab_z70g4_25 {
-  padding: var(--cpd-space-4x) 0;
-  position: relative;
-}
+  ._pages_1xygz_17 {
+    display: flex;
+    gap: var(--cpd-space-1x);
 
-/* Underline effect */
-._nav-tab_z70g4_25::before {
-  content: "";
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  block-size: 0;
-  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  transition: height 0.1s ease-in-out;
-}
+    /* override list styles */
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-._nav-tab_z70g4_25[data-current]::before {
-  /* This is not exactly right: designs says 3px, but there are no variables for that */
-  block-size: var(--cpd-border-width-4);
+    a {
+      cursor: pointer;
+    }
+
+    ._last-page_1xygz_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 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.
+ */
 
-._nav-item_z70g4_47 {
-  padding-block: var(--cpd-space-1x);
-  padding-inline: var(--cpd-space-2x);
-  border-radius: var(--cpd-radius-pill-effect);
+._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;
-  appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--cpd-space-2x);
-  box-sizing: border-box;
-  background: transparent;
-  border: 0;
-  font: var(--cpd-font-body-md-medium);
-  color: var(--cpd-color-text-secondary);
-  text-decoration: none;
+  padding: var(--cpd-space-1x) var(--cpd-space-2x);
 }
 
 @media (hover) {
-  ._nav-item_z70g4_47:not([disabled]):hover {
-    color: var(--cpd-color-text-primary);
-    background-color: var(--cpd-color-bg-subtle-secondary);
+  ._chat-filter_5qdp0_8:hover {
+    border-color: var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-subtle-primary);
   }
 }
 
-._nav-item_z70g4_47:focus-visible {
-  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
-}
-
-._nav-item_z70g4_47:not([disabled]):active {
-  color: var(--cpd-color-text-primary);
-  background-color: var(--cpd-color-bg-subtle-primary);
-}
-
-._nav-item_z70g4_47[aria-current],
-._nav-item_z70g4_47[aria-selected="true"] {
-  color: var(--cpd-color-text-primary);
-}
-
-._nav-item_z70g4_47[disabled] {
-  cursor: not-allowed;
-
-  /* Enable pointer events for svgs even with fill=none */
-  pointer-events: all !important;
-  color: var(--cpd-color-text-disabled);
-}
-
-@media (forced-colors: active) {
-  ._nav-tab_z70g4_25[data-current]::before {
-    outline: 1px solid transparent;
-  }
+._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.
@@ -2442,75 +2420,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._content_16f2y_8 {
-  /* 320px + 20px padding left + 20px padding right */
-  max-inline-size: 320px;
-  border-radius: var(--cpd-space-3x);
-  background: var(--cpd-color-bg-action-primary-rest);
-  padding: var(--cpd-space-5x) var(--cpd-space-6x);
-
-  /* from figma */
-  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
-
-  /*
-  * Grid, we want to have the following layout:
-  * ----------------------------------
-  * -  ---------------   ----------  -
-  * -  | heading     |   |        |  -
-  * -  --------------    | button |  -
-  * -  ---------------   | button |  -
-  * -  | description |   |        |  -
-  * -  ---------------   ----------  -
-  * ----------------------------------
-  */
-  display: grid;
-  grid-template:
-    "header button" auto
-    "description button" auto;
-  align-items: center;
-  column-gap: var(--cpd-space-6x);
-}
+._container_j0rlq_8 {
+  display: flex;
+  flex-direction: column;
 
-._header_16f2y_37 {
-  margin: 0;
-  color: var(--cpd-color-text-on-solid-primary);
-  grid-area: header;
-}
-
-._description_16f2y_43 {
-  color: var(--cpd-color-gray-500);
-  grid-area: description;
-}
-
-._button_16f2y_48 {
-  color: var(--cpd-color-bg-subtle-secondary);
-  grid-area: button;
-}
-
-._arrow_16f2y_53 {
-  fill: var(--cpd-color-bg-action-primary-rest);
-}
-
-@media (forced-colors: active) {
-  ._content_16f2y_8 {
-    outline: 1px solid transparent;
-  }
-}
-/*
-Copyright 2024 New Vector Ltd.
-
-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 {
-  display: flex;
-  flex-direction: column;
-
-  label {
-    font: var(--cpd-font-body-md-medium);
-    margin-block-end: var(--cpd-space-1x);
-  }
+  label {
+    font: var(--cpd-font-body-md-medium);
+    margin-block-end: var(--cpd-space-1x);
+  }
 
   button {
     inline-size: 100%;
@@ -2634,116 +2551,185 @@ Please see LICENSE files in the repository root for full details.
     }
   }
 }
-/*
-Copyright 2024 New Vector Ltd.
+/* Copyright 2025 New Vector Ltd.
+ * Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+._nav-bar_z70g4_8 {
+  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+  margin: var(--cpd-space-6x) 0;
+  padding: 0;
+}
 
-._breadcrumb_1xygz_8 {
+._nav-bar-items_z70g4_14 {
   display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
   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;
-
-  ._pages_1xygz_17 {
-    display: flex;
-    gap: var(--cpd-space-1x);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
 
-    /* override list styles */
-    list-style: none;
-    margin: 0;
-    padding: 0;
+._nav-tab_z70g4_25 {
+  padding: var(--cpd-space-4x) 0;
+  position: relative;
+}
 
-    a {
-      cursor: pointer;
-    }
+/* Underline effect */
+._nav-tab_z70g4_25::before {
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: 0;
+  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  transition: height 0.1s ease-in-out;
+}
 
-    ._last-page_1xygz_30 {
-      font: var(--cpd-font-body-sm-regular);
-      color: var(--cpd-color-text-secondary);
-    }
+._nav-tab_z70g4_25[data-current]::before {
+  /* This is not exactly right: designs says 3px, but there are no variables for that */
+  block-size: var(--cpd-border-width-4);
+}
 
-    /*
-     * 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: "";
-    }
+._nav-item_z70g4_47 {
+  padding-block: var(--cpd-space-1x);
+  padding-inline: var(--cpd-space-2x);
+  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;
+  background: transparent;
+  border: 0;
+  font: var(--cpd-font-body-md-medium);
+  color: var(--cpd-color-text-secondary);
+  text-decoration: none;
+}
 
-    /* Last page */
-    :last-child {
-      span {
-        padding-inline-start: var(--cpd-space-1x);
-      }
-    }
+@media (hover) {
+  ._nav-item_z70g4_47:not([disabled]):hover {
+    color: var(--cpd-color-text-primary);
+    background-color: var(--cpd-color-bg-subtle-secondary);
   }
 }
-/*
-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.
-*/
+._nav-item_z70g4_47:focus-visible {
+  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
+}
 
-._visual-list_1mgc1_8 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-1x);
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  border-radius: var(--cpd-space-3x);
-  overflow: hidden;
+._nav-item_z70g4_47:not([disabled]):active {
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
+}
+
+._nav-item_z70g4_47[aria-current],
+._nav-item_z70g4_47[aria-selected="true"] {
+  color: var(--cpd-color-text-primary);
+}
+
+._nav-item_z70g4_47[disabled] {
+  cursor: not-allowed;
+
+  /* Enable pointer events for svgs even with fill=none */
+  pointer-events: all !important;
+  color: var(--cpd-color-text-disabled);
 }
 
 @media (forced-colors: active) {
-  ._visual-list_1mgc1_8 {
+  ._nav-tab_z70g4_25[data-current]::before {
     outline: 1px solid transparent;
   }
 }
 /*
- * Copyright 2024 New Vector Ltd.
+ * 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.
  */
 
-._visual-list-item_1nc1y_8 {
-  display: flex;
-  gap: var(--cpd-space-3x);
-  padding: var(--cpd-space-3x) var(--cpd-space-4x);
-  background-color: var(--cpd-color-bg-subtle-secondary);
-  font: var(--cpd-font-body-md-medium);
+._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;
 }
 
-._visual-list-item-icon_1nc1y_17 {
-  flex-shrink: 0;
-  color: var(--cpd-color-icon-secondary);
+@media (forced-colors: active) {
+  ._pill_187tn_8 {
+    outline: 1px solid transparent;
+  }
 }
+/*
+Copyright 2024 New Vector Ltd.
 
-._visual-list-item-icon-success_1nc1y_22 {
-  color: var(--cpd-color-icon-success-primary);
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._content_16f2y_8 {
+  /* 320px + 20px padding left + 20px padding right */
+  max-inline-size: 320px;
+  border-radius: var(--cpd-space-3x);
+  background: var(--cpd-color-bg-action-primary-rest);
+  padding: var(--cpd-space-5x) var(--cpd-space-6x);
+
+  /* from figma */
+  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
+
+  /*
+  * Grid, we want to have the following layout:
+  * ----------------------------------
+  * -  ---------------   ----------  -
+  * -  | heading     |   |        |  -
+  * -  --------------    | button |  -
+  * -  ---------------   | button |  -
+  * -  | description |   |        |  -
+  * -  ---------------   ----------  -
+  * ----------------------------------
+  */
+  display: grid;
+  grid-template:
+    "header button" auto
+    "description button" auto;
+  align-items: center;
+  column-gap: var(--cpd-space-6x);
 }
 
-._visual-list-item-icon-destructive_1nc1y_26 {
-  color: var(--cpd-color-icon-critical-primary);
+._header_16f2y_37 {
+  margin: 0;
+  color: var(--cpd-color-text-on-solid-primary);
+  grid-area: header;
+}
+
+._description_16f2y_43 {
+  color: var(--cpd-color-gray-500);
+  grid-area: description;
+}
+
+._button_16f2y_48 {
+  color: var(--cpd-color-bg-subtle-secondary);
+  grid-area: button;
+}
+
+._arrow_16f2y_53 {
+  fill: var(--cpd-color-bg-action-primary-rest);
 }
 
 @media (forced-colors: active) {
-  ._visual-list-item_1nc1y_8 {
+  ._content_16f2y_8 {
     outline: 1px solid transparent;
   }
 }
@@ -2754,31 +2740,23 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._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;
+._unread_cti0f_8 {
+  inline-size: 20px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  padding: var(--cpd-space-1x) var(--cpd-space-2x);
-}
 
-@media (hover) {
-  ._chat-filter_5qdp0_8:hover {
-    border-color: var(--cpd-color-border-interactive-primary);
-    background: var(--cpd-color-bg-subtle-primary);
+  div {
+    block-size: 8px;
+    inline-size: 8px;
+    background-color: var(--cpd-color-icon-secondary);
+    border-radius: 100%;
   }
 }
 
-._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);
+@media (forced-colors: active) {
+  ._unread_cti0f_8 div {
+    outline: 1px solid transparent;
+  }
 }
 /*
  * Copyright 2025 New Vector Ltd
@@ -2807,50 +2785,59 @@ 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 2024 New Vector Ltd.
 
-._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;
+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 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-1x);
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  border-radius: var(--cpd-space-3x);
+  overflow: hidden;
 }
 
 @media (forced-colors: active) {
-  ._pill_187tn_8 {
+  ._visual-list_1mgc1_8 {
     outline: 1px solid transparent;
   }
 }
 /*
- * Copyright 2025 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.
  */
 
-._unread_cti0f_8 {
-  inline-size: 20px;
+._visual-list-item_1nc1y_8 {
   display: flex;
-  justify-content: center;
+  gap: var(--cpd-space-3x);
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  font: var(--cpd-font-body-md-medium);
+  align-items: center;
+}
 
-  div {
-    block-size: 8px;
-    inline-size: 8px;
-    background-color: var(--cpd-color-icon-secondary);
-    border-radius: 100%;
-  }
+._visual-list-item-icon_1nc1y_17 {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}
+
+._visual-list-item-icon-success_1nc1y_22 {
+  color: var(--cpd-color-icon-success-primary);
+}
+
+._visual-list-item-icon-destructive_1nc1y_26 {
+  color: var(--cpd-color-icon-critical-primary);
 }
 
 @media (forced-colors: active) {
-  ._unread_cti0f_8 div {
+  ._visual-list-item_1nc1y_8 {
     outline: 1px solid transparent;
   }
 }