@vector-im/compound-web 8.3.6 → 8.4.0

package/dist/style.css

@@ -2108,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
@@ -2209,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
@@ -2324,164 +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);
-  }
-}
-
-._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:hover {
+    border-color: var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-subtle-primary);
   }
 }
-/*
-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.
-*/
 
-._content_16f2y_8 {
-  /* 320px + 20px padding left + 20px padding right */
-  max-inline-size: 320px;
-  border-radius: var(--cpd-space-3x);
+._chat-filter_5qdp0_8[aria-selected="true"] {
+  border-color: var(--cpd-color-bg-action-primary-rest);
   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);
-}
-
-._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.
@@ -2621,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;
   }
 }
@@ -2741,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
@@ -2794,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;
   }
 }