styleable demo containers

content/patterns/coding/writing-inline-demos.md

@@ -42,7 +42,7 @@ toggle.addEventListener('click', (e) => {
 
 Note the `demo.querySelector` on line `21`. **Cupper** automatically provides `demo`, representing the root node of the demo. It's like the `document` keyword but for a demo's subtree.
 
-Here's a live demo of… the demo:
+Here's a live demo _of_ the demo:
 
 {{<demo>}}
 <button aria-pressed="false">Toggle Me</button>
@@ -74,13 +74,27 @@ toggle.addEventListener('click', function () {
 </script>
 {{</demo>}}
 
-## Launch in a separate window
+## Styling the container
 
-The "Launch in separate window" button takes the demo code and pushes it to a new browser window. This serves two purposes:
+Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block's container element using the `style` attribute. It works just like standard inline styling.
+
+{{<codeBlock lang="html">}}
+&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+{{</codeBlock>}}
+
+## "Launch"
+
+The "Launch" button takes the demo code and pushes it to a new browser tab. This serves two purposes:
 
 * It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).
 * It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and _just_ the demo code.
 
+{{% note %}}
+The "Launch" button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).
+{{% /note %}}
+
 ## Captioned demos
 
 It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:
@@ -92,13 +106,3 @@ It's possible to give your demo a caption using an accessible `<figure>` and `<f
 {{</codeBlock>}}
 
 Along with the standard `figure` shortcodes (described in {{% pattern "Including images" %}}), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.
-
-## Background colors
-
-Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the `backgroundColor` attribute. Any valid CSS color value is acceptable:
-
-{{<codeBlock lang="html">}}
-&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
-&lt;!-- demo code here -->
-&#x7b;{&lt;/demo>}}
-{{</codeBlock>}}

docs/css/styles.css

@@ -186,13 +186,17 @@ button {
     border: 0;
 }
 [data-launch] {
-  font-size: 0.75rem !important;
+  font-size: 0.66rem !important;
-  margin-top: 0.75rem !important;
   padding: 0.5rem !important;
+  margin-top: 0 !important;
   border-radius: 0 !important;
+  border-top-left-radius: 0.33rem !important;
   box-shadow: none !important;
   background: #111 !important;
-  color: #fefefe !important
+  color: #fefefe !important;
+  position: absolute !important;
+  right: 0 !important;
+  bottom: 0 !important;
 }
 
 /* Forms */
@@ -737,8 +741,8 @@ h1 svg {
 .demo-inner {
   border-top: 1px solid;
   border-bottom: 1px solid;
-  padding: 1.5rem 0 0;
+  padding: 1.5rem 0;
-  text-align: right;
+  position: relative;
 }
 
 [id^="js-demo-"] {

docs/patterns/coding/writing-inline-demos/index.html

@@ -397,8 +397,14 @@
     <ol>
       
         <li>
-          <a href="#launch-in-a-separate-window">
+          <a href="#styling-the-container">
-            Launch in a separate window
+            Styling the container
+          </a>
+        </li>
+      
+        <li>
+          <a href="#launch">
+            “Launch”
           </a>
         </li>
       
@@ -408,12 +414,6 @@
           </a>
         </li>
       
-        <li>
-          <a href="#background-colors">
-            Background colors
-          </a>
-        </li>
-      
     </ol>
   </nav>
 
@@ -461,14 +461,14 @@ toggle.addEventListener('click', (e) => {
 
 <p>Note the <code>demo.querySelector</code> on line <code>21</code>. <strong>Cupper</strong> automatically provides <code>demo</code>, representing the root node of the demo. It&rsquo;s like the <code>document</code> keyword but for a demo&rsquo;s subtree.</p>
 
-<p>Here&rsquo;s a live demo of&hellip; the demo:</p>
+<p>Here&rsquo;s a live demo <em>of</em> the demo:</p>
 
 
 <div class="demo-container">
   
       <div class="demo-inner" >
         <div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
-        <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
+        <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch <span aria-hidden="true">↗</span></button>
       </div>
       
   
@@ -550,39 +550,50 @@ toggle.addEventListener('click', function () {
 </div>
 
 
-<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+<h2 id="styling-the-container">Styling the container</h2>
 
-<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+<p>Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block&rsquo;s container element using the <code>style</code> attribute. It works just like standard inline styling.</p>
+
+<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
+&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+</code></pre>
+</p>
+
+<h2 id="launch">&ldquo;Launch&rdquo;</h2>
+
+<p>The &ldquo;Launch&rdquo; button takes the demo code and pushes it to a new browser tab. This serves two purposes:</p>
 
 <ul>
 <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
 <li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
 </ul>
 
+<aside aria-label="note" class="note">
+  <div>
+    <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
+      <use xlink:href="#info"></use>
+    </svg>
+    <p>The &ldquo;Launch&rdquo; button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).</p>
+
+  </div>
+</aside>
+
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
 
-<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
+<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
 </code></pre>
-</p>
+
 
 <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/cupper/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
-<h2 id="background-colors">Background colors</h2>
-
-<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
-
-<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
-&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
-&lt;!-- demo code here -->
-&#x7b;{&lt;/demo>}}
-</code></pre>
-
-
   </main>
 
           <footer role="contentinfo">

docs/print-version/index.html

@@ -1959,14 +1959,14 @@ toggle.addEventListener('click', (e) => {
 
 <p>Note the <code>demo.querySelector</code> on line <code>21</code>. <strong>Cupper</strong> automatically provides <code>demo</code>, representing the root node of the demo. It&rsquo;s like the <code>document</code> keyword but for a demo&rsquo;s subtree.</p>
 
-<p>Here&rsquo;s a live demo of&hellip; the demo:</p>
+<p>Here&rsquo;s a live demo <em>of</em> the demo:</p>
 
 
 <div class="demo-container">
   
       <div class="demo-inner" >
         <div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
-        <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
+        <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch <span aria-hidden="true">↗</span></button>
       </div>
       
   
@@ -2048,39 +2048,50 @@ toggle.addEventListener('click', function () {
 </div>
 
 
-<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+<h2 id="styling-the-container">Styling the container</h2>
 
-<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+<p>Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block&rsquo;s container element using the <code>style</code> attribute. It works just like standard inline styling.</p>
+
+<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
+&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+</code></pre>
+</p>
+
+<h2 id="launch">&ldquo;Launch&rdquo;</h2>
+
+<p>The &ldquo;Launch&rdquo; button takes the demo code and pushes it to a new browser tab. This serves two purposes:</p>
 
 <ul>
 <li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
 <li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
 </ul>
 
+<aside aria-label="note" class="note">
+  <div>
+    <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
+      <use xlink:href="#info"></use>
+    </svg>
+    <p>The &ldquo;Launch&rdquo; button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).</p>
+
+  </div>
+</aside>
+
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
 
-<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
+<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
 </code></pre>
-</p>
+
 
 <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/cupper/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
-<h2 id="background-colors">Background colors</h2>
-
-<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
-
-<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
-&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
-&lt;!-- demo code here -->
-&#x7b;{&lt;/demo>}}
-</code></pre>
-
-
           </div>
         
           <div class="pattern-section">

themes/cupper/layouts/shortcodes/demo.html

@@ -3,9 +3,9 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo-inner" {{ if .Get "backgroundColor" }}style="background-color: {{ .Get "backgroundColor" | safeCSS }}"{{ end }}>
+      <div class="demo-inner" {{ if .Get "style" }}style="{{ .Get "style" | safeCSS }}"{{ end }}>
         <div class="demo" id="js-demo-{{ $uniq }}"></div>
-        <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
+        <button data-launch="js-demo-{{ $uniq }}">Launch <span aria-hidden="true">↗</span></button>
       </div>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
@@ -26,7 +26,7 @@
       demoDiv.innerHTML = template.innerHTML;
       var standaloneScript = demoDiv.querySelector('script');
       if (standaloneScript) {
-        standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
+        standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; {{ if .Get "style" }}document.body.setAttribute(\'style\', \'{{ .Get "style" | safeCSS }}\'){{ end }}' + standaloneScript.textContent + ' })();';
       }
 
       if (document.head.attachShadow) {

themes/cupper/static/css/styles.css

@@ -186,13 +186,17 @@ button {
     border: 0;
 }
 [data-launch] {
-  font-size: 0.75rem !important;
+  font-size: 0.66rem !important;
-  margin-top: 0.75rem !important;
   padding: 0.5rem !important;
+  margin-top: 0 !important;
   border-radius: 0 !important;
+  border-top-left-radius: 0.33rem !important;
   box-shadow: none !important;
   background: #111 !important;
-  color: #fefefe !important
+  color: #fefefe !important;
+  position: absolute !important;
+  right: 0 !important;
+  bottom: 0 !important;
 }
 
 /* Forms */
@@ -737,8 +741,8 @@ h1 svg {
 .demo-inner {
   border-top: 1px solid;
   border-bottom: 1px solid;
-  padding: 1.5rem 0 0;
+  padding: 1.5rem 0;
-  text-align: right;
+  position: relative;
 }
 
 [id^="js-demo-"] {