add expanded support

docs/assets/plugins/code-block/code-block.js

@@ -113,6 +113,7 @@
 
       [...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
         if (code.classList.contains('preview')) {
+          const isExpanded = code.classList.contains('expanded');
           const pre = code.closest('pre');
           const sourceGroupId = `code-block-source-group-${count}`;
           const toggleId = `code-block-toggle-${count}`;
@@ -129,7 +130,7 @@
           pre.setAttribute('aria-labelledby', toggleId);
 
           const codeBlock = `
-            <div class="code-block">
+            <div class="code-block ${isExpanded ? 'code-block--expanded' : ''}">
               <div class="code-block__preview">
                 ${code.textContent}
                 <div class="code-block__resizer">
@@ -156,7 +157,12 @@
               <div class="code-block__buttons">
                 ${hasReact ? ` ${htmlButton} ${reactButton} ` : ''}
 
-                <button type="button" class="code-block__button code-block__toggle" aria-expanded="false" aria-controls="${sourceGroupId}">
+                <button
+                  type="button"
+                  class="code-block__button code-block__toggle"
+                  aria-expanded="${isExpanded ? 'true' : 'false'}"
+                  aria-controls="${sourceGroupId}"
+                >
                   Source
                   <svg
                     viewBox="0 0 24 24"

docs/getting-started/overview.md

@@ -37,11 +37,11 @@ Add the following code to your page.
 
 Now you have access to all of Shoelace's components! Try adding a button:
 
-```html
+```html preview expanded
 <sl-button>Click me</sl-button>
 ```
 
-This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
+?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
 
 
 ## New to Web Components?