diff --git a/catalog/eleventy-helpers/shortcodes/playground-example.cjs b/catalog/eleventy-helpers/shortcodes/playground-example.cjs
index d40df7df58..787ba765ce 100644
--- a/catalog/eleventy-helpers/shortcodes/playground-example.cjs
+++ b/catalog/eleventy-helpers/shortcodes/playground-example.cjs
@@ -51,7 +51,7 @@ function playgroundExample(eleventyConfig) {
             <md-icon aria-hidden="true">expand_more</md-icon>
             <md-icon aria-hidden="true" slot="selected">expand_less</md-icon>
           </md-outlined-icon-button>
-          Expand interactive demo.
+          View interactive demo inline.
         </summary>
         <lit-island on:visible import="/js/hydration-entrypoints/playground-elements.js" class="example" aria-hidden="true">
           <playground-project
@@ -68,6 +68,7 @@ function playgroundExample(eleventyConfig) {
           ><md-circular-progress indeterminate></md-circular-progress></playground-file-editor>
         </lit-island>
       </details>
+      <p><a href="./stories/" target="_blank">Open interactive demo in new tab.</a></p>
     `;
   });
 }
diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html
index ffb00091e0..fea6233560 100644
--- a/catalog/site/_includes/default.html
+++ b/catalog/site/_includes/default.html
@@ -49,7 +49,10 @@
     <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->
     {% inlinejs "ssr-utils/dsd-polyfill.js" %}
     <lit-island on:idle import="/js/hydration-entrypoints/navigation.js">
-      <nav-drawer page-title="{{name}}" {% if hasToc %}has-toc{% endif %}>
+      <nav-drawer
+          page-title="{{name}}"
+          {% if hasToc %}has-toc{% endif %}
+          {% if fullHeightContent %}full-height-content{% endif %}>
         <top-app-bar slot="top-app-bar" baseURI="/">
           {% block topappbar %}{{ topappbar | safe }}{% endblock %}
         </top-app-bar>
@@ -97,7 +100,7 @@
             <md-list-item
               href="{{ file.url }}"
               role="menuitem"
-              {% if file.url == page.url %}selected{% endif %}
+              {% if file.url == page.url or file.url == tabUrl %}selected{% endif %}
               type="link"
               tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
             >{{ file.data.name }}</md-list-item>
diff --git a/catalog/site/css/syntax-highlight.css b/catalog/site/css/syntax-highlight.css
index 831441a71f..78b0050c46 100644
--- a/catalog/site/css/syntax-highlight.css
+++ b/catalog/site/css/syntax-highlight.css
@@ -50,6 +50,7 @@
 
 /* Formats the code boxes themselves */
 .example playground-file-editor,
+playground-file-editor,
 pre[class*='language-'] {
   padding: var(--__code-block-font-size);
   /* Remove the extra hard coded 3px from line number padding. */
diff --git a/catalog/site/stories/stories.html b/catalog/site/stories/stories.html
new file mode 100644
index 0000000000..8969c909ff
--- /dev/null
+++ b/catalog/site/stories/stories.html
@@ -0,0 +1,68 @@
+---js
+{
+  pagination: {
+    data: "collections.component",
+    size: 1,
+    alias: "component",
+    before: components => {
+      // remove any components that don't have a dirname
+      return components.filter(component => component.data.dirname)
+    }
+  },
+  permalink: "components/{{component.data.page.fileSlug}}/stories/index.html",
+  fullHeightContent: "true",
+  collections: ["stories"],
+  eleventyComputed: {
+    dirname: ({component}) => component.data.dirname,
+    name: ({component}) => component.data.name,
+    tabUrl: ({component}) => component.data.page.url,
+  }
+}
+---
+
+{% extends 'default.html' %} {% block head %}
+<script type="module" src="/js/pages/components.js"></script>
+<script type="module" src="/js/pages/stories.js"></script>
+<script
+  type="module"
+  src="/js/hydration-entrypoints/playground-elements.js"
+></script>
+<link rel="stylesheet" href="/css/md-layout.css" />
+<link rel="stylesheet" href="/css/syntax-highlight.css" />
+<style>
+  #dragbar {
+    max-width: 100%;
+  }
+  #editor {
+    margin-block: 0;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  #editor-wrapper {
+    height: 100%;
+    overflow: hidden;
+  }
+</style>
+{% endblock %} {% block content %}
+<playground-project
+  id="project"
+  project-src="/assets/stories/{{dirname}}/project.json"
+>
+</playground-project>
+<drag-playground id="dragbar">
+  <playground-preview id="preview" project="project" slot="preview">
+    <md-circular-progress indeterminate></md-circular-progress>
+  </playground-preview>
+  <div slot="editor" id="editor-wrapper">
+    <playground-file-editor
+      id="editor"
+      project="project"
+      filename="stories.ts"
+      line-numbers
+      aria-hidden="true"
+    >
+      <md-circular-progress indeterminate></md-circular-progress>
+    </playground-file-editor>
+  </div>
+</drag-playground>
+{% endblock %}
diff --git a/catalog/src/components/drag-playground.ts b/catalog/src/components/drag-playground.ts
new file mode 100644
index 0000000000..d03b7c3ae2
--- /dev/null
+++ b/catalog/src/components/drag-playground.ts
@@ -0,0 +1,201 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@material/web/icon/icon.js';
+
+/**
+ * A playground preview + editor with a draggable handle.
+ */
+@customElement('drag-playground')
+export class DragPlayground extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      --_drag-bar-height: 24px;
+      --_drag-bar-border-width: 1px;
+      --_half-drag-bar-height: calc(
+        (var(--_drag-bar-height) / 2) + var(--_drag-bar-border-width)
+      );
+    }
+
+    #wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    :host,
+    #wrapper,
+    ::slotted(*) {
+      height: 100%;
+    }
+
+    slot {
+      display: block;
+      overflow: hidden;
+    }
+
+    [name='preview'] {
+      height: max(
+        calc(
+          100% - var(--editor-percentage, 0%) - var(--_half-drag-bar-height)
+        ),
+        0px
+      );
+    }
+
+    [name='editor'] {
+      height: max(
+        calc(var(--editor-percentage, 0px) - var(--_half-drag-bar-height)),
+        0px
+      );
+    }
+
+    #drag-bar {
+      touch-action: none;
+      background-color: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+      border: var(--_drag-bar-border-width) solid var(--md-sys-color-outline);
+      border-radius: 12px;
+      height: var(--_drag-bar-height);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    #drag-bar.isDragging {
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+    }
+  `;
+
+  /**
+   * Whether or not we are in the "dragging" state.
+   */
+  @state() private isDragging = false;
+
+  /**
+   * The percentage of the editor height.
+   */
+  @state() private editorHeightPercent = 0;
+
+  @query('#wrapper') private wrapperEl!: HTMLElement;
+
+  /**
+   * A set of pointer IDs in the case that the user is dragging with multiple
+   * pointers.
+   */
+  private pointerIds: Set<number> = new Set();
+
+  render() {
+    return html`<div
+      id="wrapper"
+      style=${styleMap({
+        '--editor-percentage': `${this.editorHeightPercent}%`,
+      })}
+    >
+      <slot name="preview"></slot>
+      <div
+        id="drag-bar"
+        tabindex="0"
+        role="slider"
+        aria-orientation="vertical"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="${this.editorHeightPercent}"
+        aria-valuetext="${this.editorHeightPercent} percent"
+        aria-label="Editor height"
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        @keydown=${this.onKeydown}
+        @pointerdown=${this.onPointerdown}
+        @pointerup=${this.onPointerup}
+        @pointermove=${this.onPointermove}
+        class=${classMap({
+          isDragging: this.isDragging,
+        })}
+      >
+        <md-icon aria-hidden="true">drag_handle</md-icon>
+      </div>
+      <slot name="editor"></slot>
+    </div>`;
+  }
+
+  private onFocus() {
+    this.isDragging = true;
+  }
+
+  private onBlur() {
+    this.isDragging = false;
+  }
+
+  private onKeydown(event: KeyboardEvent) {
+    const { key } = event;
+    switch (key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        this.editorHeightPercent = Math.min(this.editorHeightPercent + 1, 100);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        this.editorHeightPercent = Math.max(this.editorHeightPercent - 1, 0);
+        break;
+      case 'PageUp':
+        this.editorHeightPercent = Math.min(this.editorHeightPercent + 10, 100);
+        break;
+      case 'PageDown':
+        this.editorHeightPercent = Math.max(this.editorHeightPercent - 10, 0);
+        break;
+      case 'Home':
+        this.editorHeightPercent = 0;
+        break;
+      case 'End':
+        this.editorHeightPercent = 100;
+        break;
+    }
+  }
+
+  private onPointerdown(event: PointerEvent) {
+    this.isDragging = true;
+
+    if (this.pointerIds.has(event.pointerId)) return;
+
+    this.pointerIds.add(event.pointerId);
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  private onPointerup(event: PointerEvent) {
+    this.pointerIds.delete(event.pointerId);
+    (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+
+    if (this.pointerIds.size === 0) {
+      this.isDragging = false;
+    }
+  }
+
+  private onPointermove(event: PointerEvent) {
+    if (!this.isDragging) return;
+
+    const { clientY: mouseY } = event;
+    const { top: wrapperTop, bottom: wrapperBottom } =
+      this.wrapperEl.getBoundingClientRect();
+
+    // The height of the wrapper
+    const height = wrapperBottom - wrapperTop;
+
+    // Calculate the percentage of the editor height in which the pointer is
+    // located
+    const editorHeightPercent = 100 - ((mouseY - wrapperTop) / height) * 100;
+
+    // Clamp the percentage between 0 and 100
+    this.editorHeightPercent = Math.min(Math.max(editorHeightPercent, 0), 100);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'drag-playground': DragPlayground;
+  }
+}
diff --git a/catalog/src/components/nav-drawer.ts b/catalog/src/components/nav-drawer.ts
index de9da1c4b2..9331891c13 100644
--- a/catalog/src/components/nav-drawer.ts
+++ b/catalog/src/components/nav-drawer.ts
@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {animate, fadeIn, fadeOut} from '@lit-labs/motion';
-import {EASING} from '@material/web/internal/motion/animation.js';
-import {LitElement, PropertyValues, css, html, nothing} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import { animate, fadeIn, fadeOut } from '@lit-labs/motion';
+import { EASING } from '@material/web/internal/motion/animation.js';
+import { LitElement, PropertyValues, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 
-import {drawerOpenSignal} from '../signals/drawer-open-state.js';
-import {inertContentSignal, inertSidebarSignal} from '../signals/inert.js';
-import {SignalElement} from '../signals/signal-element.js';
+import { drawerOpenSignal } from '../signals/drawer-open-state.js';
+import { inertContentSignal, inertSidebarSignal } from '../signals/inert.js';
+import { SignalElement } from '../signals/signal-element.js';
 
 /**
  * A layout element that positions the top-app-bar, the main page content, and
@@ -31,9 +31,15 @@ export class NavDrawer extends SignalElement(LitElement) {
   /**
    * Whether or not the TOC should be rendered.
    */
-  @property({type: Boolean, attribute: 'has-toc'}) hasToc = false;
+  @property({ type: Boolean, attribute: 'has-toc' }) hasToc = false;
 
-  @property({attribute: 'page-title'}) pageTitle = '';
+  /**
+   * Whether or not the content should be full height. rather than scrollable.
+   */
+  @property({ type: Boolean, attribute: 'full-height-content', reflect: true })
+  fullHeightContent = false;
+
+  @property({ attribute: 'page-title' }) pageTitle = '';
 
   private lastDrawerOpen = drawerOpenSignal.value;
 
@@ -66,7 +72,8 @@ export class NavDrawer extends SignalElement(LitElement) {
                     },
                     in: fadeIn,
                     out: fadeOut,
-                  })}></div>`
+                  })}
+                ></div>`
               : nothing}
             <aside
               ?inert=${this.isCollapsible && !drawerOpenSignal.value}
@@ -76,7 +83,8 @@ export class NavDrawer extends SignalElement(LitElement) {
                   duration: drawerSlideAnimationDuration,
                   easing: drawerSlideAnimationEasing,
                 },
-              })}>
+              })}
+            >
               <div class="scroll-wrapper">
                 <slot
                   ${animate({
@@ -85,7 +93,8 @@ export class NavDrawer extends SignalElement(LitElement) {
                       duration: drawerContentOpacityDuration,
                       easing: 'linear',
                     },
-                  })}></slot>
+                  })}
+                ></slot>
               </div>
             </aside>
           </div>
@@ -100,7 +109,8 @@ export class NavDrawer extends SignalElement(LitElement) {
   private renderContent(showModal: boolean) {
     return html` <div
       class="pane content-pane"
-      ?inert=${showModal || inertContentSignal.value}>
+      ?inert=${showModal || inertContentSignal.value}
+    >
       <div class="scroll-wrapper">
         <div class="content">
           <slot name="app-content"></slot>
@@ -116,7 +126,8 @@ export class NavDrawer extends SignalElement(LitElement) {
 
     return html` <div
       class="pane toc"
-      ?inert=${showModal || inertContentSignal.value}>
+      ?inert=${showModal || inertContentSignal.value}
+    >
       <div class="scroll-wrapper">
         <p>On this page:</p>
         <h2>${this.pageTitle}</h2>
@@ -151,7 +162,7 @@ export class NavDrawer extends SignalElement(LitElement) {
     ) {
       (
         this.querySelector(
-          'md-list.nav md-list-item[tabindex="0"]',
+          'md-list.nav md-list-item[tabindex="0"]'
         ) as HTMLElement
       )?.focus();
     }
@@ -280,6 +291,13 @@ export class NavDrawer extends SignalElement(LitElement) {
       box-sizing: border-box;
     }
 
+    :host([full-height-content]) .scroll-wrapper,
+    :host([full-height-content]) .content,
+    .content ::slotted(*) {
+      height: 100%;
+      max-height: 100%;
+    }
+
     .pane .scroll-wrapper {
       padding-block: var(--catalog-spacing-xl);
     }
diff --git a/catalog/src/pages/stories.ts b/catalog/src/pages/stories.ts
new file mode 100644
index 0000000000..ab2625c96e
--- /dev/null
+++ b/catalog/src/pages/stories.ts
@@ -0,0 +1 @@
+import '../components/drag-playground.js';
\ No newline at end of file
diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts
index 52ea560e72..998a5f7944 100644
--- a/catalog/src/ssr.ts
+++ b/catalog/src/ssr.ts
@@ -12,5 +12,6 @@ import './components/catalog-component-header-title.js';
 import './components/nav-drawer.js';
 import './components/theme-changer.js';
 import './components/top-app-bar.js';
+import './components/drag-playground.js';
 // 🤫
 import '@material/web/labs/item/item.js';
diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts
index afa51ddd8e..84839b5046 100644
--- a/catalog/stories/components/knob-ui-components.ts
+++ b/catalog/stories/components/knob-ui-components.ts
@@ -13,11 +13,11 @@ import '@material/web/select/filled-select.js';
 import '@material/web/select/select-option.js';
 import '@material/web/textfield/filled-text-field.js';
 
-import {css, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-import {StyleInfo, styleMap} from 'lit/directives/style-map.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import {Knob, KnobUi} from '../knobs.js';
+import { Knob, KnobUi } from '../knobs.js';
 
 /**
  * A boolean Knob UI.
@@ -36,7 +36,8 @@ export function boolInput(): KnobUi<boolean> {
               touch-target="none"
               style="margin-inline-end: 16px;"
               .checked=${!!knob.latestValue}
-              @change="${valueChanged}">
+              @change="${valueChanged}"
+            >
             </md-checkbox>
             ${knob.name}
           </label>
@@ -51,7 +52,7 @@ export function boolInput(): KnobUi<boolean> {
  */
 @customElement('knob-color-selector')
 export class KnobColorSelector extends LitElement {
-  static override styles = css`
+  static styles = css`
     :host {
       display: inline-block;
       position: relative;
@@ -111,7 +112,7 @@ export class KnobColorSelector extends LitElement {
 
   private internalValue = '';
 
-  @property({type: Boolean}) hasAlpha = false;
+  @property({ type: Boolean }) hasAlpha = false;
 
   set value(val: string) {
     const oldVal = this.internalValue;
@@ -119,12 +120,12 @@ export class KnobColorSelector extends LitElement {
     this.requestUpdate('value', oldVal);
   }
 
-  @property({type: String, reflect: true})
+  @property({ type: String, reflect: true })
   get value() {
     return this.internalValue;
   }
 
-  override render() {
+  render() {
     return html`<span id="wrapper">
       <span>
         ${this.hasAlpha ? this.renderTextInput() : this.renderColorInput()}
@@ -132,7 +133,8 @@ export class KnobColorSelector extends LitElement {
       <md-outlined-button
         @click=${() => {
           this.hasAlpha = !this.hasAlpha;
-        }}>
+        }}
+      >
         ${this.hasAlpha ? 'rgba' : 'rgb'}
       </md-outlined-button>
     </span>`;
@@ -143,7 +145,8 @@ export class KnobColorSelector extends LitElement {
       style=${styleMap(sharedTextFieldStyles)}
       .value=${this.value}
       @change=${this.propagateEvt}
-      @input=${this.onInput}></md-filled-text-field>`;
+      @input=${this.onInput}
+    ></md-filled-text-field>`;
   }
 
   private renderColorInput() {
@@ -158,7 +161,8 @@ export class KnobColorSelector extends LitElement {
         id="color-picker"
         .value=${this.value}
         @change=${this.propagateEvt}
-        @input=${this.onInput} />
+        @input=${this.onInput}
+      />
     `;
   }
 
@@ -176,17 +180,17 @@ export class KnobColorSelector extends LitElement {
     this.dispatchEvent(newEvt);
   }
 
-  override click() {
+  click() {
     const input = this.renderRoot!.querySelector(
-      'input,md-filled-text-field',
+      'input,md-filled-text-field'
     ) as HTMLElement;
     input.click();
     input.focus();
   }
 
-  override focus() {
+  focus() {
     const input = this.renderRoot!.querySelector(
-      'input,md-filled-text-field',
+      'input,md-filled-text-field'
     ) as HTMLElement;
     input.focus();
   }
@@ -226,7 +230,8 @@ export function colorPicker(opts?: ColorPickerOpts): KnobUi<string> {
             <knob-color-selector
               .value="${knob.latestValue ?? ''}"
               .hasAlpha="${config.hasAlpha}"
-              @input=${valueChanged}></knob-color-selector>
+              @input=${valueChanged}
+            ></knob-color-selector>
             ${knob.name}
           </label>
         </div>
@@ -245,7 +250,7 @@ const sharedTextFieldStyles: StyleInfo = {
   '--md-filled-field-trailing-space': '8px',
   '--md-filled-field-top-space': '4px',
   '--md-filled-field-bottom-space': '4px',
-  'width': '150px',
+  width: '150px',
   'min-width': '150px',
 };
 
@@ -272,7 +277,8 @@ export function textInput<T>(options?: TextInputOptions<T>): KnobUi<T> {
             <md-filled-text-field
               style=${styleMap(sharedTextFieldStyles)}
               .value="${(knob.latestValue ?? '') as unknown as string}"
-              @input="${valueChanged}"></md-filled-text-field>
+              @input="${valueChanged}"
+            ></md-filled-text-field>
             ${knob.name}
           </label>
         </div>
@@ -313,7 +319,8 @@ export function numberInput(opts?: NumberInputOpts): KnobUi<number> {
               type="number"
               step="${config.step}"
               .value="${knob.latestValue ? knob.latestValue.toString() : '0'}"
-              @input="${valueChanged}"></md-filled-text-field>
+              @input="${valueChanged}"
+            ></md-filled-text-field>
             ${knob.name}
           </label>
         </div>
@@ -333,7 +340,7 @@ export function button(): KnobUi<number> {
         const count = knob.latestValue ?? 0;
         onChange(count + 1);
       };
-      const styles = styleMap({display: 'inline-block'});
+      const styles = styleMap({ display: 'inline-block' });
       return html`
         <md-outlined-button outlined @click=${onClick} style=${styles}>
           ${knob.name}
@@ -344,7 +351,10 @@ export function button(): KnobUi<number> {
 }
 
 interface RadioSelectorConfig<T extends string> {
-  readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>;
+  readonly options: ReadonlyArray<{
+    readonly value: T;
+    readonly label: string;
+  }>;
   readonly name: string;
 }
 
@@ -365,7 +375,8 @@ export function radioSelector<T extends string>({
             name="${name}"
             value="${value}"
             @change="${valueChanged}"
-            ?checked="${knob.latestValue === option.value}"></md-radio>
+            ?checked="${knob.latestValue === option.value}"
+          ></md-radio>
           ${option.label}
         </label>`;
       });
@@ -375,7 +386,10 @@ export function radioSelector<T extends string>({
 }
 
 interface SelectDropdownConfig<T extends string> {
-  readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>;
+  readonly options: ReadonlyArray<{
+    readonly value: T;
+    readonly label: string;
+  }>;
 }
 
 /** A select dropdown Knob UI. */
@@ -391,14 +405,17 @@ export function selectDropdown<T extends string>({
         return html`<md-select-option
           ?selected="${knob.latestValue === option.value}"
           .value="${option.value}"
-          .headline=${option.label}></md-select-option>`;
+        >
+          <div slot="headline">${option.label}</div>
+        </md-select-option>`;
       });
       return html`
         <label>
           <md-filled-select
             @change="${valueChanged}"
             menu-positioning="fixed"
-            style=${styleMap(sharedTextFieldStyles)}>
+            style=${styleMap(sharedTextFieldStyles)}
+          >
             ${listItems}
           </md-filled-select>
           ${knob.name}
@@ -415,7 +432,7 @@ export function selectDropdown<T extends string>({
 export function cssCustomProperty(
   knob: Knob<string>,
   val: string,
-  containerOfRenderedStory: HTMLElement,
+  containerOfRenderedStory: HTMLElement
 ) {
   const value = knob.isUnset ? knob.defaultValue : val;
   if (value) {