@vector-im/compound-web 9.0.1 → 9.2.0

package/dist/style.css

@@ -537,7 +537,7 @@ 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 {
+._avatar_va14e_8 {
   display: inline-block;
   box-sizing: border-box;
 
@@ -550,14 +550,14 @@ Please see LICENSE files in the repository root for full details.
   font-family: var(--cpd-font-family-sans);
   font-weight: bold;
   overflow: hidden;
-  user-select: none;
+  user-select: none; /* stylelint-disable-line defensive-css/no-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 {
+button._avatar_va14e_8 {
   /**
    * The avatar can be a button element, we need to reset its style
    */
@@ -567,25 +567,25 @@ button._avatar_7h2br_8 {
   cursor: pointer;
 }
 
-button._avatar_7h2br_8:disabled {
+button._avatar_va14e_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_7h2br_8,
-._image_7h2br_43 {
+._avatar_va14e_8,
+._image_va14e_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_7h2br_43 {
+._image_va14e_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
 /* Additional selector for button to raise selector above button.avatar */
-button._avatar-imageless_7h2br_55,
-._avatar-imageless_7h2br_55 {
+button._avatar-imageless_va14e_55,
+._avatar-imageless_va14e_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 */
@@ -596,41 +596,41 @@ button._avatar-imageless_7h2br_55,
   border: 1px solid var(--cpd-avatar-bg);
 }
 
-._avatar_7h2br_8[data-color] {
+._avatar_va14e_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_7h2br_8[data-color="2"] {
+._avatar_va14e_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_7h2br_8[data-color="3"] {
+._avatar_va14e_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_7h2br_8[data-color="4"] {
+._avatar_va14e_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_7h2br_8[data-color="5"] {
+._avatar_va14e_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_7h2br_8[data-color="6"] {
+._avatar_va14e_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_7h2br_8[data-type="round"] {
+._avatar_va14e_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_7h2br_8[data-type="square"] {
+._avatar_va14e_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -638,26 +638,26 @@ button._avatar-imageless_7h2br_55,
  * Stacked avatars 
  */
 
-._stacked-avatars_7h2br_109::after {
+._stacked-avatars_va14e_109::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_7h2br_109 ._avatar_7h2br_8 {
+._stacked-avatars_va14e_109 ._avatar_va14e_8 {
   float: inline-start;
 }
 
-._stacked-avatars_7h2br_109 ._avatar_7h2br_8:not(:last-child) {
+._stacked-avatars_va14e_109 ._avatar_va14e_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_7h2br_109 > *:not(:first-child) {
+._stacked-avatars_va14e_109 > *:not(:first-child) {
   margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);
 }
 
-._clip-path_7h2br_128 {
+._clip-path_va14e_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;
@@ -670,47 +670,80 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._badge_18gm1_8 {
+._badge_10dml_8 {
   display: inline-flex;
   gap: var(--cpd-space-1x);
   align-items: center;
   border-radius: 9999px; /* pill effect */
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
+  box-sizing: border-box;
+  min-block-size: 28px;
+}
+
+._has-icon_10dml_18 {
+  padding-inline-start: var(--cpd-space-2x);
 }
 
-._badge_18gm1_8[data-kind="default"] {
-  border: 1px solid var(--cpd-color-alpha-gray-400);
+._badge_10dml_8[data-kind="default"] {
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+
+  /* To keep the same height than the other badges despite the border  */
+  padding-block: calc(var(--cpd-space-1x) - 1px);
   outline: none;
-  color: var(--cpd-color-gray-1100);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="grey"] {
-  background: var(--cpd-color-alpha-gray-300);
-  color: var(--cpd-color-gray-1100);
+._badge_10dml_8[data-kind="grey"] {
+  background: var(--cpd-color-bg-badge-secondary);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="on-solid"] {
-  background: var(--cpd-color-alpha-gray-1200);
+._badge_10dml_8[data-kind="on-solid"] {
+  background: var(--cpd-color-bg-badge-primary);
   color: var(--cpd-color-text-on-solid-primary);
+
+  svg {
+    color: var(--cpd-color-icon-on-solid-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="blue"] {
-  background: var(--cpd-color-alpha-blue-300);
-  color: var(--cpd-color-blue-1100);
+._badge_10dml_8[data-kind="blue"] {
+  background: var(--cpd-color-bg-badge-info);
+  color: var(--cpd-color-text-badge-info);
+
+  svg {
+    color: var(--cpd-color-icon-info-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="green"] {
-  background: var(--cpd-color-alpha-green-300);
-  color: var(--cpd-color-green-1100);
+._badge_10dml_8[data-kind="green"] {
+  background: var(--cpd-color-bg-badge-accent);
+  color: var(--cpd-color-text-badge-accent);
+
+  svg {
+    color: var(--cpd-color-icon-accent-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="red"] {
-  background: var(--cpd-color-alpha-red-300);
-  color: var(--cpd-color-red-1100);
+._badge_10dml_8[data-kind="red"] {
+  background: var(--cpd-color-bg-badge-critical);
+  color: var(--cpd-color-text-critical-primary);
+
+  svg {
+    color: var(--cpd-color-icon-critical-primary);
+  }
 }
 
 @media (forced-colors: active) {
-  ._badge_18gm1_8 {
+  ._badge_10dml_8 {
     outline: 1px solid transparent;
   }
 }
@@ -1084,7 +1117,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_gn3xc_8 {
+._container_z8zo1_8 {
   display: flex;
   flex-direction: column;
 
@@ -1110,7 +1143,9 @@ Please see LICENSE files in the repository root for full details.
     gap: var(--cpd-space-4x);
 
     svg {
-      transition: transform 0.1s linear;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform 0.1s linear;
+      }
     }
   }
 
@@ -1123,11 +1158,11 @@ Please see LICENSE files in the repository root for full details.
     }
   }
 
-  button._placeholder_gn3xc_47 {
+  button._placeholder_z8zo1_49 {
     color: var(--cpd-color-text-secondary);
   }
 
-  ._border_gn3xc_51 {
+  ._border_z8zo1_53 {
     display: none;
     border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
     border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
@@ -1136,7 +1171,7 @@ Please see LICENSE files in the repository root for full details.
     box-sizing: border-box;
   }
 
-  ._content_gn3xc_60 {
+  ._content_z8zo1_62 {
     display: none;
     position: relative;
 
@@ -1184,24 +1219,24 @@ Please see LICENSE files in the repository root for full details.
     }
   }
 
-  ._open_gn3xc_108 {
+  ._open_z8zo1_110 {
     display: block;
   }
 
-  ._help_gn3xc_112 {
+  ._help_z8zo1_114 {
     font: var(--cpd-font-body-sm-regular);
     color: var(--cpd-color-text-secondary);
   }
 
-  ._error_gn3xc_117 {
+  ._error_z8zo1_119 {
     font: var(--cpd-font-body-sm-medium);
     color: var(--cpd-color-text-critical-primary);
     display: flex;
     gap: var(--cpd-space-2x);
   }
 
-  ._error_gn3xc_117,
-  ._help_gn3xc_112 {
+  ._error_z8zo1_119,
+  ._help_z8zo1_114 {
     margin-block-start: var(--cpd-space-2x);
   }
 
@@ -1286,7 +1321,7 @@ 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 {
+._control_d83jn_10 {
   border: 1px solid var(--cpd-color-border-interactive-primary);
   background: var(--cpd-color-bg-canvas-default);
   border-radius: 0.5rem;
@@ -1302,7 +1337,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._control_sqdq4_10:hover {
+  ._control_d83jn_10:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1310,20 +1345,21 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._control_sqdq4_10:active {
+._control_d83jn_10:active {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-._control_sqdq4_10:focus {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._control_d83jn_10:focus {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;
 }
 
-._control_sqdq4_10[data-invalid] {
+._control_d83jn_10[data-invalid] {
   border-color: var(--cpd-color-text-critical-primary);
 }
 
-._control_sqdq4_10:disabled {
+._control_d83jn_10:disabled {
   box-shadow: none;
   background: var(--cpd-color-bg-canvas-disabled);
   border-color: var(--cpd-color-border-disabled);
@@ -1331,14 +1367,14 @@ Please see LICENSE files in the repository root for full details.
   cursor: not-allowed;
 }
 
-._control_sqdq4_10[readonly] {
+._control_d83jn_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 {
+._control_d83jn_10._enable-ligatures_d83jn_63 {
   font-feature-settings: var(--cpd-font-feature-settings);
 }
 /*
@@ -1611,7 +1647,7 @@ 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 {
+@keyframes _spin_1855a_1 {
   from {
     transform: rotateZ(0deg);
   }
@@ -1621,14 +1657,17 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon_11k6c_18 {
+._icon_1855a_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;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: 1s linear _spin_1855a_1 infinite;
+  }
 }
 /*
 Copyright 2025 New Vector Ltd.
@@ -1639,7 +1678,7 @@ 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 {
+._container_17qhw_10 {
   --gap: var(--cpd-space-3x);
   --digit-size: var(--cpd-space-10x);
   --digit-height: var(--cpd-space-12x);
@@ -1654,7 +1693,7 @@ Please see LICENSE files in the repository root for full details.
   position: relative;
 }
 
-._control_43om7_25 {
+._control_17qhw_25 {
   all: unset;
 
   /** TODO: semantic token */
@@ -1678,7 +1717,7 @@ Please see LICENSE files in the repository root for full details.
   margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
 }
 
-._digit_43om7_49 {
+._digit_17qhw_49 {
   box-sizing: border-box;
   inline-size: var(--cpd-space-10x);
   block-size: var(--cpd-space-12x);
@@ -1689,7 +1728,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._control_43om7_25:hover ~ ._digit_43om7_49 {
+  ._control_17qhw_25:hover ~ ._digit_17qhw_49 {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
@@ -1697,37 +1736,38 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._control_43om7_25:disabled {
+._control_17qhw_25:disabled {
   color: var(--cpd-color-text-disabled);
   cursor: not-allowed;
 }
 
-._control_43om7_25:disabled ~ ._digit_43om7_49 {
+._control_17qhw_25:disabled ~ ._digit_17qhw_49 {
   box-shadow: none;
   background: var(--cpd-color-bg-canvas-disabled);
   border-color: var(--cpd-color-border-disabled);
 }
 
-._control_43om7_25[readonly] {
+._control_17qhw_25[readonly] {
   color: var(--cpd-color-text-secondary);
 }
 
-._control_43om7_25[readonly] ~ ._digit_43om7_49 {
+._control_17qhw_25[readonly] ~ ._digit_17qhw_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 {
+._control_17qhw_25[data-invalid] ~ ._digit_17qhw_49 {
   border-color: var(--cpd-color-text-critical-primary);
 }
 
-._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._control_17qhw_25:focus ~ ._digit_17qhw_49:not([data-filled]) {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;
 }
 
-._digit_43om7_49[data-selected] {
+._digit_17qhw_49[data-selected] {
   border-color: var(--cpd-color-border-focused);
   background-color: var(--cpd-color-bg-info-subtle);
 }
@@ -2094,7 +2134,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._item_lqfwq_8 {
+._item_bym9p_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
@@ -2112,105 +2152,127 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-secondary-rest);
 }
 
-._item_lqfwq_8._interactive_lqfwq_26 {
+._item_bym9p_8._interactive_bym9p_26,
+._item_bym9p_8[data-state] {
   cursor: pointer;
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 {
+._item_bym9p_8._no-label_bym9p_31 {
   grid-template: "icon ." auto / auto 1fr;
 }
 
-._label_lqfwq_34 {
+._label_bym9p_35 {
   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 */
 }
 
-._item_lqfwq_8._no-icon_lqfwq_41 {
+._item_bym9p_8._no-icon_bym9p_42 {
   grid-template: "label ." auto / auto 1fr;
 
-  ._label_lqfwq_34 {
+  ._label_bym9p_35 {
     /* Without icon, the height changes when hovered */
     min-block-size: 24px;
   }
 }
 
-._icon_lqfwq_50 {
+._icon_bym9p_51 {
   grid-area: icon;
   margin-inline-end: var(--cpd-space-3x);
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
+._item_bym9p_8._no-label_bym9p_31 ._icon_bym9p_51 {
   margin-inline-end: var(--cpd-space-4x);
 }
 
-._nav-hint_lqfwq_59 {
+._nav-hint_bym9p_60 {
   /* Hidden until the item is hovered over */
   display: none;
   flex-shrink: 0;
 }
 
-button._item_lqfwq_8 {
+button._item_bym9p_8 {
   appearance: none;
   border: none;
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
+._item_bym9p_8[data-kind="primary"] > ._label_bym9p_35 {
   color: var(--cpd-color-text-primary);
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
+._item_bym9p_8[data-kind="primary"] > ._icon_bym9p_51 {
   color: var(--cpd-color-icon-primary);
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
+._item_bym9p_8[data-kind="primary"] > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-icon-tertiary);
 }
 
-._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
+._item_bym9p_8[data-kind="critical"] > ._label_bym9p_35 {
   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 {
+._item_bym9p_8[data-kind="critical"] > ._icon_bym9p_51,
+._item_bym9p_8[data-kind="critical"] > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-icon-critical-primary);
 }
 
+/* Submenu triggers: always show the chevron and apply hover style when open */
+._item_bym9p_8[data-state] > ._nav-hint_bym9p_60 {
+  display: initial;
+}
+
+._item_bym9p_8[data-state] > ._nav-hint_bym9p_60 ~ * {
+  display: none;
+}
+
+._item_bym9p_8[data-state="open"][data-kind="primary"] {
+  background: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+._item_bym9p_8[data-state="open"][data-kind="critical"] {
+  background: var(--cpd-color-bg-critical-subtle);
+}
+
 @media (hover) {
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
+  ._item_bym9p_8._interactive_bym9p_26[data-kind="primary"]:hover,
+  ._item_bym9p_8[data-state][data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
   }
 
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:hover {
+  ._item_bym9p_8._interactive_bym9p_26[data-kind="critical"]:hover,
+  ._item_bym9p_8[data-state][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 {
+  ._item_bym9p_8._interactive_bym9p_26:hover > ._nav-hint_bym9p_60 {
     display: initial;
   }
 
-  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
+  ._item_bym9p_8._interactive_bym9p_26:hover > ._nav-hint_bym9p_60 ~ * {
     display: none;
   }
 }
 
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
+._item_bym9p_8._interactive_bym9p_26[data-kind="primary"]:active,
+._item_bym9p_8[data-state][data-kind="primary"]:active {
   background: var(--cpd-color-bg-action-secondary-pressed);
 }
 
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
+._item_bym9p_8._interactive_bym9p_26[data-kind="critical"]:active,
+._item_bym9p_8[data-state][data-kind="critical"]:active {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
+._item_bym9p_8[data-kind]._disabled_bym9p_140 {
   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 {
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._label_bym9p_35,
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._icon_bym9p_51,
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-text-disabled);
 }
 /*
@@ -2298,7 +2360,7 @@ 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 {
+._menu_1kl3y_8 {
   border-radius: var(--cpd-space-3x);
   background: var(--cpd-color-bg-canvas-default);
 
@@ -2320,40 +2382,42 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-@keyframes _slide-in_1w1u7_1 {
+@keyframes _slide-in_1kl3y_1 {
   from {
     opacity: 0;
     transform: translate(0, var(--cpd-space-3x));
   }
 }
 
-._menu_1w1u7_8[data-state="open"] {
-  animation: _slide-in_1w1u7_1 180ms;
+._menu_1kl3y_8[data-state="open"] {
+  /* Disable linter, we have a reduced motion style below */
+  /* stylelint-disable-next-line defensive-css/require-prefers-reduced-motion */
+  animation: _slide-in_1kl3y_1 180ms;
 }
 
-@keyframes _fade-in_1w1u7_1 {
+@keyframes _fade-in_1kl3y_1 {
   from {
     opacity: 0;
   }
 }
 
-@keyframes _fade-out_1w1u7_1 {
+@keyframes _fade-out_1kl3y_1 {
   to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion) {
-  ._menu_1w1u7_8[data-state="open"] {
-    animation-name: _fade-in_1w1u7_1;
+  ._menu_1kl3y_8[data-state="open"] {
+    animation-name: _fade-in_1kl3y_1;
   }
 
-  ._menu_1w1u7_8[data-state="closed"] {
-    animation-name: _fade-out_1w1u7_1;
+  ._menu_1kl3y_8[data-state="closed"] {
+    animation-name: _fade-out_1kl3y_1;
   }
 }
 
-._title_1w1u7_63 {
+._title_1kl3y_65 {
   /** Override MenuTitle margin top **/
   margin-block-start: 0 !important;
 }
@@ -2378,13 +2442,13 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._nav-bar_1e9qm_8 {
+._nav-bar_pmal2_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_1e9qm_14 {
+._nav-bar-items_pmal2_14 {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -2395,13 +2459,13 @@ Please see LICENSE files in the repository root for full details.
   margin: 0;
 }
 
-._nav-tab_1e9qm_25 {
+._nav-tab_pmal2_25 {
   padding: var(--cpd-space-4x) 0;
   position: relative;
 }
 
 /* Underline effect */
-._nav-tab_1e9qm_25::before {
+._nav-tab_pmal2_25::before {
   content: "";
   position: absolute;
   inset-block-end: 0;
@@ -2409,15 +2473,18 @@ Please see LICENSE files in the repository root for full details.
   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;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height 0.1s ease-in-out;
+  }
 }
 
-._nav-tab_1e9qm_25[data-current]::before {
+._nav-tab_pmal2_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_1e9qm_47 {
+._nav-item_pmal2_50 {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-2x);
   border-radius: var(--cpd-radius-pill-effect);
@@ -2436,27 +2503,27 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._nav-item_1e9qm_47:not([disabled]):hover {
+  ._nav-item_pmal2_50:not([disabled]):hover {
     color: var(--cpd-color-text-primary);
     background-color: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._nav-item_1e9qm_47:focus-visible {
+._nav-item_pmal2_50:focus-visible {
   outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
 }
 
-._nav-item_1e9qm_47:not([disabled]):active {
+._nav-item_pmal2_50: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"] {
+._nav-item_pmal2_50[aria-current],
+._nav-item_pmal2_50[aria-selected="true"] {
   color: var(--cpd-color-text-primary);
 }
 
-._nav-item_1e9qm_47[disabled] {
+._nav-item_pmal2_50[disabled] {
   cursor: not-allowed;
 
   /* Enable pointer events for svgs even with fill=none */
@@ -2465,18 +2532,59 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (forced-colors: active) {
-  ._nav-tab_1e9qm_25[data-current]::before {
+  ._nav-tab_pmal2_25[data-current]::before {
     outline: 1px solid transparent;
   }
 }
 /*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+._header_14jk4_8 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cpd-space-2x);
+  max-inline-size: 480px;
+}
+
+._header_14jk4_8[data-size="md"] ._icon_14jk4_16 {
+  margin-block-end: var(--cpd-space-2x);
+}
+
+._header_14jk4_8[data-size="lg"] ._icon_14jk4_16 {
+  margin-block-end: var(--cpd-space-4x);
+}
+
+._header_14jk4_8 > h1 {
+  margin: 0;
+  text-align: center;
+}
+
+._header_14jk4_8 > p {
+  color: var(--cpd-color-text-secondary);
+  text-align: center;
+  margin: 0;
+}
+
+._header_14jk4_8[data-size="md"] > p {
+  font: var(--cpd-font-body-md-regular);
+}
+
+._header_14jk4_8[dat-size="lg"] > p {
+  font: var(--cpd-font-body-lg-regular);
+}
+/*
 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 {
+._progress-bar_1kvi5_8 {
   position: relative;
   background-color: var(--cpd-color-gray-200);
   border: 1px solid var(--cpd-color-gray-400);
@@ -2492,7 +2600,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-container_1l6pa_24 {
+._progress-bar-container_1kvi5_24 {
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
@@ -2521,16 +2629,20 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._progress-bar-label_1l6pa_53 {
+._progress-bar-label_1kvi5_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 {
+._progress-bar-indicator_1kvi5_59 {
   position: absolute;
   inset: 0;
-  transition: transform 0.2s ease-in-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 0.2s ease-in-out;
+  }
+
   background-image: linear-gradient(
     135deg,
     var(--cpd-progress-bar-muted) 0%,
@@ -2549,7 +2661,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (forced-colors: active) {
-  ._progress-bar-indicator_1l6pa_59 {
+  ._progress-bar-indicator_1kvi5_59 {
     outline: 1px solid transparent;
   }
 }
@@ -2621,7 +2733,7 @@ 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 {
+._search_1lktl_8 {
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   border-radius: 9999px;
   block-size: 36px;
@@ -2637,35 +2749,35 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover {
+  ._search_1lktl_8:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
   }
 }
 
-._search_b2pjl_8:active {
+._search_1lktl_8:active {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
-._search_b2pjl_8:focus-within {
+._search_1lktl_8:focus-within {
   border-color: currentcolor;
 }
 
-._icon_b2pjl_37 {
+._icon_1lktl_37 {
   color: var(--cpd-color-icon-secondary);
   flex-shrink: 0;
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
+  ._search_1lktl_8:hover ._icon_1lktl_37 {
     color: var(--cpd-color-icon-primary);
   }
 }
 
-._search_b2pjl_8:active ._icon_b2pjl_37 {
+._search_1lktl_8:active ._icon_1lktl_37 {
   color: var(--cpd-color-icon-primary);
 }
 
-._input_b2pjl_52 {
+._input_1lktl_52 {
   border: 0;
   background: inherit;
   outline: 0;
@@ -2673,16 +2785,17 @@ Please see LICENSE files in the repository root for full details.
   min-inline-size: 0;
 }
 
-._input_b2pjl_52::placeholder {
+._input_1lktl_52::placeholder {
   color: var(--cpd-color-text-secondary);
 }
 
-._input_b2pjl_52:focus::placeholder {
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
+._input_1lktl_52:focus::placeholder {
   color: var(--cpd-color-text-secondary);
 }
 
 @media (hover) {
-  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
+  ._search_1lktl_8:hover ._input_1lktl_52::placeholder {
     color: var(--cpd-color-text-secondary);
   }
 }
@@ -2732,20 +2845,50 @@ 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 {
+._toast-container_1ysb3_8 {
   inline-size: fit-content;
-  background-color: var(--cpd-color-alpha-gray-1300);
+  background-color: var(--cpd-color-bg-action-primary-rest);
   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);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--cpd-space-2x);
 }
 
 @media (forced-colors: active) {
-  ._toast-container_1xofk_8 {
+  ._toast-container_1ysb3_8 {
     outline: 1px solid transparent;
   }
 }
+
+._icon_1ysb3_26 {
+  flex-shrink: 0;
+}
+
+._has-close_1ysb3_30 {
+  gap: var(--cpd-space-3x);
+}
+
+._content_1ysb3_34 {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--cpd-space-2x);
+}
+
+._close_1ysb3_41 {
+  align-self: flex-start;
+  padding: var(--cpd-space-0-5x) !important;
+
+  &:not(:hover, :focus-visible) {
+    * {
+      /* Override default color of icon button. The container background is different than the default canvas color */
+      color: var(--cpd-color-icon-on-solid-primary) !important;
+    }
+  }
+}
 /*
 Copyright 2024 New Vector Ltd.