Animate vertical transitions between client drawers

test/web/subscription-feature-contract.test.js

@@ -99,8 +99,8 @@ test('feature keeps exact slots, truthy closes and subscription DOM order', () =
   assert.match(feature, /feature\.profiles\.length === 0 && <div className="client-form client-subscription-first-run"/);
   assert.match(page, /<SubscriptionPanel[\s\S]*statusSlot=\{<>[\s\S]*InlineError[\s\S]*renderServerPicker=[\s\S]*<ServerPicker/);
   assert.doesNotMatch(page, /<InlineProgress[^>]*context="subscription"/);
-  assert.match(page, /<SubscriptionToggle[\s\S]*subscriptionFeature\.toggle\(\)/);
-  assert.match(page, /subscriptionFeature\.close\(\)[\s\S]*devicesFeature\.close\(\)[\s\S]*diagnosticsFeature\.close\(\)/);
+  assert.match(page, /<SubscriptionToggle[\s\S]*onToggle=\{\(\) => switchDrawer\('subscription'\)\}/);
+  assert.match(page, /subscription: \{[\s\S]*show: subscriptionFeature\.toggle,[\s\S]*close: subscriptionFeature\.close/);
   assert.doesNotMatch(feature, /setInterval|copyText|client-live-region/);
 });
 
@@ -129,6 +129,7 @@ test('profiles render as flat accordion groups with scoped controls', () => {
   assert.match(styles, /\.client-profile-body/);
   assert.match(styles, /\.client-profile-body \{[\s\S]*grid-template-rows: 0fr[\s\S]*\.client-profile-body\.is-open \{[\s\S]*grid-template-rows: 1fr/);
   assert.match(styles, /\.client-profile-body-inner \{[\s\S]*padding: 0 0 4px 24px/);
+  assert.match(styles, /\.client-profile-selected-server \{[\s\S]*padding: 0 8px 0 32px/);
   assert.match(styles, /\.client-profile-group\.is-expired \.client-profile-title small \{[\s\S]*color: oklch\(0\.68 0\.14 72\)/);
   assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-profile-body \*/);
   assert.match(styles, /\.client-profile-refresh\.is-refreshing/);