fix(oc-docs): dismiss playground overlay sidebar on outside click and fix dark-mode shadow

The inline-dock sidebar overlays the view but only closed on navigation,
so a click outside it did nothing. Add a backdrop that closes it, mirroring
the docs navigation drawer.

Also swap the overlay's text-tinted color-mix shadow (which turned whitish
in dark mode) for the theme-aware --oc-shadow-md token, drop the doubled
border-right in overlay mode, and move the docs drawer onto the same token.

Author: sundram-bruno

packages/oc-docs/e2e/components/playground.component.ts

@@ -15,6 +15,7 @@ export class PlaygroundComponent extends BaseComponent {
   readonly runner = this.page.getByTestId('playground-runner');
   readonly loadError = this.page.getByTestId('playground-load-error');
   readonly sidebarPanel = this.page.getByTestId('playground-sidebar-panel');
+  readonly sidebarBackdrop = this.page.getByTestId('playground-sidebar-backdrop');
   readonly collectionNode = this.page.getByTestId('sidebar-collection-root');
   readonly collectionCollapseToggle = this.collectionNode.getByRole('button', {
     name: /Collapse collection|Expand collection/,

packages/oc-docs/e2e/tests/playground/playground.spec.ts

@@ -183,6 +183,19 @@ test.describe('playground docks (desktop)', () => {
     expect(viewBox!.x).toBeLessThanOrEqual(sideBox!.x + 5);
   });
 
+  test('inline dock: clicking outside the overlay sidebar closes it', async ({ page, playground }) => {
+    await page.goto(openAt('inline'));
+    await playground.sidebarToggle.click();
+    await expect(playground.sidebarPanel).toBeVisible();
+    // Click the view area outside the sidebar (its backdrop), mirroring the docs
+    // navigation drawer: an outside click dismisses the overlay. The backdrop
+    // spans the whole dock from its left edge, so click just past the sidebar's
+    // right edge to land on the exposed view area, not the panel.
+    const side = await playground.sidebarPanel.boundingBox();
+    await playground.sidebarBackdrop.click({ position: { x: side!.width + 40, y: 30 } });
+    await expect(playground.sidebarPanel).toHaveCount(0);
+  });
+
   test('inline dock: selecting a request auto-closes the overlay sidebar', async ({ page, playground }) => {
     await page.goto(openAt('inline'));
     await playground.sidebarToggle.click();

packages/oc-docs/src/components/Playground/PlaygroundBody/PlaygroundBody.tsx

@@ -225,6 +225,16 @@ const PlaygroundBody: React.FC<PlaygroundBodyProps> = ({
 
   return (
     <StyledWrapper data-testid="playground-runner" data-overlay-sidebar={dock === 'inline' ? 'true' : undefined}>
+      {sidebarOpen && dock === 'inline' && (
+        // In the inline dock the sidebar overlays the view, so a click outside it
+        // dismisses it, same as the docs navigation drawer's backdrop.
+        <div
+          className="sidebar-backdrop"
+          data-testid="playground-sidebar-backdrop"
+          aria-hidden="true"
+          onClick={onCloseSidebar}
+        />
+      )}
       {sidebarOpen && (
         <aside className="sidebar" data-testid="playground-sidebar-panel">
           <PlaygroundSidebar

packages/oc-docs/src/components/Playground/PlaygroundBody/StyledWrapper.ts

@@ -38,14 +38,25 @@ export const StyledWrapper = styled.div`
     position: relative;
   }
 
+  &[data-overlay-sidebar='true'] .sidebar-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+  }
+
   &[data-overlay-sidebar='true'] .sidebar {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 5;
     background-color: var(--oc-background-base);
-    box-shadow: 2px 0 8px color-mix(in srgb, var(--oc-text) 12%, transparent);
+    /* Overlay floats above the view, so the shadow alone separates it; drop the
+       base border-right to avoid a doubled edge. Theme-aware shadow token so it
+       reads dark in both themes, instead of a text-tinted mix that turns whitish
+       in dark mode. */
+    border-right: none;
+    box-shadow: var(--oc-shadow-md);
   }
 
   &[data-overlay-sidebar='true'] .view {

packages/oc-docs/src/components/SidebarDrawer/StyledWrapper.ts

@@ -26,7 +26,7 @@ export const StyledWrapper = styled.div`
     z-index: calc(var(--z-overlay, 50) + 1);
     background-color: var(--oc-background-base);
     border-right: 1px solid var(--oc-border-border0);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--oc-shadow-md);
     transform: translateX(-100%);
     visibility: hidden;
     pointer-events: none;