Add slide parts (and mark private methods)

CHANGELOG.md

@@ -6,6 +6,13 @@ until we achieve a stable v1.0 release
 
 ## v0.1.2 - unreleased
 
+- 🚀 NEW: Add support for slide parts – `slide-canvas` & `slide-note`
+  (these parts require light DOM styles)
+- 🚀 NEW: Slide parts can be hidden
+  with the `hide-parts="note | canvas"` attribute
+  (both parts cannot be hidden at the same time)
+- 🚀 NEW: Add support for `hide-part="note | canvas"` buttons
+  to toggle hiding the notes and canvass
 - 💥 BREAKING: Removed the shadow DOM content wrapper,
   and all shadow DOM styles
 - 💥 BREAKING: Renamed and added control-panel parts,

index.html

@@ -104,12 +104,56 @@ <h2>Open Source</h2>
           <a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
         </p>
       </div>
+
+      <div>
+        <div slide-canvas>
+          <h2>Speaker Notes</h2>
+          <pre><code>&lt;div&gt;
+  &lt;div slide-canvas&gt;
+    This slide has both a canvas
+  &lt;/div&gt;
+  &lt;div slide-note&gt;
+    And a section for notes
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+        <div slide-note>
+          <p>
+            Within a slide element,
+            we can provide both a 'canvas' and a 'note'!
+            For styling purposes:
+          </p>
+          <ul>
+            <li>
+              A slide without nested parts
+              will be labeled
+              with the <code>slide-canvas</code> attribute
+            </li>
+            <li>
+              A slide with internal parts
+              will be labeled
+              as a <code>slide-container</code> instead
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <div slide-canvas>
+          <h3>Hiding parts</h3>
+          <button hide-part="note">hide notes</button>
+          <button hide-part="canvas">hide canvas</button>
+        </div>
+        <div slide-note>
+          <p>
+            These parts can be shown or hidden separately,
+            but you can never hide both at once.
+          </p>
+        </div>
+      </div>
       <div><h2>To Do…</h2></div>
-      <div><h3>… Speaker Notes</h3></div>
       <div><h3>… Slide Templates</h3></div>
       <div><h3>… CSS Themes</h3></div>
       <div><h3>… More Better Good Stuff</h3></div>
     </slide-deck>
-
   </body>
 </html>

slide-deck.css

@@ -27,7 +27,7 @@ slide-deck {
     --blank-color: white;
   }
 
-  [id^=slide_] {
+  [slide-canvas] {
     aspect-ratio: var(--slide-ratio);
     border: thin solid;
     box-sizing: border-box;
@@ -42,6 +42,10 @@ slide-deck {
     }
   }
 
+  [slide-note] {
+    margin-block: var(--gap);
+  }
+
   &::part(control-panel) {
     min-width: min(50ch, 100%);
     padding: 0;
@@ -67,7 +71,7 @@ slide-deck {
   }
 
   [aria-pressed=true],
-  &::part(button pressed) {
+  &::part(pressed) {
     border-color: currentColor;
   }
 }