Resizable panes

package.json

@@ -63,6 +63,8 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@sindresorhus/slugify": "^1.1.2",
+    "@spectrum-web-components/shared": "^0.47.2",
+    "@spectrum-web-components/split-view": "^0.47.2",
     "@types/deep-equal": "^1.0.4",
     "@types/jquery": "^3.5.30",
     "@types/jqueryui": "^1.12.23",

source/assets/js/playground.ts

@@ -5,6 +5,7 @@ import debounce from 'lodash/debounce';
 import {Logger, OutputStyle, Syntax, compileString, info} from 'sass';
 
 import {displayForConsoleLog} from './playground/console-utils.js';
+import setupSplitView from './playground/split-view.js';
 
 import {
   changeSyntax,
@@ -29,6 +30,7 @@ type Timer = undefined | number;
 const MICROINTERACTION_RESET_TIME = 3000;
 
 function setupPlayground(): void {
+  setupSplitView();
   const hash = location.hash.slice(1);
   const hashState = deserializeState(hash);
 

source/assets/js/playground/split-view.ts

@@ -0,0 +1,17 @@
+import {SplitView} from '@spectrum-web-components/split-view';
+import '@spectrum-web-components/split-view/sp-split-view.js';
+
+/**
+ * Make split views responsive and stack vertically on narrow screens.
+ */
+export default function setupSplitView(): void {
+  // 60em = --sl-breakpoint--large
+  const mql = window.matchMedia('(max-width: 60em');
+  const topSplit = document.querySelector('.sl-c-playground') as SplitView;
+
+  function updateLayout(event: MediaQueryListEvent | MediaQueryList): void {
+    if (topSplit) topSplit.vertical = event.matches;
+  }
+  updateLayout(mql);
+  mql.addEventListener('change', updateLayout);
+}

source/assets/sass/components/_playground.scss

@@ -117,28 +117,28 @@ $playground-base-colors: (
 
 // Playground Editor area
 .sl-c-playground {
+  --mod-splitview-gripper-width: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-height: var(--sl-gutter);
+  --mod-splitview-gripper-border-width-horizontal: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-border-width-vertical: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-border-radius: var(--sl-border-radius--small);
+  --mod-splitview-handle-width: var(--sl-gutter--quarter);
+  --mod-splitview-handle-background-color: var(--sl-color--code-divider);
+  --mod-splitview-handle-background-color-down: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-focus: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-hover: var(--sl-color--code-divider-active);
   --sl-block-margin--callout: 0;
   --sl-block-padding--callout: var(--sl-gutter--quarter);
   --sl-color--button--tab: var(--sl-color--action-dark);
 
-  display: grid;
-  gap: var(--sl-gutter);
-  grid-template:
-    'sass' 1fr
-    'css' auto
-    'debug' auto / 100%;
-
   @include config.sl-breakpoint--large {
-    // magic numbers, the layout is well balanced with these proportions
-    grid-template:
-      'sass css' minmax(20ex, 1fr)
-      'sass debug' minmax(0, 40%) / 1fr 1fr;
     height: 100%;
     overflow: inherit;
   }
 }
 
 .sl-c-playground__panel {
+  container: playground-panel / inline-size;
   display: grid;
   overflow: inherit;
   grid-template:
@@ -147,6 +147,12 @@ $playground-base-colors: (
     'editor-code' 1fr / 1fr;
 }
 
+@container playground-panel (inline-size < 50ch) {
+  .sl-c-playground__editor-tabbar {
+    flex-wrap: wrap;
+  }
+}
+
 .sl-c-playground__panel-content {
   grid-area: editor-code;
   overflow: hidden auto;
@@ -361,7 +367,7 @@ $playground-base-colors: (
   &.sl-c-button--icon {
     --sl-background--button: transparent;
     --sl-background--button-state: transparent;
-    --sl-block-padding--button: 0;
+    --sl-block-padding--button: var(--sl-gutter--half);
     --sl-color--button: var(--sl-color--text-medium-dark);
     --sl-color--button-state: var(--sl-color--action-dark);
 

source/assets/sass/config/color/_content.scss

@@ -42,6 +42,8 @@ $sl-color--code-base: #066;
 $sl-color--code-cool: #458;
 $sl-color--code-dark: black;
 $sl-color--code-highlight-light: rgba($sl-color--warning-light, 0.2);
+$sl-color--code-divider: color.adjust($sl-color--code-background-darker, $lightness: -10%);
+$sl-color--code-divider-active: color.adjust($sl-color--code-background-darker, $lightness: -15%);
 
 // Playground Status
 $sl-color--code-error: #cf0254;