Move data-active to tab bar button

source/assets/js/playground.ts

@@ -122,12 +122,24 @@ function setupPlayground() {
     const inputFormatTab = document.querySelector(
       '[data-setting="inputFormat"]',
     ) as HTMLDivElement;
-    inputFormatTab.dataset.active = playgroundState.inputFormat;
+    const inputButtons = inputFormatTab.querySelectorAll('[data-value]');
+    inputButtons.forEach((button) => {
+      if (!(button instanceof HTMLButtonElement)) return;
+      button.dataset.active = String(
+        button.dataset.value === playgroundState.inputFormat,
+      );
+    });
 
     const outputFormatTab = document.querySelector(
       '[data-setting="outputFormat"]',
     ) as HTMLDivElement;
-    outputFormatTab.dataset.active = playgroundState.outputFormat;
+    const outputButtons = outputFormatTab.querySelectorAll('[data-value]');
+    outputButtons.forEach((button) => {
+      if (!(button instanceof HTMLButtonElement)) return;
+      button.dataset.active = String(
+        button.dataset.value === playgroundState.outputFormat,
+      );
+    });
   }
 
   /**

source/assets/sass/components/_playground.scss

@@ -174,7 +174,7 @@
   .console-line {
     display: grid;
     gap: var(--sl-gutter);
-    grid-template: 
+    grid-template:
       'location message' auto / 10ch 1fr;
   }
 
@@ -199,25 +199,22 @@
   background-color: var(--sl-color--code-background-darker);
   display: flex;
 
-  $sassoptions: 'scss', 'indented';
+  [data-active='true'] {
+    --color-button-tab-active: var(--text, var(--sl-color--pale-sky));
+    --color-tab-focus: var(--color-button-tab-active);
+  }
 
-  @each $option in $sassoptions {
-    &[data-active='#{$option}'] [data-value='#{$option}'] {
-      --color-button-tab-active: var(--text, var(--sl-color--pale-sky));
+  [data-code='precompiled'] & {
+    [data-active='true'] {
       --color-tab-background: var(--sl-color--white);
       --color-tab-background-hover: var(--sl-color--white);
-      --color-tab-focus: var(--color-button-tab-active);
     }
   }
 
-  $cssoptions: 'expanded', 'compressed';
-
-  @each $option in $cssoptions {
-    &[data-active='#{$option}'] [data-value='#{$option}'] {
-      --color-button-tab-active: var(--text, var(--sl-color--pale-sky));
+  [data-code='compiled'] & {
+    [data-active='true'] {
       --color-tab-background: var(--sl-color--code-background);
       --color-tab-background-hover: var(--sl-color--code-background);
-      --color-tab-focus: var(--color-button-tab-active);
     }
   }
 }
@@ -240,6 +237,7 @@
   // For nested caps in tab title, reset a few styles
   .caps {
     --sl-font-size--caps: var(--sl-font-size--medium);
+
     font-weight: normal;
     letter-spacing: 0;
   }

source/playground.liquid

@@ -6,19 +6,18 @@ is_playground: true
 
 <div class="sl-c-playground" data-compiler-has-error="false">
   <div class="sl-c-playground__code-editor-wrapper" data-code="precompiled">
-    <div
-      class="sl-c-playground__editor-tabbar"
-      data-active="scss"
-      data-setting="inputFormat">
+    <div class="sl-c-playground__editor-tabbar" data-setting="inputFormat">
       <button
         type="button"
         data-value="scss"
+        data-active="true"
         data-tabbar="item"
         class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">SCSS</button>
       <button
         type="button"
         data-value="indented"
+        data-active="false"
         data-tabbar="item"
         class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">Sass</button>
@@ -26,19 +25,18 @@ is_playground: true
     <div id="editor"></div>
   </div>
   <div class="sl-c-playground__code-editor-wrapper" data-code="compiled">
-    <div
-      class="sl-c-playground__editor-tabbar"
-      data-active="expanded"
-      data-setting="outputFormat">
+    <div class="sl-c-playground__editor-tabbar" data-setting="outputFormat">
       <button
         type="button"
         data-value="expanded"
+        data-active="true"
         data-tabbar="item"
         class="sl-c-button sl-c-button--tab"
         data-setting="outputFormat">Expanded</button>
       <button
         type="button"
         data-value="compressed"
+        data-active="false"
         data-tabbar="item"
         class="sl-c-button sl-c-button--tab"
         data-setting="outputFormat">Compressed</button>