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

@@ -1,7 +1,11 @@
 slide-deck {
+  --color-dark: #1e1e1e;
+  --color-light: white;
   --gap: clamp(8px, 0.25em + 1vw, 16px);
+  color: var(--text-color);
   container: slide-deck / inline-size;
   display: grid;
+  min-height: 100vh;
 
   &[slide-view=grid] {
     --slide-ratio: 16/9;
@@ -18,16 +22,23 @@ slide-deck {
 
   &[blank-slide]::after {
     content: '';
-    background-color: var(--blank-color, black);
+    background-color: var(--blank-color);
     position: absolute;
     inset: 0;
+    z-index: -1;
+  }
+
+  &[blank-slide=black] {
+    --blank-color: var(--color-dark);
+    --text-color: var(--color-light);
   }
 
   &[blank-slide=white] {
-    --blank-color: white;
+    --blank-color: var(--color-light);
+    --text-color: var(--color-dark);
   }
 
-  [id^=slide_] {
+  [slide-canvas] {
     aspect-ratio: var(--slide-ratio);
     border: thin solid;
     box-sizing: border-box;
@@ -42,6 +53,10 @@ slide-deck {
     }
   }
 
+  [slide-note] {
+    margin-block: var(--gap);
+  }
+
   &::part(control-panel) {
     min-width: min(50ch, 100%);
     padding: 0;
@@ -67,7 +82,7 @@ slide-deck {
   }
 
   [aria-pressed=true],
-  &::part(button pressed) {
+  &::part(pressed) {
     border-color: currentColor;
   }
 }