* Remove link to web.dev because honestly their site is kinda the opposite of the point I want to make

* Add a link to Adrian Roselli's site instead
* Update the toggle to use the `switch` role
* Add some text about the proposal for the Invoker button
* Add a slide about theming

src/slides/02-what.md

@@ -4,6 +4,6 @@ type: statement
 
 ## Huh?
 
-* When we create a custom component, often we have to tell the browser how it should treat it
+* When we create a custom component, we have to tell the browser how it should treat it
 * But often browsers already give us the tools to do that natively
 * Reaching for CSS and HTML first can make our components faster, more reusable, and more accessible

src/slides/03-example-1.md

@@ -154,6 +154,7 @@ export default class Toggle extends Component<Props, State> {
 * Have to import all of this everywhere we use it
 * No meaningful labels possible!
 * No keyboard navigation
+* No Javascript? No component
 
 </div>
 

src/slides/04-example-1.md

@@ -4,7 +4,7 @@
 
 ```html
 <style>
-input[type="checkbox"][data-role="toggle"] {
+input[type="checkbox"][role="switch"] {
 	appearance: none;
 	background: lightgray;
 	border: 1px solid gray;
@@ -43,23 +43,27 @@ input[type="checkbox"][data-role="toggle"] {
 
 <input
     type="checkbox"
-    data-type="toggle"
+    role="switch"
     name="activated"
 />
 ```
 
 <div>
+	<label>
+		Enable:
 		<input
 			type="checkbox"
-        data-role="toggle"
+			role="switch"
 			name="activated"
 		/>
+	</label>
 
 * 42 lines of code
 * Uses regular HTML markup - 0 javascript needed
-* Fully accessible
+* `switch` role tells the browser that this is an on/off rather than a checked/unchecked component
-* Labels work
+* Easily accessible to screen readers, keyboard users
-* Can be used anywhere - all you need is the stylesheet
+* Can be used anywhere - all you need is the stylesheet at the top level
+* Graceful degradation - if the CSS doesn't load we still get a checkbox
 </div>
 
 </div>

src/slides/06-example-2.html

@@ -51,7 +51,11 @@ dialog::backdrop {
 
     <ul>
         <li>31 lines of code</li>
-        <li>A teensy bit of Javascript - I know, I'm a hypocrite</li>
+        <li>A teensy bit of Javascript - this is currently unavoidable
+            <ul>
+                <li>But there is an open proposal for `Invoker buttons` (<a href="https://open-ui.org/components/invokers.explainer/" target="_blank" rel="noreferrer">link</a>) to address this</li>
+            </ul>
+        </li>
         <li>Option to use as a popup <i>or</i> a modal</li>
         <li><code>::backdrop</code> pseudo-element for easy styling</li>
     </ul>

src/slides/09-themes.md

@@ -0,0 +1,39 @@
+## Themes
+
+<div class="grid">
+
+```css
+:root {
+    --color-primary: #dedede;
+    --color-secondary: #adadad;
+}
+
+body {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}
+
+
+[class*="column"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--column-spacing, 1rem);
+}
+
+.column-sm {
+    --column-spacing: 0.5rem;
+}
+
+.column-lg {
+    --column-spacing: 1.5rem;
+}
+```
+<div>
+
+* A few of the examples have had theme tokens injected into Styled Components
+* But we can also use CSS variables to inject our design tokens and use them everywhere
+* If we redefine a variable later on in the cascade, it applies to all subcomponents
+* Can also use sensible fallbacks for the instances where variables are undefined
+
+</div>
+</div>

src/slides/10-final-points.md

@@ -10,3 +10,5 @@ type: statement
 * When we build new components, let's see if the browser can't do it for us instead
 * Modern CSS is great
 * Javascript as a garnish, not a main course
+    * Building on the fundamentals of the web and then _progressively enhancing_ means we reach more users
+    * And our applications will be faster and cheaper to run as a result

src/slides/11-useful-links.md

@@ -6,4 +6,4 @@ type: statement
 
 * W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/
 * Every Layout - https://every-layout.dev/
-* Web.dev - https://web.dev/
+* Adrian Roselli: Patterns - https://adrianroselli.com/tag/pattern

src/styles/styles.css

@@ -75,6 +75,10 @@ main {
         ul {
             width: 100%;
             margin: var(--space-size-3xl) auto;
+
+            ul {
+                margin: var(--space-size-sm);
+            }
         }
     }
     
@@ -106,7 +110,7 @@ main {
         word-wrap: 
     }
 
-    input[type="checkbox"][data-role="toggle"] {
+    input[type="checkbox"][role="switch"] {
         appearance: none;
         background: lightgray;
         border: 1px solid gray;