@mcp-b/react-components 0.51.2 → 0.52.0

package/dist/styles/employee-app.css

@@ -1,4 +1,5 @@
-.employee-app {
+.employee-app,
+.employee-app__surface {
   block-size: 100%;
   min-block-size: 0;
   min-inline-size: 0;
@@ -16,6 +17,11 @@
   padding: var(--sigvelo-layout-gutter);
 }
 
+.status-screen__title {
+  margin: 0;
+  font: inherit;
+}
+
 .account-sign-in-dialog__control {
   display: grid;
   justify-items: center;
@@ -27,3 +33,15 @@
 body:has(.employee-app .agent-chat__composer) .sigvelo-floating-prompt {
   --sigvelo-floating-prompt-inset: calc(var(--sigvelo-spacing-16) + var(--sigvelo-spacing-2));
 }
+
+.employee-start__plugins {
+  inline-size: min(24rem, var(--available-width));
+  max-block-size: min(24rem, var(--available-height));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.employee-app__surface[hidden] {
+  display: none;
+}

package/dist/styles/employee-chrome.css

@@ -31,13 +31,43 @@
   gap: var(--sigvelo-spacing-3);
 }
 
-.employee-menu__group-label {
+.employee-menu__appearance.menu__group {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: var(--sigvelo-spacing-1-5);
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
 }
 
-.employee-menu__hint {
-  display: inline-flex;
-  color: var(--sigvelo-color-text-muted);
+.employee-menu__theme-options.menu__radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: var(--sigvelo-spacing-0-5);
+  padding: var(--sigvelo-spacing-1);
+}
+
+.employee-menu__theme-option {
+  justify-content: center;
+  inline-size: var(--sigvelo-density-compact-control-height);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  padding-inline: 0;
+}
+
+.employee-menu__theme-option[aria-checked="true"] {
+  color: var(--sigvelo-color-primary-text);
+  background: var(--sigvelo-color-primary-bg-subtle);
+}
+
+@media (pointer: coarse) {
+  .employee-menu__theme-option {
+    min-inline-size: var(--sigvelo-spacing-11);
+    min-block-size: var(--sigvelo-spacing-11);
+  }
+}
+
+.employee-shell__navigation[data-sidebar-open="true"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__main
+  .responsive-sidebar-shell__toggle {
+  display: none;
 }

package/dist/styles/file-tree.css

@@ -176,6 +176,16 @@
   opacity: 1;
 }
 
+@media (any-pointer: coarse) {
+  .file-tree__node {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
+  .file-tree__actions {
+    opacity: 1;
+  }
+}
+
 @media (forced-colors: active) {
   .file-tree {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
@@ -184,10 +194,13 @@
   .file-tree__node:focus-visible,
   .file-tree__node[data-focused] {
     outline: var(--sigvelo-focus-ring-forced);
-    outline-offset: 2px;
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
   }
 
-  .file-tree__node[data-selected] {
+  .file-tree__node[data-selected],
+  .file-tree__node[data-selected]:hover {
+    /* Keep system-color text legible without a Canvas backplate over the selection. */
+    forced-color-adjust: none;
     background-color: Highlight;
     color: HighlightText;
   }

package/dist/styles/index.css

@@ -19,6 +19,7 @@
 @import "./think-chat-activity.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
+@import "./brand-loading.css" layer(components);
 @import "./agent-chat.css" layer(components);
 @import "./agent-event.css" layer(components);
 @import "./approval.css" layer(components);

package/dist/styles/manager-office.css

@@ -1,10 +1,10 @@
 .manager-office {
   block-size: 100%;
-  min-block-size: 32rem;
+  min-block-size: 0;
 }
 
 .manager-office__sidebar {
-  --manager-office-face: var(--sigvelo-control-height-sm);
+  --manager-office-face: 2.625rem;
 
   block-size: 100%;
   min-inline-size: 0;
@@ -116,27 +116,27 @@
   --manager-office-face: 2.625rem;
 
   display: grid;
-  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
-  grid-template-rows: auto var(--sigvelo-layout-track-fill);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  grid-template-rows: auto auto var(--sigvelo-layout-track-fill);
 }
 
 .manager-office__sidebar[data-layout="chat"] .manager-office__sidebar-heading {
-  grid-column: 2;
+  grid-column: 1;
   grid-row: 1;
-  min-block-size: calc(var(--manager-office-face) + var(--sigvelo-spacing-2));
-  justify-content: flex-end;
+  min-block-size: var(--sigvelo-layout-chrome);
+  justify-content: space-between;
   padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
 }
 
 .manager-office__sidebar[data-layout="chat"] .manager-office__employee-nav {
   grid-column: 1;
-  grid-row: 1;
+  grid-row: 2;
   flex: none;
   flex-direction: row;
   align-items: center;
   gap: var(--sigvelo-spacing-0-5);
   padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-layout-gutter) var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
   overflow-x: auto;
   overflow-y: hidden;
 }
@@ -148,6 +148,10 @@
   }
 }
 
+.manager-office__sidebar[data-layout="chat"] .manager-office__employee-group {
+  flex: 0 0 auto;
+}
+
 .manager-office__sidebar[data-layout="chat"] .manager-office__employee-link {
   inline-size: 2.875rem;
   block-size: 2.875rem;
@@ -175,7 +179,7 @@
   inline-size: var(--sigvelo-spacing-4);
   block-size: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
-  background: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-primary-text);
   content: "";
   opacity: 0.72;
   translate: -50%;
@@ -187,7 +191,7 @@
 
 .manager-office__sidebar[data-layout="chat"] .manager-office__sidebar-content {
   grid-column: 1 / -1;
-  grid-row: 2;
+  grid-row: 3;
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -291,8 +295,8 @@
   position: relative;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: var(--manager-office-face);
-  padding-block: 0;
+  min-block-size: calc(var(--manager-office-face) + var(--sigvelo-spacing-2));
+  padding-block: var(--sigvelo-spacing-1);
   padding-inline: var(--sigvelo-spacing-2);
   display: grid;
   grid-template-columns: var(--manager-office-face) var(--sigvelo-layout-track-fill);
@@ -309,7 +313,7 @@
 }
 
 .manager-office__employee-link[aria-current="page"] {
-  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
 }
 
 .manager-office__employee-link:focus-visible {
@@ -326,6 +330,7 @@
 }
 
 .manager-office__employee-avatar .manager-office__employee-character {
+  --sigvelo-recipe-avatar-size: var(--manager-office-face);
   overflow: hidden;
   border-radius: var(--sigvelo-radius-md);
   background: transparent;
@@ -377,50 +382,38 @@
 
 .manager-office__nav-status {
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  inline-size: var(--sigvelo-spacing-2);
-  block-size: var(--sigvelo-spacing-2);
-  translate: 20% 20%;
-  border-radius: var(--sigvelo-radius-full);
-  background: var(--sigvelo-color-text-muted);
-  box-shadow: 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-surface);
+  inset-inline-end: -1px;
+  inset-block-end: -1px;
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
+  display: grid;
+  place-items: center;
+  border-radius: var(--sigvelo-radius-xs);
+  background: var(--responsive-sidebar-shell-sidebar-surface, var(--sigvelo-color-canvas));
+  box-shadow: 0 0 0 var(--sigvelo-border-width)
+    var(--responsive-sidebar-shell-sidebar-surface, var(--sigvelo-color-canvas));
+  color: var(--sigvelo-color-text-muted);
 }
 
-.manager-office__nav-status:is([data-status="needs-you"], [data-status="issue"]) {
-  background: var(--sigvelo-color-danger-text);
+.manager-office__nav-status > svg {
+  inline-size: 100%;
+  block-size: 100%;
 }
 
-.manager-office__nav-status:is([data-status="working"], [data-status="connecting"]) {
-  background: var(--sigvelo-color-primary-text);
+.manager-office__nav-status:is([data-status="needs-you"], [data-status="issue"]) {
+  color: var(--sigvelo-color-danger-text);
 }
 
-.manager-office__nav-status[data-status="connecting"] {
-  animation: manager-office-presence-pulse var(--sigvelo-motion-duration-presence)
-    var(--sigvelo-motion-ease-change) infinite;
+.manager-office__nav-status:is([data-status="working"], [data-status="connecting"]) {
+  color: var(--sigvelo-color-primary-text);
 }
 
 .manager-office__nav-status[data-status="unavailable"] {
-  background: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-warning-text);
 }
 
-.manager-office__nav-status[data-status="offline"] {
-  background: transparent;
-  box-shadow:
-    0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-surface),
-    0 0 0 calc(var(--sigvelo-border-width) * 2) var(--sigvelo-color-text-muted);
-}
-
-@keyframes manager-office-presence-pulse {
-  50% {
-    opacity: 0.45;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .manager-office__nav-status[data-status="connecting"] {
-    animation: none;
-  }
+.manager-office__nav-status[data-status="idle"] {
+  color: var(--sigvelo-color-success-text);
 }
 
 .manager-office__identity {
@@ -514,7 +507,7 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
-  background-color: var(--sigvelo-color-surface);
+  background-color: var(--sigvelo-color-surface-raised);
   color: var(--sigvelo-color-text);
 }
 
@@ -739,6 +732,7 @@
 
 /* The glyph makes the three panes distinct before their labels are read. */
 .manager-office__section-title {
+  color: var(--sigvelo-color-primary-text);
   display: flex;
   align-items: center;
   gap: var(--sigvelo-density-compact-control-gap);
@@ -912,14 +906,10 @@
     color: CanvasText;
   }
 
-  .manager-office__nav-status {
-    background: CanvasText;
-    box-shadow: 0 0 0 var(--sigvelo-border-width) Canvas;
-  }
-
-  .manager-office__nav-status[data-status="offline"] {
+  .manager-office__nav-status[data-status] {
+    color: CanvasText;
     background: Canvas;
-    box-shadow: 0 0 0 var(--sigvelo-border-width) CanvasText;
+    box-shadow: 0 0 0 var(--sigvelo-border-width) Canvas;
   }
 
   .manager-office__lane {
@@ -932,3 +922,38 @@
     box-shadow: none;
   }
 }
+
+.manager-office__channels {
+  padding-block: 0;
+  gap: 0;
+}
+
+.manager-office__channels-header {
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-layout-gutter);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
+}
+
+.manager-office__channels > .manager-office__section-content {
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
+}
+
+/* A standalone Channels pane owns its header and content gutters. */
+.manager-office__employee-detail:has(> .manager-office__channels:only-child) {
+  padding: 0;
+}
+
+.manager-office__channels-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+}
+
+.manager-office__channels-title > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+  color: var(--sigvelo-color-text-muted);
+}

package/dist/styles/manager-work.css

@@ -76,18 +76,12 @@
 }
 
 @container responsive-sidebar-shell (inline-size <= 56rem) {
-  .responsive-sidebar-shell__sidebar:has(.manager-office__sidebar) {
-    block-size: min(32rem, calc(100% - var(--sigvelo-spacing-3)));
-    transition: none;
-  }
-
   .manager-work__employee-chats {
-    max-block-size: none;
-    overflow: visible;
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
-
-  .manager-work__threads-picker {
-    min-block-size: 0;
-    flex: none;
+  .manager-work__threads {
+    flex: 1 0 auto;
+    min-block-size: 16rem;
   }
 }

package/dist/styles/mcp-plugin-catalog.css

@@ -14,17 +14,16 @@
   display: grid;
 }
 
-/* The card's chrome row at the bar rhythm: no title (the hosting tab or icon
-   carries it), no fill — separated from the scrolling directory by one
-   hairline and a breath of shadow. */
 .mcp-plugin-catalog__header {
   position: relative;
+  background: var(--sigvelo-color-canvas);
   flex: none;
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
-  gap: var(--sigvelo-layout-cluster);
+  gap: var(--sigvelo-spacing-2);
   min-block-size: var(--sigvelo-layout-chrome);
-  padding-block: var(--sigvelo-spacing-1);
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -33,7 +32,9 @@
 
 /* The bar's one action keeps to the far end, Ploy-style. */
 .mcp-plugin-catalog__add-custom {
-  margin-inline-start: auto;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
 }
 
 .mcp-plugin-catalog__section-heading,
@@ -43,8 +44,9 @@
 }
 
 .mcp-plugin-catalog__search {
-  flex: 1;
-  max-inline-size: 24rem;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  inline-size: 100%;
 }
 
 .mcp-plugin-catalog__body {
@@ -121,7 +123,7 @@
 
 .mcp-plugin-catalog__card-main {
   display: grid;
-  grid-template-columns: var(--sigvelo-spacing-8) var(--sigvelo-layout-track-fill);
+  grid-template-columns: var(--sigvelo-spacing-6) var(--sigvelo-layout-track-fill);
   align-items: center;
   justify-content: start;
   gap: var(--sigvelo-spacing-3);
@@ -145,8 +147,9 @@
 
 .mcp-plugin-catalog__card-description {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-text-compact-leading);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-sm-leading);
 }
 
 .mcp-plugin-catalog__empty {
@@ -176,28 +179,11 @@
   min-block-size: 22.75rem;
   padding-block-start: calc(var(--sigvelo-spacing-12) + var(--sigvelo-spacing-1));
   overflow: hidden;
-  background:
-    radial-gradient(
-      ellipse 48% 135% at 0% 38%,
-      var(--sigvelo-color-primary-400) 0%,
-      transparent 74%
-    ),
-    radial-gradient(
-      ellipse 50% 85% at 48% -8%,
-      var(--sigvelo-color-primary-300) 0%,
-      transparent 78%
-    ),
-    radial-gradient(
-      ellipse 68% 78% at 42% 112%,
-      var(--sigvelo-color-primary-700) 0%,
-      transparent 72%
-    ),
-    linear-gradient(
-      108deg,
-      var(--sigvelo-color-primary-600),
-      var(--sigvelo-color-primary-400) 70%,
-      var(--sigvelo-color-primary-500)
-    );
+  background: linear-gradient(
+    135deg,
+    var(--sigvelo-color-primary-bg),
+    var(--sigvelo-color-primary-bg-strong)
+  );
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
@@ -303,3 +289,12 @@
     grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   }
 }
+
+.mcp-plugin-catalog__title {
+  margin: 0;
+  font-size: var(--sigvelo-density-compact-control-font-size);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-primary-text);
+  line-height: var(--sigvelo-leading-tight);
+  letter-spacing: var(--sigvelo-tracking-tight);
+}

package/dist/styles/mcp-server-picker.css

@@ -68,20 +68,28 @@
 }
 
 .mcp-server-picker__copy {
-  display: flex;
-  align-items: baseline;
-  gap: var(--sigvelo-spacing-2);
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
   min-inline-size: 0;
 }
 
 .mcp-server-picker__name {
-  flex: 0 0 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--sigvelo-color-text);
 }
 
 .mcp-server-picker__description {
   min-inline-size: 0;
-  color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.mcp-server-picker__row[data-highlighted]
+  :is(.mcp-server-picker__name, .mcp-server-picker__description) {
+  color: inherit;
 }
 
 .mcp-server-picker__row-state {

package/dist/styles/prompt-input.css

@@ -425,18 +425,6 @@
     border-radius: var(--sigvelo-radius-full);
   }
 
-  .prompt-input__context-trigger {
-    max-inline-size: 11rem;
-  }
-
-  .prompt-input__context-category,
-  .prompt-input__context-chevron {
-    display: none;
-  }
-}
-
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container prompt-input (inline-size <= 22rem) {
   .prompt-input__context-trigger {
     inline-size: var(--sigvelo-control-height-xs);
     padding-inline: 0;
@@ -444,7 +432,9 @@
     border-radius: var(--sigvelo-radius-full);
   }
 
-  .prompt-input__context-value {
+  .prompt-input__context-value,
+  .prompt-input__context-category,
+  .prompt-input__context-chevron {
     display: none;
   }
 }

package/dist/styles/queue.css

@@ -310,6 +310,6 @@
 
   .queue__section-trigger:focus-visible {
     outline: var(--sigvelo-focus-ring-forced);
-    outline-offset: 2px;
+    outline-offset: var(--sigvelo-focus-offset);
   }
 }

package/dist/styles/recipes.css

@@ -54,6 +54,13 @@
   --sigvelo-recipe-layout-cluster: var(--sigvelo-layout-cluster);
 }
 
+/* Controls inside clipped chrome need an inward ring, including footer
+   actions at a rounded panel edge. Keep the same visible keyboard indicator. */
+:where(.queue, .responsive-sidebar-shell__sidebar, .app-top-bar, .base-ui-popup) {
+  --sigvelo-recipe-focus-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+  --sigvelo-focus-offset: -2px;
+}
+
 :where([data-slot="select-trigger"][data-size="sm"], .toggle--sm) {
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
   --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
@@ -824,7 +831,7 @@
     [data-slot="toolbar-input"]
   ):focus-visible {
     outline: var(--sigvelo-focus-ring-forced);
-    outline-offset: 2px;
+    outline-offset: var(--sigvelo-focus-offset);
     box-shadow: none;
   }
 
@@ -834,7 +841,7 @@
     [data-slot="sources-trigger"]
   ):focus-visible {
     outline: var(--sigvelo-focus-ring-forced);
-    outline-offset: 2px;
+    outline-offset: var(--sigvelo-focus-offset);
     box-shadow: none;
   }
 }

package/dist/styles/responsive-sidebar-shell-motion.test.ts

@@ -0,0 +1,67 @@
+import { expect, test } from "vite-plus/test";
+import "./index.css";
+
+const frame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+test("desktop sidebar collapse interpolates the track without squeezing roster content", async () => {
+  const shell = document.createElement("div");
+  shell.className = "responsive-sidebar-shell";
+  shell.dataset.sidebarOpen = "true";
+  shell.style.cssText = "width:1280px;height:600px";
+  shell.innerHTML = `<div class="responsive-sidebar-shell__frame">
+    <div class="responsive-sidebar-shell__sidebar">Workforce</div>
+    <div class="responsive-sidebar-shell__main">Conversation</div>
+  </div>`;
+  document.body.append(shell);
+  const layout = shell.firstElementChild as HTMLElement;
+  const sidebar = shell.querySelector<HTMLElement>(".responsive-sidebar-shell__sidebar")!;
+  const main = shell.querySelector<HTMLElement>(".responsive-sidebar-shell__main")!;
+  try {
+    await frame();
+    const sidebarWidth = sidebar.getBoundingClientRect().width;
+    const mainWidth = main.getBoundingClientRect().width;
+    shell.dataset.sidebarOpen = "false";
+    await frame();
+    const transition = layout
+      .getAnimations()
+      .find(
+        (animation) =>
+          animation instanceof CSSTransition &&
+          animation.transitionProperty === "grid-template-columns",
+      );
+    expect(transition).toBeDefined();
+    for (const animation of [...layout.getAnimations(), ...sidebar.getAnimations()]) {
+      animation.pause();
+      animation.currentTime = Number(animation.effect!.getTiming().duration) / 2;
+    }
+    await frame();
+    expect(sidebar.getBoundingClientRect().width).toBe(sidebarWidth);
+    expect(main.getBoundingClientRect().width).toBeGreaterThan(mainWidth);
+    expect(main.getBoundingClientRect().width).toBeLessThan(mainWidth + sidebarWidth);
+    for (const animation of [...layout.getAnimations(), ...sidebar.getAnimations()])
+      animation.finish();
+    await frame();
+    expect(main.getBoundingClientRect().width).toBeCloseTo(mainWidth + sidebarWidth, 0);
+    expect(getComputedStyle(sidebar).visibility).toBe("hidden");
+    shell.dataset.sidebarOpen = "true";
+    await frame();
+    const reopening = layout
+      .getAnimations()
+      .find(
+        (animation) =>
+          animation instanceof CSSTransition &&
+          animation.transitionProperty === "grid-template-columns",
+      );
+    expect(reopening).toBeDefined();
+    for (const animation of [...layout.getAnimations(), ...sidebar.getAnimations()]) {
+      animation.pause();
+      animation.currentTime = Number(animation.effect!.getTiming().duration) / 2;
+    }
+    await frame();
+    expect(sidebar.getBoundingClientRect().width).toBe(sidebarWidth);
+    expect(main.getBoundingClientRect().width).toBeGreaterThan(mainWidth);
+    expect(main.getBoundingClientRect().width).toBeLessThan(mainWidth + sidebarWidth);
+  } finally {
+    shell.remove();
+  }
+});