diff --git a/docs/assets/css/components.css b/docs/assets/css/components.css
index 0087dfc..e90a389 100644
--- a/docs/assets/css/components.css
+++ b/docs/assets/css/components.css
@@ -275,6 +275,7 @@ input-button {
 		padding: 0 var(--space-s);
 		font-size: var(--font-size-s);
 		line-height: var(--line-height-s);
+		white-space: nowrap;
 		opacity: var(--opacity-dimmed);
 		transition: all var(--transition-shorter) var(--easing-inout);
 
diff --git a/docs/assets/css/global.css b/docs/assets/css/global.css
index f7ccc28..5031653 100644
--- a/docs/assets/css/global.css
+++ b/docs/assets/css/global.css
@@ -75,6 +75,8 @@
 	--easing-in: ease-in;
 	--easing-out: ease-out;
 	--easing-inout: ease-in-out;
+
+	--input-height: 2rem;
 }
   
 @media screen and (min-width: 45em) and (max-width: 75em) {
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index 0775457..4178a45 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -389,7 +389,7 @@ InputRadiogroup.define('input-radiogroup')
 class LazyLoad extends UIElement {
 	static observedAttributes = ['src']
 	static attributeMap = {
-        src: v => v.map(src => {
+		src: v => v.map(src => {
 				let url = ''
 				try {
 					url = new URL(src, location.href) // ensure 'src' attribute is a valid URL
@@ -402,20 +402,20 @@ class LazyLoad extends UIElement {
 				}
 				return url.toString()
 			})
-    }
+	}
 
 	connectedCallback() {
 
-		// show / hide loading message
+		// Show / hide loading message
 		this.first('.loading')
 			.forEach(setProperty('ariaHidden', () => !!this.get('error')))
 
-		// set and show / hide error message
+		// Set and show / hide error message
 		this.first('.error')
 			.map(setText('error'))
 			.forEach(setProperty('ariaHidden', () => !this.get('error')))
 
-		// load content from provided URL
+		// Load content from provided URL
 		effect(enqueue => {
 			const src = this.get('src')
 			if (!src) return // silently fail if no valid URL is provided
@@ -434,7 +434,7 @@ class LazyLoad extends UIElement {
 							})
 						})
 						this.set('error', '')
-                    } else {
+					} else {
 						this.set('error', response.status + ':'+ response.statusText)
 					}
 				})
@@ -525,44 +525,40 @@ class MediaContext extends UIElement {
 MediaContext.define('media-context')
 
 class TodoApp extends UIElement {
-    connectedCallback() {
+	connectedCallback() {
 		const [todoList, todoFilter] = ['todo-list', 'input-radiogroup']
 			.map(selector => this.querySelector(selector))
 
 		// Event listener on own element
-        this.self
-            .map(on('add-todo', e => todoList?.addItem(e.detail)))
-        
-        // Coordinate todo-count
-		this.first('todo-count')
-            .map(pass({ active: () => todoList?.get('count').active }))
-
-        // Coordinate todo-list
-        this.first('todo-list')
-            .map(pass({ filter: () => todoFilter?.get('value') }))
-
-        // Coordinate .clear-completed button
-        this.first('.clear-completed')
-            .map(on('click', () => todoList?.clearCompleted()))
-            .map(pass({ disabled: () => !todoList?.get('count').completed }))
-    }
+		this.self.forEach(on('add-todo', e => todoList?.addItem(e.detail)))
+		
+		// Coordinate todo-count
+		this.first('todo-count').forEach(pass({
+			active: () => todoList?.get('count').active
+		}))
+
+		// Coordinate todo-list
+		this.first('todo-list').forEach(pass({
+			filter: () => todoFilter?.get('value')
+		}))
+
+		// Coordinate .clear-completed button
+		this.first('.clear-completed')
+			.map(on('click', () => todoList?.clearCompleted()))
+			.forEach(pass({ disabled: () => !todoList?.get('count').completed }))
+	}
 }
 TodoApp.define('todo-app')
 
 class TodoCount extends UIElement {
 	connectedCallback() {
-        this.set('active', 0, false)
-		this.first('.count')
-			.map(setText('active'))
-		this.first('.singular')
-		    .map(setProperty('ariaHidden', () => this.get('active') > 1))
-		this.first('.plural')
-		    .map(setProperty('ariaHidden', () => this.get('active') === 1))
-		this.first('.remaining')
-			.map(setProperty('ariaHidden', () => !this.get('active')))
-		this.first('.all-done')
-			.map(setProperty('ariaHidden', () => !!this.get('active')))
-    }
+		this.set('active', 0, false)
+		this.first('.count').forEach(setText('active'))
+		this.first('.singular').forEach(setProperty('ariaHidden', () => this.get('active') > 1))
+		this.first('.plural').forEach(setProperty('ariaHidden', () => this.get('active') === 1))
+		this.first('.remaining').forEach(setProperty('ariaHidden', () => !this.get('active')))
+		this.first('.all-done').forEach(setProperty('ariaHidden', () => !!this.get('active')))
+	}
 }
 TodoCount.define('todo-count')
 
@@ -570,73 +566,71 @@ class TodoForm extends UIElement {
 	connectedCallback() {
 		const inputField = this.querySelector('input-field')
 
-        this.first('form')
-			.forEach(on('submit', e => {
-				e.preventDefault()
-				setTimeout(() => {
-					this.dispatchEvent(new CustomEvent('add-todo', {
-						bubbles: true,
-						detail: inputField.get('value')
-					}))
-					inputField.clear()
-				}, 0)
-			}))
-		
-		this.first('input-button')
-			.forEach(pass({
-				disabled: () => inputField.get('empty')
-			}))
+        this.first('form').forEach(on('submit', e => {
+			e.preventDefault()
+			setTimeout(() => {
+				this.dispatchEvent(new CustomEvent('add-todo', {
+					bubbles: true,
+					detail: inputField.get('value')
+				}))
+				inputField.clear()
+			}, 0)
+		}))
+	
+		this.first('input-button').forEach(pass({
+			disabled: () => inputField.get('empty')
+		}))
     }
 }
 TodoForm.define('todo-form')
 
 class TodoList extends UIElement {
-    connectedCallback() {
-        this.set('filter', 'all') // set initial filter
+	connectedCallback() {
+		this.set('filter', 'all') // set initial filter
 		this.#updateList()
 
 		// Event listener and attribute on own element
-        this.self
-            .map(on('click', e => {
-                if (e.target.localName === 'button') this.removeItem(e.target)
-            }))
-            .map(setAttribute('filter'))
-
-        // Update count on each change
-        this.set('count', () => {
-            const tasks = this.get('tasks').map(el => el.signal('checked'))
-            const completed = tasks.filter(fn => fn()).length
-            const total = tasks.length
-            return {
+		this.self
+			.map(on('click', e => {
+				if (e.target.localName === 'button') this.removeItem(e.target)
+			}))
+			.forEach(setAttribute('filter'))
+
+		// Update count on each change
+		this.set('count', () => {
+			const tasks = this.get('tasks').map(el => el.signal('checked'))
+			const completed = tasks.filter(fn => fn()).length
+			const total = tasks.length
+			return {
 				active: total - completed,
 				completed,
 				total
 			}
-        })
-    }
+		})
+	}
 
-    addItem = task => {
-        const template = this.querySelector('template').content.cloneNode(true)
-        template.querySelector('span').textContent = task
-        this.querySelector('ol').appendChild(template)
-        this.#updateList()
-    }
+	addItem = task => {
+		const template = this.querySelector('template').content.cloneNode(true)
+		template.querySelector('span').textContent = task
+		this.querySelector('ol').appendChild(template)
+		this.#updateList()
+	}
 
-    removeItem = element => {
-        element.closest('li').remove()
-        this.#updateList()
-    }
+	removeItem = element => {
+		element.closest('li').remove()
+		this.#updateList()
+	}
 
-    clearCompleted = () => {
-        this.get('tasks')
-            .filter(el => el.get('checked'))
-            .forEach(el => el.parentElement.remove())
-        this.#updateList()
-    }
+	clearCompleted = () => {
+		this.get('tasks')
+			.filter(el => el.get('checked'))
+			.forEach(el => el.parentElement.remove())
+		this.#updateList()
+	}
 
 	#updateList() {
-        this.set('tasks', Array.from(this.querySelectorAll('input-checkbox')))
-    }
+		this.set('tasks', Array.from(this.querySelectorAll('input-checkbox')))
+	}
 
 }
 TodoList.define('todo-list')
diff --git a/docs/best-practices-patterns.html b/docs/best-practices-patterns.html
index 0faba7d..41a4a79 100644
--- a/docs/best-practices-patterns.html
+++ b/docs/best-practices-patterns.html
@@ -125,7 +125,7 @@ <h3>Scope Styles via Custom Element Name</h3>
 					<p class="meta">
 						<span class="language">css</span>
 					</p>
-					<pre><code class="language-css">my-component {
+					<pre class="language-css"><code>my-component {
 	padding: 1rem;
 
 	/* Only divs that are immediate children of my-component will be styled */
@@ -146,7 +146,7 @@ <h3>Customize via Class or CSS Custom Properties</h3>
 					<p class="meta">
 						<span class="language">css</span>
 					</p>
-					<pre><code class="language-css">parent-component {
+					<pre class="language-css"><code>parent-component {
 	--box-bg-color: red;
 	--box-text-color: white;
 }
@@ -178,7 +178,7 @@ <h3>Passing State with pass()</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">class ParentComponent extends UIElement {
+					<pre class="language-js"><code>class ParentComponent extends UIElement {
 	connectedCallback() {
 	this.set('parentColor', 'blue');
 	this.pass('parentColor', 'child-component', 'color');
@@ -194,7 +194,7 @@ <h3>Passing State with pass()</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">class ChildComponent extends UIElement {
+					<pre class="language-js"><code>class ChildComponent extends UIElement {
 	connectedCallback() {
 	this.first('.box').map(setStyle('background-color', 'color'));
 	}
@@ -213,7 +213,7 @@ <h3>Dispatching Custom Events with <code>emit()</code></h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">// In child component
+					<pre class="language-js"><code>// In child component
 this.emit('change', { detail: { value: this.get('value') } });</code></pre>
 				</code-block>
 		  
@@ -223,7 +223,7 @@ <h3>Handling Custom Events in Parent Components</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">// In parent component
+					<pre class="language-js"><code>// In parent component
 this.first('child-component').map(on('change', (event) => {
 	console.log('Received change event:', event.detail.value);
 	// Handle state changes
diff --git a/docs/contributing-development.html b/docs/contributing-development.html
index f3f2189..e8bf409 100644
--- a/docs/contributing-development.html
+++ b/docs/contributing-development.html
@@ -135,16 +135,16 @@ <h2>3. Setting Up the Development Environment</h2>
 				<ol>
 				  <li>
 					<strong>Clone the Repository</strong>: Clone the UIElement repository from GitHub:
-					<pre><code class="language-bash">git clone https://github.com/efflore/ui-element.git</code></pre>
+					<pre class="language-bash"><code>git clone https://github.com/efflore/ui-element.git</code></pre>
 				  </li>
 				  <li>
 					<strong>Install Dependencies</strong>: Navigate to the project directory and install the necessary dependencies using npm:
-					<pre><code class="language-bash">cd ui-element
+					<pre class="language-bash"><code>cd ui-element
 			  npm install</code></pre>
 				  </li>
 				  <li>
 					<strong>Run the Development Server</strong>: Start the development server to work on the code and see live updates:
-					<pre><code class="language-bash">npm start</code></pre>
+					<pre class="language-bash"><code>npm start</code></pre>
 					This will run the build process and serve the project locally.
 				  </li>
 				</ol>
@@ -155,15 +155,15 @@ <h2>4. Testing and Building</h2>
 				<ul>
 				  <li>
 					<strong>Linting</strong>: Run linting to maintain code quality and formatting:
-					<pre><code class="language-bash">npm run lint</code></pre>
+					<pre class="language-bash"><code>npm run lint</code></pre>
 				  </li>
 				  <li>
 					<strong>Unit Testing</strong>: Execute the test suite to ensure everything works correctly:
-					<pre><code class="language-bash">npm test</code></pre>
+					<pre class="language-bash"><code>npm test</code></pre>
 				  </li>
 				  <li>
 					<strong>Building for Production</strong>: When you're ready to build the project for production, run:
-					<pre><code class="language-bash">npm run build</code></pre>
+					<pre class="language-bash"><code>npm run build</code></pre>
 					The production build will be created in the `dist` directory.
 				  </li>
 				</ul>
@@ -173,7 +173,7 @@ <h2>4. Testing and Building</h2>
 				<h2>5. Commit Message Guidelines</h2>
 				<p>
 				  Use conventional commit messages for consistency and clarity. Examples include:
-				  <pre><code class="language-bash">
+				  <pre class="language-bash"><code>
 			  feat: add new feature to the component
 			  fix: resolve issue with context updates
 			  docs: update documentation for new API
diff --git a/docs/core-concepts.html b/docs/core-concepts.html
index dc26941..484cf6c 100644
--- a/docs/core-concepts.html
+++ b/docs/core-concepts.html
@@ -115,7 +115,7 @@ <h3>Extending Web Components</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">class MyComponent extends UIElement {
+					<pre class="language-js"><code>class MyComponent extends UIElement {
 	/* component definition */
 }</code></pre>
 					<input-button class="copy">
@@ -129,7 +129,7 @@ <h3>Defining Custom Elements</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">MyComponent.define('my-component');</code></pre>
+					<pre class="language-js"><code>MyComponent.define('my-component');</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -142,7 +142,7 @@ <h3>Using the Custom Element</h3>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;my-component&gt;Content goes here&lt;/my-component&gt;</code></pre>
+					<pre class="language-html"><code>&lt;my-component&gt;Content goes here&lt;/my-component&gt;</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -176,7 +176,7 @@ <h2>Signals & State Management</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">this.set('count', 0); // Create a signal
+					<pre class="language-js"><code>this.set('count', 0); // Create a signal
 this.set('isEven', () => this.get('count') % 2 === 0); // Create a derived signal</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
@@ -195,7 +195,7 @@ <h2>Attributes & State Initialization</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">static observedAttributes = ['count'];</code></pre>
+					<pre class="language-js"><code>static observedAttributes = ['count'];</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -205,7 +205,7 @@ <h2>Attributes & State Initialization</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">static attributeMap = {
+					<pre class="language-js"><code>static attributeMap = {
 	count: asInteger,
 }</code></pre>
 					<input-button class="copy">
@@ -217,7 +217,7 @@ <h2>Attributes & State Initialization</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-				<pre><code class="language-js">static attributeMap = {
+				<pre class="language-js"><code>static attributeMap = {
 	date: value => value.map(v => new Date(v)),
 }</code></pre>
 					<input-button class="copy">
@@ -234,7 +234,7 @@ <h2>Events & State Changes</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-                    <pre><code class="language-js">this.first('.increment').map(on('click', () => this.set('count', v => ++v)));</code></pre>
+                    <pre class="language-js"><code>this.first('.increment').map(on('click', () => this.set('count', v => ++v)));</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -250,7 +250,7 @@ <h2>Effects & Reactive Bindings</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-                    <pre><code class="language-js">this.first('.count').map(setText('count'));</code></pre>
+                    <pre class="language-js"><code>this.first('.count').map(setText('count'));</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
diff --git a/docs/detailed-walkthrough.html b/docs/detailed-walkthrough.html
index d162833..cb9d471 100644
--- a/docs/detailed-walkthrough.html
+++ b/docs/detailed-walkthrough.html
@@ -116,7 +116,7 @@ <h3>Observed Attributes</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">import { UIElement, asInteger } from '@efflore/ui-element'
+					<pre class="language-js"><code>import { UIElement, asInteger } from '@efflore/ui-element'
 
 class CounterComponent extends UIElement {
 	static observedAttributes = ['count']
@@ -131,7 +131,7 @@ <h3>Observed Attributes</h3>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;counter-component count="5"&gt;&lt;/counter-component&gt;</code></pre>
+					<pre class="language-html"><code>&lt;counter-component count="5"&gt;&lt;/counter-component&gt;</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -153,7 +153,7 @@ <h3>Defaults from DOM in Auto-Effects</h3>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;hello-world&gt;
+					<pre class="language-html"><code>&lt;hello-world&gt;
 	&lt;p&gt;Hello, &lt;span class="name"&gt;World&lt;/span&gt;!&lt;/p&gt;
 &lt;/hello-world&gt;</code></pre>
 					<input-button class="copy">
@@ -164,7 +164,7 @@ <h3>Defaults from DOM in Auto-Effects</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">this.first('.name').map(setText('name'))</code></pre>
+					<pre class="language-js"><code>this.first('.name').map(setText('name'))</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -182,7 +182,7 @@ <h3>Manually Set Signals</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">// Setting a default state
+					<pre class="language-js"><code>// Setting a default state
 this.set('count', 10)
 
 // Setting a derived state
@@ -212,7 +212,7 @@ <h3>this.first(selector)</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">this.first('.count').map(setText('count'))</code></pre>
+					<pre class="language-js"><code>this.first('.count').map(setText('count'))</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -224,7 +224,7 @@ <h3>this.all(selector)</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">this.all('.item').map(toggleClass('active', 'isActive'))</code></pre>
+					<pre class="language-js"><code>this.all('.item').map(toggleClass('active', 'isActive'))</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -246,7 +246,7 @@ <h3>The Power of Array Methods</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">// Example chaining event handler and effect
+					<pre class="language-js"><code>// Example chaining event handler and effect
 this.first('button')
 	.map(on('click', () => this.set('clicked', true)))
 	.map(toggleClass('clicked'))
@@ -271,7 +271,7 @@ <h3>Event Handlers</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">this.first('input').map(on('input', e => this.set('name', e.target.value)))</code></pre>
+					<pre class="language-js"><code>this.first('input').map(on('input', e => this.set('name', e.target.value)))</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -290,7 +290,7 @@ <h3>Resolved Promises</h3>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">fetch('/data')
+					<pre class="language-js"><code>fetch('/data')
 	.then(response => response.json())
 	.then(data => this.set('data', data))</code></pre>
 					<input-button class="copy">
diff --git a/docs/examples-recipes.html b/docs/examples-recipes.html
index e6db935..2b625d9 100644
--- a/docs/examples-recipes.html
+++ b/docs/examples-recipes.html
@@ -215,7 +215,7 @@ <h2>CodeBlock Example</h2>
 								<span class="file">code-block.html</span>
 								<span class="language">html</span>
 							</p>
-							<pre><code class="language-html">&lt;code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"&gt;
+							<pre class="language-html"><code>&lt;code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"&gt;
 	&lt;p class="meta"&gt;
 		&lt;span class="file"&gt;code-block.html&lt;/span&gt;
 		&lt;span class="language"&gt;html&lt;/span&gt;
@@ -265,20 +265,10 @@ <h2>CodeBlock Example</h2>
 				<h2>LazyLoad Example</h2>
 				<component-demo>
 					<div class="preview">
-						<my-slider>
-							<button type="button" class="prev" aria-label="Previous">‹</button>
-							<div class="slides">
-								<div class="slide active">Slide 1</div>
-								<div class="slide">Slide 2</div>
-								<div class="slide">Slide 3</div>
-							</div>
-							<button type="button" class="next" aria-label="Next">›</button>
-							<div class="dots">
-								<span class="active"></span>
-								<span></span>
-								<span></span>
-							</div>
-						</my-slider>
+						<lazy-load src="./examples/snippets/snippet.html">
+							<p class="loading">Loading...</p>
+							<p class="error"></p>
+						</lazy-load>
 					</div>
 					<accordion-panel collapsible>
 						<details>
@@ -378,30 +368,32 @@ <h2>TodoApp Example</h2>
 									</li>
 								</template>
 							</todo-list>
-							<todo-count>
-								<p class="all-done">Well done, all done!</p>
-								<p class="remaining"><span></span> tasks left</p>
-							</todo-count>
-							<input-radiogroup value="all" class="split-button">
-								<fieldset>
-									<legend class="visually-hidden">Filter</legend>
-										<label class="selected">
-											<input type="radio" class="visually-hidden" name="filter" value="all" checked>
-											<span>All</span>
-										</label>
-										<label>
-											<input type="radio" class="visually-hidden" name="filter" value="active">
-											<span>Active</span>
-										</label>
-										<label>
-											<input type="radio" class="visually-hidden" name="filter" value="completed">
-											<span>Completed</span>
-										</label>
-								</fieldset>
-							</input-radiogroup>
-							<input-button class="clear-completed">
-								<button type="button">Clear Completed</button>
-							</input-button>
+							<footer>
+								<todo-count>
+									<p class="all-done">Well done, all done!</p>
+									<p class="remaining"><span></span> tasks left</p>
+								</todo-count>
+								<input-radiogroup value="all" class="split-button">
+									<fieldset>
+										<legend class="visually-hidden">Filter</legend>
+											<label class="selected">
+												<input type="radio" class="visually-hidden" name="filter" value="all" checked>
+												<span>All</span>
+											</label>
+											<label>
+												<input type="radio" class="visually-hidden" name="filter" value="active">
+												<span>Active</span>
+											</label>
+											<label>
+												<input type="radio" class="visually-hidden" name="filter" value="completed">
+												<span>Completed</span>
+											</label>
+									</fieldset>
+								</input-radiogroup>
+								<input-button class="clear-completed">
+									<button type="button">Clear Completed</button>
+								</input-button>
+							</footer>
 						</todo-app>
 					</div>
 					<accordion-panel collapsible>
@@ -504,14 +496,14 @@ <h3>Configuring Breakpoints</h3>
 				<p>
 				  For example, to set a small breakpoint at 40em and a medium breakpoint at 60em, use:
 				</p>
-				<pre><code class="language-html">
+				<pre class="language-html"><code>
 			  &lt;media-context sm="40em" md="60em"&gt;&lt;/media-context&gt;
 				</code></pre>
 			  
 				<!-- Source code collapsible -->
 				<details>
 				  <summary>Source Code</summary>
-				  <pre><code class="language-js">
+				  <pre class="language-js"><code>
 			  import { UIElement, maybe } from '@efflore/ui-element'
 			  
 			  const VIEWPORT_XS = 'xs';
@@ -599,7 +591,7 @@ <h2>ThemedComponent Example</h2>
 					<!-- HTML Tab Panel -->
 					<tab-panel label="HTML">
 					  <h3>HTML</h3>
-					  <pre><code class="language-html">
+					  <pre class="language-html"><code>
 			  &lt;media-context&gt;
 				&lt;themed-component&gt;
 				  This component changes its background based on the theme!
@@ -611,7 +603,7 @@ <h3>HTML</h3>
 					<!-- CSS Tab Panel -->
 					<tab-panel label="CSS">
 					  <h3>CSS</h3>
-					  <pre><code class="language-css">
+					  <pre class="language-css"><code>
 			  themed-component {
 				display: block;
 				padding: 20px;
@@ -632,7 +624,7 @@ <h3>CSS</h3>
 					<!-- JavaScript Tab Panel -->
 					<tab-panel label="JavaScript">
 					  <h3>JavaScript</h3>
-					  <pre><code class="language-js">
+					  <pre class="language-js"><code>
 			  import { UIElement, toggleClass } from '@efflore/ui-element';
 			  
 			  class ThemedComponent extends UIElement {
@@ -673,7 +665,7 @@ <h2>AnimatedComponent Example</h2>
 					<!-- HTML Tab Panel -->
 					<tab-panel label="HTML">
 					  <h3>HTML</h3>
-					  <pre><code class="language-html">
+					  <pre class="language-html"><code>
 			  &lt;media-context&gt;
 				&lt;animated-component&gt;
 				  &lt;div class="animated-box"&gt;Box 1&lt;/div&gt;
@@ -687,7 +679,7 @@ <h3>HTML</h3>
 					<!-- CSS Tab Panel -->
 					<tab-panel label="CSS">
 					  <h3>CSS</h3>
-					  <pre><code class="language-css">
+					  <pre class="language-css"><code>
 			  animated-component {
 				display: block;
 				padding: 20px;
@@ -730,7 +722,7 @@ <h3>CSS</h3>
 					<!-- JavaScript Tab Panel -->
 					<tab-panel label="JavaScript">
 					  <h3>JavaScript</h3>
-					  <pre><code class="language-js">
+					  <pre class="language-js"><code>
 			  import { UIElement, toggleClass } from '@efflore/ui-element';
 			  
 			  class AnimatedComponent extends UIElement {
@@ -784,7 +776,7 @@ <h2>Responsive TabList Example</h2>
 					<!-- HTML Tab Panel -->
 					<tab-panel label="HTML">
 					  <h3>HTML</h3>
-					  <pre><code class="language-html">
+					  <pre class="language-html"><code>
 			  &lt;media-context&gt;
 				&lt;tab-list&gt;
 				  &lt;button class="tab-button"&gt;Tab 1&lt;/button&gt;
@@ -811,7 +803,7 @@ <h3>HTML</h3>
 					<!-- CSS Tab Panel -->
 					<tab-panel label="CSS">
 					  <h3>CSS</h3>
-					  <pre><code class="language-css">
+					  <pre class="language-css"><code>
 			  tab-list {
 				display: flex;
 				flex-direction: column;
@@ -873,7 +865,7 @@ <h3>CSS</h3>
 					<!-- JavaScript Tab Panel -->
 					<tab-panel label="JavaScript">
 					  <h3>JavaScript</h3>
-					  <pre><code class="language-js">
+					  <pre class="language-js"><code>
 			  import { UIElement, on, pass, toggleClass } from '@efflore/ui-element';
 			  
 			  // TabList Component
@@ -957,7 +949,7 @@ <h2>Responsive Image Gallery Example</h2>
 					<!-- HTML Tab Panel -->
 					<tab-panel label="HTML">
 					  <h3>HTML</h3>
-					  <pre><code class="language-html">
+					  <pre class="language-html"><code>
 			  &lt;media-context&gt;
 				&lt;responsive-image-gallery&gt;
 				  &lt;img src="image1.jpg" alt="Image 1"&gt;
@@ -973,7 +965,7 @@ <h3>HTML</h3>
 					<!-- CSS Tab Panel -->
 					<tab-panel label="CSS">
 					  <h3>CSS</h3>
-					  <pre><code class="language-css">
+					  <pre class="language-css"><code>
 			  responsive-image-gallery {
 				display: flex;
 				flex-wrap: wrap;
@@ -1011,7 +1003,7 @@ <h3>CSS</h3>
 					<!-- JavaScript Tab Panel -->
 					<tab-panel label="JavaScript">
 					  <h3>JavaScript</h3>
-					  <pre><code class="language-js">
+					  <pre class="language-js"><code>
 			  import { UIElement, toggleClass, effect } from '@efflore/ui-element';
 			  import { MySlider } from './my-slider.js'; // Assume this is the existing MySlider component
 			  
diff --git a/docs/examples/accordion-panel.html b/docs/examples/accordion-panel.html
index 5e50701..ef699a4 100644
--- a/docs/examples/accordion-panel.html
+++ b/docs/examples/accordion-panel.html
@@ -14,7 +14,7 @@
 					<span class="file">accordion-panel.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;accordion-panel&gt;
+				<pre class="language-html"><code>&lt;accordion-panel&gt;
 	&lt;details open aria-disabled="true"&gt;
 		&lt;summary class="visually-hidden"&gt;
 			&lt;div class="summary"&gt;Tab 1&lt;/div&gt;
@@ -54,7 +54,7 @@
 					<span class="file">accordion-panel.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">accordion-panel {
+				<pre class="language-css"><code>accordion-panel {
 	display: block;
 
 	> details {
@@ -115,7 +115,7 @@
 					<span class="file">accordion-panel.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, on, setProperty, toggleAttribute } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, setProperty, toggleAttribute } from '@efflore/ui-element'
 
 class AccordionPanel extends UIElement {
 	connectedCallback() {
diff --git a/docs/examples/code-block.html b/docs/examples/code-block.html
index 01dc5f7..fdb25d1 100644
--- a/docs/examples/code-block.html
+++ b/docs/examples/code-block.html
@@ -14,7 +14,7 @@
 					<span class="file">code-block.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"&gt;
+				<pre class="language-html"><code>&lt;code-block collapsed language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"&gt;
 	&lt;p class="meta"&gt;
 		&lt;span class="file"&gt;code-block.html&lt;/span&gt;
 		&lt;span class="language"&gt;html&lt;/span&gt;
@@ -51,7 +51,7 @@
 					<span class="file">code-block.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">code-block {
+				<pre class="language-css"><code>code-block {
 	position: relative;
 	display: block;
 	margin: 0 0 var(--space-l);
@@ -154,7 +154,7 @@
 					<span class="file">code-block.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asBoolean, on, effect, toggleAttribute } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, asBoolean, on, effect, toggleAttribute } from '@efflore/ui-element'
 import Prism from 'prismjs'
 
 class CodeBlock extends UIElement {
diff --git a/docs/examples/input-button.html b/docs/examples/input-button.html
index 9910585..346e145 100644
--- a/docs/examples/input-button.html
+++ b/docs/examples/input-button.html
@@ -14,7 +14,7 @@
 					<span class="file">input-button.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;input-button&gt;
+				<pre class="language-html"><code>&lt;input-button&gt;
 	&lt;button type="button"&gt;Button&lt;/button&gt;
 &lt;/input-button&gt;
 
@@ -37,7 +37,7 @@
 					<span class="file">input-button.html.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">input-button {
+				<pre class="language-css"><code>input-button {
 	display: inline-block;
 	flex: 0;
 
@@ -51,6 +51,7 @@
 		padding: 0 var(--space-s);
 		font-size: var(--font-size-s);
 		line-height: var(--line-height-s);
+		white-space: nowrap;
 		opacity: var(--opacity-dimmed);
 		transition: all var(--transition-shorter) var(--easing-inout);
 
@@ -154,7 +155,7 @@
 					<span class="file">input-button.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asBoolean, setText, setProperty } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, asBoolean, setText, setProperty } from '@efflore/ui-element'
 
 class InputButton extends UIElement {
 	static observedAttributes = ['disabled']
diff --git a/docs/examples/input-checkbox.html b/docs/examples/input-checkbox.html
index 19b48e0..dd6c396 100644
--- a/docs/examples/input-checkbox.html
+++ b/docs/examples/input-checkbox.html
@@ -14,7 +14,7 @@
 					<span class="file">input-checkbox.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;input-checkbox&gt;
+				<pre class="language-html"><code>&lt;input-checkbox&gt;
 	&lt;label&gt;
 		&lt;input type="checkbox"&gt;
 		&lt;span &gt;Checkbox&lt;/span&gt;
@@ -43,7 +43,7 @@
 					<span class="file">input-checkbox.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">input-checkbox {
+				<pre class="language-css"><code>input-checkbox {
 	flex-grow: 1;
 
 	& label {
@@ -119,7 +119,7 @@
 					<span class="file">input-checkbox.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asBoolean, on, setProperty, toggleAttribute } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, asBoolean, on, setProperty, toggleAttribute } from '@efflore/ui-element'
 
 class InputCheckbox extends UIElement {
 	static observedAttributes = ['checked']
diff --git a/docs/examples/input-field.html b/docs/examples/input-field.html
index 7af2c6f..b9546cb 100644
--- a/docs/examples/input-field.html
+++ b/docs/examples/input-field.html
@@ -14,7 +14,7 @@
 					<span class="file">input-field.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;input-field&gt;
+				<pre class="language-html"><code>&lt;input-field&gt;
 	&lt;label for="name-input"&gt;Name&lt;/label&gt;
 	&lt;div class="row"&gt;
 		&lt;div class="group auto"&gt;
@@ -65,7 +65,7 @@
 					<span class="file">input-field.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">input-field {
+				<pre class="language-css"><code>input-field {
 	width: 100%;
 
 	&[value="0"] input {
@@ -276,7 +276,7 @@
 					<span class="file">input-field.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, effect, maybe, on, setText, setProperty, setAttribute, toggleClass } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, effect, maybe, on, setText, setProperty, setAttribute, toggleClass } from '@efflore/ui-element'
 
 const isNumber = num => typeof num === 'number'
 const parseNumber = (v, int = false) => int ? parseInt(v, 10) : parseFloat(v)
diff --git a/docs/examples/input-radiogroup.html b/docs/examples/input-radiogroup.html
index 3667e82..5977f74 100644
--- a/docs/examples/input-radiogroup.html
+++ b/docs/examples/input-radiogroup.html
@@ -14,7 +14,7 @@
 					<span class="file">input-radiogroup.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;input-radiogroup value="other"&gt;
+				<pre class="language-html"><code>&lt;input-radiogroup value="other"&gt;
 	&lt;fieldset&gt;
 		&lt;legend&gt;Gender&lt;/legend&gt;
 			&lt;label&gt;
@@ -65,7 +65,7 @@
 					<span class="file">input-radiogroup.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">input-radiogroup {
+				<pre class="language-css"><code>input-radiogroup {
 	display: inline-block;
 
 	> fieldset {
@@ -153,7 +153,7 @@
 					<span class="file">input-radiogroup.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, on, setAttribute, toggleClass } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, setAttribute, toggleClass } from '@efflore/ui-element'
 
 export class InputRadiogroup extends UIElement {
 	static observedAttributes = ['value']
diff --git a/docs/examples/lazy-load.html b/docs/examples/lazy-load.html
index d25c2e4..66642d4 100644
--- a/docs/examples/lazy-load.html
+++ b/docs/examples/lazy-load.html
@@ -11,53 +11,13 @@
 			</summary>
 			<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">lazy-load.html.html</span>
+					<span class="file">lazy-load.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;lazy-load.html count="42"&gt;
-	&lt;p&gt;
-		Count: &lt;span class="count"&gt;&lt;/span&gt;
-		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
-	&lt;/p&gt;
-	&lt;button id="increment"&gt;+&lt;/button&gt;
-	&lt;button id="decrement"&gt;−&lt;/button&gt;
-&lt;/lazy-load.html&gt;</code></pre>
-				<input-button class="copy">
-					<button type="button" class="secondary small">Copy</button>
-				</input-button>
-			</code-block>
-		</details>
-	</accordion-panel>
-	<accordion-panel>
-		<details aria-disabled="true">
-			<summary class="visually-hidden">
-				<div class="summary">CSS</div>
-			</summary>
-			<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
-				<p class="meta">
-					<span class="file">lazy-load.html.css</span>
-					<span class="language">css</span>
-				</p>
-				<pre><code class="language-css">lazy-load.html {
-	display: flex;
-	gap: 0.5rem;
-	margin-block: 1rem;
-
-	p {
-		display: inline-block;
-		margin: 0;
-		flex: 1;
-	}
-
-	span {
-		margin-right: 0.5rem;
-	}
-
-	button {
-		padding: 0.25rem 0.5rem;
-		flex: 0;
-	}
-}</code></pre>
+				<pre class="language-html"><code>&lt;lazy-load src="./examples/snippets/snippet.html"&gt;
+	&lt;p class="loading"&gt;Loading...&lt;/p&gt;
+	&lt;p class="error"&gt;&lt;/p&gt;
+&lt;/lazy-load&gt;</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
@@ -71,26 +31,68 @@
 			</summary>
 			<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">lazy-load.html.js</span>
+					<span class="file">lazy-load.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, setText, setProperty, effect } from '@efflore/ui-element';
 
-class MyCounter extends UIElement {
-	static observedAttributes = ['count']
+class LazyLoad extends UIElement {
+	static observedAttributes = ['src']
 	static attributeMap = {
-		count: asInteger
+		src: v => v.map(src => {
+				let url = ''
+				try {
+					url = new URL(src, location.href) // ensure 'src' attribute is a valid URL
+					if (url.origin !== location.origin) { // sanity check for cross-origin URLs
+						throw new TypeError('Invalid URL origin')
+					}
+				} catch (error) {
+					console.error(error, url)
+					url = ''
+				}
+				return url.toString()
+			})
 	}
 
 	connectedCallback() {
-		this.set('parity', () => this.get('count') % 2 ? 'odd' : 'even')
-		this.first('.increment').map(on('click', () => this.set('count', v => ++v)))
-		this.first('.decrement').map(on('click', () => this.set('count', v => --v)))
-		this.first('.count').map(setText('count'))
-		this.first('.parity').map(setText('parity'))
+
+		// Show / hide loading message
+		this.first('.loading')
+			.forEach(setProperty('ariaHidden', () => !!this.get('error')))
+
+		// Set and show / hide error message
+		this.first('.error')
+			.map(setText('error'))
+			.forEach(setProperty('ariaHidden', () => !this.get('error')))
+
+		// Load content from provided URL
+		effect(enqueue => {
+			const src = this.get('src')
+			if (!src) return // silently fail if no valid URL is provided
+			fetch(src)
+				.then(async response => {
+					if (response.ok) {
+						const content = await response.text()
+						enqueue(this.root, 'h', el => () => {
+							// UNSAFE!, use only trusted sources in 'src' attribute
+							el.innerHTML = content
+							el.querySelectorAll('script').forEach(script => {
+								const newScript = document.createElement('script')
+								newScript.appendChild(document.createTextNode(script.textContent))
+								el.appendChild(newScript)
+								script.remove()
+							})
+						})
+						this.set('error', '')
+					} else {
+						this.set('error', response.status + ':'+ response.statusText)
+					}
+				})
+				.catch(error => this.set('error', error))
+		})
 	}
 }
-MyCounter.define('lazy-load.html')</code></pre>
+LazyLoad.define('lazy-load')</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
diff --git a/docs/examples/media-provider.html b/docs/examples/media-provider.html
index 4feceab..3ba02fe 100644
--- a/docs/examples/media-provider.html
+++ b/docs/examples/media-provider.html
@@ -11,10 +11,10 @@
 			</summary>
 			<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">media-provider.html.html</span>
+					<span class="file">media-provider.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;media-provider.html count="42"&gt;
+				<pre class="language-html"><code>&lt;media-provider count="42"&gt;
 	&lt;p&gt;
 		Count: &lt;span class="count"&gt;&lt;/span&gt;
 		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
@@ -35,10 +35,10 @@
 			</summary>
 			<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">media-provider.html.css</span>
+					<span class="file">media-provider.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">media-provider.html {
+				<pre class="language-css"><code>media-provider {
 	display: flex;
 	gap: 0.5rem;
 	margin-block: 1rem;
@@ -71,10 +71,10 @@
 			</summary>
 			<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">media-provider.html.js</span>
+					<span class="file">media-provider.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
 
 class MyCounter extends UIElement {
 	static observedAttributes = ['count']
@@ -90,7 +90,7 @@
 		this.first('.parity').map(setText('parity'))
 	}
 }
-MyCounter.define('media-provider.html')</code></pre>
+MyCounter.define('media-provider')</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
diff --git a/docs/examples/my-counter.html b/docs/examples/my-counter.html
index dbe1930..214c15b 100644
--- a/docs/examples/my-counter.html
+++ b/docs/examples/my-counter.html
@@ -14,7 +14,7 @@
 					<span class="file">my-counter.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;my-counter count="42"&gt;
+				<pre class="language-html"><code>&lt;my-counter count="42"&gt;
 	&lt;p&gt;
 		Count: &lt;span class="count"&gt;&lt;/span&gt;
 		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
@@ -38,7 +38,7 @@
 					<span class="file">my-counter.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">my-counter {
+				<pre class="language-css"><code>my-counter {
 	display: flex;
 	gap: 0.5rem;
 	margin-block: 1rem;
@@ -74,7 +74,7 @@
 					<span class="file">my-counter.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
 
 class MyCounter extends UIElement {
 	static observedAttributes = ['count']
diff --git a/docs/examples/my-slider.html b/docs/examples/my-slider.html
index 8586ff4..5ce8127 100644
--- a/docs/examples/my-slider.html
+++ b/docs/examples/my-slider.html
@@ -14,7 +14,7 @@
 					<span class="file">my-slider.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;my-slider&gt;
+				<pre class="language-html"><code>&lt;my-slider&gt;
 	&lt;button type="button" class="prev" aria-label="Previous"&gt;‹&lt;/button&gt;
 	&lt;div class="slides"&gt;
 		&lt;div class="slide active"&gt;Slide 1&lt;/div&gt;
@@ -44,7 +44,7 @@
 					<span class="file">my-slider.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">my-slider {
+				<pre class="language-css"><code>my-slider {
 	display: flex;
 	overflow: hidden;
 	aspect-ratio: 16 / 9;
@@ -131,7 +131,7 @@
 					<span class="file">my-slider.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, on, toggleClass } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, toggleClass } from '@efflore/ui-element'
 
 class MySlider extends UIElement {
 	connectedCallback() {
diff --git a/docs/examples/snippets/snippet.html b/docs/examples/snippets/snippet.html
new file mode 100644
index 0000000..6558ce8
--- /dev/null
+++ b/docs/examples/snippets/snippet.html
@@ -0,0 +1,53 @@
+<h2>Lazy Loaded</h2>
+<p>I come from the server and I bring an additional web component:</p>
+<style>
+  	shake-hands {
+		display: inline-block;
+
+		& button {
+			display: flex;
+			flex-direction: row;
+			gap: var(--space-s);
+			border: 1px solid var(--color-crimson-50);
+			border-radius: var(--space-xs);
+			background-color: var(--color-crimson-20);
+			color: var(--color-text);
+			padding: var(--space-xs) var(--space-s);
+			cursor: pointer;
+			font-size: var(--font-size-m);
+			line-height: var(--line-height-xs);
+			transition: transform var(--transition-short) var(--easing-inout);
+
+			&:hover {
+				background-color: var(--color-crimson-30);
+			}
+
+			&:active {
+				background-color: var(--color-crimson-40);
+
+				.emoji {
+				transform: scale(1.1);
+				}
+			}
+		}
+  	}
+</style>
+<shake-hands aria-label="shake hands">
+	<button type="button">
+		<span class="emoji">🫱🏼‍🫲🏾</span>
+		<span class="count">42</span>
+	</button>
+</shake-hands>
+<script>
+  	customElements.get('shake-hands') || customElements.define('shake-hands', class extends HTMLElement {
+		connectedCallback() {
+			const countEl = this.querySelector('.count')
+			let count = parseInt(countEl.textContent, 10)
+			
+			this.querySelector('button').onclick = () => {
+				count++
+				countEl.textContent = count
+			}
+		}
+  	})
+</script>
\ No newline at end of file
diff --git a/docs/examples/tab-list.html b/docs/examples/tab-list.html
index 632a9e9..6a3e35d 100644
--- a/docs/examples/tab-list.html
+++ b/docs/examples/tab-list.html
@@ -14,7 +14,7 @@
 					<span class="file">tab-list.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;tab-list&gt;
+				<pre class="language-html"><code>&lt;tab-list&gt;
 	&lt;menu&gt;
 		&lt;li&gt;&lt;button type="button" aria-pressed="true"&gt;Tab 1&lt;/button&gt;&lt;/li&gt;
 		&lt;li&gt;&lt;button type="button"&gt;Tab 2&lt;/button&gt;&lt;/li&gt;
@@ -38,7 +38,7 @@
 					<span class="file">tab-list.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">tab-list {
+				<pre class="language-css"><code>tab-list {
 	display: block;
 	margin-bottom: var(--space-l);
 
@@ -89,7 +89,7 @@
 					<span class="file">tab-list.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, on, pass, setProperty, toggleAttribute } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, pass, setProperty, toggleAttribute } from '@efflore/ui-element'
 
 class TabList extends UIElement {
 	static observedAttributes = ['accordion']
diff --git a/docs/examples/todo-app.html b/docs/examples/todo-app.html
index f9d3928..f88f68d 100644
--- a/docs/examples/todo-app.html
+++ b/docs/examples/todo-app.html
@@ -11,17 +11,68 @@
 			</summary>
 			<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-app.html.html</span>
+					<span class="file">todo-app.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;todo-app.html count="42"&gt;
-	&lt;p&gt;
-		Count: &lt;span class="count"&gt;&lt;/span&gt;
-		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
-	&lt;/p&gt;
-	&lt;button id="increment"&gt;+&lt;/button&gt;
-	&lt;button id="decrement"&gt;−&lt;/button&gt;
-&lt;/todo-app.html&gt;</code></pre>
+				<pre class="language-html"><code>&lt;&lt;todo-app&gt;
+	&lt;todo-form&gt;
+		&lt;form action="#"&gt;
+			&lt;input-field&gt;
+				&lt;label for="add-todo"&gt;What needs to be done?&lt;/label&gt;
+				&lt;div class="row"&gt;
+					&lt;div class="group auto"&gt;
+						&lt;input id="add-todo" type="text" value="" required&gt;
+					&lt;/div&gt;
+				&lt;/div&gt;
+			&lt;/input-field&gt;
+			&lt;input-button class="submit"&gt;
+				&lt;button type="submit" class="primary" disabled&gt;Add Todo&lt;/button&gt;
+			&lt;/input-button&gt;
+		&lt;/form&gt;
+	&lt;/todo-form&gt;
+	&lt;todo-list filter="all"&gt;
+		&lt;ol&gt;&lt;/ol&gt;
+		&lt;template&gt;
+			&lt;li&gt;
+				&lt;input-checkbox class="todo"&gt;
+					&lt;label&gt;
+						&lt;input type="checkbox" class="visually-hidden" /&gt;
+						&lt;span&gt;&lt;/span&gt;
+					&lt;/label&gt;
+				&lt;/input-checkbox&gt;
+				&lt;input-button&gt;
+					&lt;button type="button"&gt;Delete&lt;/button&gt;
+				&lt;/input-button&gt;
+			&lt;/li&gt;
+		&lt;/template&gt;
+	&lt;/todo-list&gt;
+	&lt;footer&gt;
+		&lt;todo-count&gt;
+			&lt;p class="all-done"&gt;Well done, all done!&lt;/p&gt;
+			&lt;p class="remaining"&gt;&lt;span&gt;&lt;/span&gt; tasks left&lt;/p&gt;
+		&lt;/todo-count&gt;
+		&lt;input-radiogroup value="all" class="split-button"&gt;
+			&lt;fieldset&gt;
+				&lt;legend class="visually-hidden"&gt;Filter&lt;/legend&gt;
+					&lt;label class="selected"&gt;
+						&lt;input type="radio" class="visually-hidden" name="filter" value="all" checked&gt;
+						&lt;span&gt;All&lt;/span&gt;
+					&lt;/label&gt;
+					&lt;label&gt;
+						&lt;input type="radio" class="visually-hidden" name="filter" value="active"&gt;
+						&lt;span&gt;Active&lt;/span&gt;
+					&lt;/label&gt;
+					&lt;label&gt;
+						&lt;input type="radio" class="visually-hidden" name="filter" value="completed"&gt;
+						&lt;span&gt;Completed&lt;/span&gt;
+					&lt;/label&gt;
+			&lt;/fieldset&gt;
+		&lt;/input-radiogroup&gt;
+		&lt;input-button class="clear-completed"&gt;
+			&lt;button type="button"&gt;Clear Completed&lt;/button&gt;
+		&lt;/input-button&gt;
+	&lt;/footer&gt;
+&lt;/todo-app&gt;</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
@@ -35,27 +86,33 @@
 			</summary>
 			<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-app.html.css</span>
+					<span class="file">todo-app.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">todo-app.html {
+				<pre class="language-css"><code>todo-app {
 	display: flex;
-	gap: 0.5rem;
-	margin-block: 1rem;
+	flex-direction: column;
+	gap: var(--space-l);
 
-	p {
-		display: inline-block;
+	& footer {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		align-items: center;
+		gap: var(--space-m);
 		margin: 0;
-		flex: 1;
-	}
-
-	span {
-		margin-right: 0.5rem;
+	
+		.clear-completed {
+			justify-self: end;
+		}
 	}
+}
 
-	button {
-		padding: 0.25rem 0.5rem;
-		flex: 0;
+todo-count {
+	justify-self: start;
+	
+	& p {
+		font-size: var(--font-size-s);
+		margin: 0;
 	}
 }</code></pre>
 				<input-button class="copy">
@@ -71,26 +128,48 @@
 			</summary>
 			<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-app.html.js</span>
+					<span class="file">todo-app.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, pass, setText, setProperty } from '@efflore/ui-element'
 
-class MyCounter extends UIElement {
-	static observedAttributes = ['count']
-	static attributeMap = {
-		count: asInteger
+class TodoApp extends UIElement {
+	connectedCallback() {
+		const [todoList, todoFilter] = ['todo-list', 'input-radiogroup']
+			.map(selector => this.querySelector(selector))
+
+		// Event listener on own element
+		this.self.forEach(on('add-todo', e => todoList?.addItem(e.detail)))
+		
+		// Coordinate todo-count
+		this.first('todo-count').forEach(pass({
+			active: () => todoList?.get('count').active
+		}))
+
+		// Coordinate todo-list
+		this.first('todo-list').forEach(pass({
+			filter: () => todoFilter?.get('value')
+		}))
+
+		// Coordinate .clear-completed button
+		this.first('.clear-completed')
+			.map(on('click', () => todoList?.clearCompleted()))
+			.forEach(pass({ disabled: () => !todoList?.get('count').completed }))
 	}
+}
+TodoApp.define('todo-app')
 
+class TodoCount extends UIElement {
 	connectedCallback() {
-		this.set('parity', () => this.get('count') % 2 ? 'odd' : 'even')
-		this.first('.increment').map(on('click', () => this.set('count', v => ++v)))
-		this.first('.decrement').map(on('click', () => this.set('count', v => --v)))
-		this.first('.count').map(setText('count'))
-		this.first('.parity').map(setText('parity'))
+		this.set('active', 0, false)
+		this.first('.count').forEach(setText('active'))
+		this.first('.singular').forEach(setProperty('ariaHidden', () => this.get('active') > 1))
+		this.first('.plural').forEach(setProperty('ariaHidden', () => this.get('active') === 1))
+		this.first('.remaining').forEach(setProperty('ariaHidden', () => !this.get('active')))
+		this.first('.all-done').forEach(setProperty('ariaHidden', () => !!this.get('active')))
 	}
 }
-MyCounter.define('todo-app.html')</code></pre>
+TodoCount.define('todo-count')</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
diff --git a/docs/examples/todo-form.html b/docs/examples/todo-form.html
index 99cd774..8bd0534 100644
--- a/docs/examples/todo-form.html
+++ b/docs/examples/todo-form.html
@@ -11,17 +11,24 @@
 			</summary>
 			<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-form.html.html</span>
+					<span class="file">todo-form.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;todo-form.html count="42"&gt;
-	&lt;p&gt;
-		Count: &lt;span class="count"&gt;&lt;/span&gt;
-		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
-	&lt;/p&gt;
-	&lt;button id="increment"&gt;+&lt;/button&gt;
-	&lt;button id="decrement"&gt;−&lt;/button&gt;
-&lt;/todo-form.html&gt;</code></pre>
+				<pre class="language-html"><code>&lt;todo-form&gt;
+	&lt;form action="#"&gt;
+		&lt;input-field&gt;
+			&lt;label for="add-todo"&gt;What needs to be done?&lt;/label&gt;
+			&lt;div class="row"&gt;
+				&lt;div class="group auto"&gt;
+					&lt;input id="add-todo" type="text" value="" required&gt;
+				&lt;/div&gt;
+			&lt;/div&gt;
+		&lt;/input-field&gt;
+		&lt;input-button class="submit"&gt;
+			&lt;button type="submit" class="primary" disabled&gt;Add Todo&lt;/button&gt;
+		&lt;/input-button&gt;
+	&lt;/form&gt;
+&lt;/todo-form&gt;</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
@@ -35,10 +42,10 @@
 			</summary>
 			<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-form.html.css</span>
+					<span class="file">todo-form.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">todo-form.html {
+				<pre class="language-css"><code>todo-form.html {
 	display: flex;
 	gap: 0.5rem;
 	margin-block: 1rem;
@@ -71,26 +78,32 @@
 			</summary>
 			<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">todo-form.html.js</span>
+					<span class="file">todo-form.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
-
-class MyCounter extends UIElement {
-	static observedAttributes = ['count']
-	static attributeMap = {
-		count: asInteger
-	}
+				<pre class="language-js"><code>import { UIElement, on, pass } from '@efflore/ui-element'
 
+class TodoForm extends UIElement {
 	connectedCallback() {
-		this.set('parity', () => this.get('count') % 2 ? 'odd' : 'even')
-		this.first('.increment').map(on('click', () => this.set('count', v => ++v)))
-		this.first('.decrement').map(on('click', () => this.set('count', v => --v)))
-		this.first('.count').map(setText('count'))
-		this.first('.parity').map(setText('parity'))
+		const inputField = this.querySelector('input-field')
+
+		this.first('form').forEach(on('submit', e => {
+			e.preventDefault()
+			setTimeout(() => {
+				this.dispatchEvent(new CustomEvent('add-todo', {
+					bubbles: true,
+					detail: inputField.get('value')
+				}))
+				inputField.clear()
+			}, 0)
+		}))
+		
+		this.first('input-button').forEach(pass({
+			disabled: () => inputField.get('empty')
+		}))
 	}
 }
-MyCounter.define('todo-form.html')</code></pre>
+TodoForm.define('todo-form')</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
diff --git a/docs/examples/todo-list.html b/docs/examples/todo-list.html
index 159c5d0..9b24512 100644
--- a/docs/examples/todo-list.html
+++ b/docs/examples/todo-list.html
@@ -11,17 +11,25 @@
 			</summary>
 			<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">my-counter.html</span>
+					<span class="file">todo-list.html</span>
 					<span class="language">html</span>
 				</p>
-				<pre><code class="language-html">&lt;my-counter count="42"&gt;
-	&lt;p&gt;
-		Count: &lt;span class="count"&gt;&lt;/span&gt;
-		Parity: &lt;span class="parity"&gt;&lt;/span&gt;
-	&lt;/p&gt;
-	&lt;button id="increment"&gt;+&lt;/button&gt;
-	&lt;button id="decrement"&gt;−&lt;/button&gt;
-&lt;/my-counter&gt;</code></pre>
+				<pre class="language-html"><code>&lt;todo-list filter="all"&gt;
+	&lt;ol&gt;&lt;/ol&gt;
+	&lt;template&gt;
+		&lt;li&gt;
+			&lt;input-checkbox class="todo"&gt;
+				&lt;label&gt;
+					&lt;input type="checkbox" class="visually-hidden" /&gt;
+					&lt;span&gt;&lt;/span&gt;
+				&lt;/label&gt;
+			&lt;/input-checkbox&gt;
+			&lt;input-button&gt;
+				&lt;button type="button"&gt;Delete&lt;/button&gt;
+			&lt;/input-button&gt;
+		&lt;/li&gt;
+	&lt;/template&gt;
+&lt;/todo-list&gt;</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
@@ -35,27 +43,39 @@
 			</summary>
 			<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">my-counter.css</span>
+					<span class="file">todo-list.css</span>
 					<span class="language">css</span>
 				</p>
-				<pre><code class="language-css">my-counter {
-	display: flex;
-	gap: 0.5rem;
-	margin-block: 1rem;
+				<pre class="language-css"><code>todo-list {
+	display: block;
 
-	p {
-		display: inline-block;
+	& ol {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-m);
+		list-style: none;
 		margin: 0;
-		flex: 1;
+		padding: 0;
 	}
 
-	span {
-		margin-right: 0.5rem;
+	& li {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--space-m);
+		margin: 0;
+		padding: 0;
+	}
+
+	&[filter="completed"] {
+		li:not(:has([checked])) {
+			display: none;
+		}
 	}
 
-	button {
-		padding: 0.25rem 0.5rem;
-		flex: 0;
+	&[filter="active"] {
+		li:has([checked]) {
+			display: none;
+		}
 	}
 }</code></pre>
 				<input-button class="copy">
@@ -71,26 +91,61 @@
 			</summary>
 			<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
 				<p class="meta">
-					<span class="file">my-counter.js</span>
+					<span class="file">todo-list.js</span>
 					<span class="language">js</span>
 				</p>
-				<pre><code class="language-js">import { UIElement, asInteger, on, setText } from '@efflore/ui-element'
+				<pre class="language-js"><code>import { UIElement, on, setAttribute } from '@efflore/ui-element'
 
-class MyCounter extends UIElement {
-	static observedAttributes = ['count']
-	static attributeMap = {
-		count: asInteger
+class TodoList extends UIElement {
+	connectedCallback() {
+		this.set('filter', 'all') // set initial filter
+		this.#updateList()
+
+		// Event listener and attribute on own element
+		this.self
+			.map(on('click', e => {
+				if (e.target.localName === 'button') this.removeItem(e.target)
+			}))
+			.forEach(setAttribute('filter'))
+
+		// Update count on each change
+		this.set('count', () => {
+			const tasks = this.get('tasks').map(el => el.signal('checked'))
+			const completed = tasks.filter(fn => fn()).length
+			const total = tasks.length
+			return {
+				active: total - completed,
+				completed,
+				total
+			}
+		})
 	}
 
-	connectedCallback() {
-		this.set('parity', () => this.get('count') % 2 ? 'odd' : 'even')
-		this.first('.increment').map(on('click', () => this.set('count', v => ++v)))
-		this.first('.decrement').map(on('click', () => this.set('count', v => --v)))
-		this.first('.count').map(setText('count'))
-		this.first('.parity').map(setText('parity'))
+	addItem = task => {
+		const template = this.querySelector('template').content.cloneNode(true)
+		template.querySelector('span').textContent = task
+		this.querySelector('ol').appendChild(template)
+		this.#updateList()
 	}
+
+	removeItem = element => {
+		element.closest('li').remove()
+		this.#updateList()
+	}
+
+	clearCompleted = () => {
+		this.get('tasks')
+			.filter(el => el.get('checked'))
+			.forEach(el => el.parentElement.remove())
+		this.#updateList()
+	}
+
+	#updateList() {
+		this.set('tasks', Array.from(this.querySelectorAll('input-checkbox')))
+	}
+
 }
-MyCounter.define('my-counter')</code></pre>
+TodoList.define('todo-list')</code></pre>
 				<input-button class="copy">
 					<button type="button" class="secondary small">Copy</button>
 				</input-button>
diff --git a/docs/index.html b/docs/index.html
index 130a785..99423fa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -148,7 +148,7 @@ <h2>How UIElement Works</h2>
 				<p>UIElement relies on signals—small pieces of reactive state that notify your components when changes occur. This allows for efficient updates to HTML content, handling reactivity only when necessary.</p>
 				<p><strong>Signals & Auto-Effects:</strong> Signals automatically trigger updates to the DOM when they change.</p>
 				<code-block language="js">
-					<pre><code class="language-js">this.set('count', 0) // Define a signal for 'count'
+					<pre class="language-js"><code>this.set('count', 0) // Define a signal for 'count'
 this.first('.count').forEach(setText('count')) // Automatically update content when 'count' changes</code></pre>
 				</code-block>
 			</section>
diff --git a/docs/installation-setup.html b/docs/installation-setup.html
index e648e5f..e841bc4 100644
--- a/docs/installation-setup.html
+++ b/docs/installation-setup.html
@@ -113,7 +113,7 @@ <h2>Using a CDN</h2>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js"&gt;&lt;/script&gt;</code></pre>
+					<pre class="language-html"><code>&lt;script src="https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js"&gt;&lt;/script&gt;</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -123,7 +123,7 @@ <h2>Using a CDN</h2>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;script type="module"&gt;
+					<pre class="language-html"><code>&lt;script type="module"&gt;
 	import { UIElement } from 'https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js'
 
 	// Your code here
@@ -147,7 +147,7 @@ <h2>Installing with NPM</h2>
 					<p class="meta">
 						<span class="language">bash</span>
 					</p>
-					<pre><code class="language-bash">npm install @efflore/ui-element</code></pre>
+					<pre class="language-bash"><code>npm install @efflore/ui-element</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -157,7 +157,7 @@ <h2>Installing with NPM</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">import { UIElement } from '@efflore/ui-element'</code></pre>
+					<pre class="language-js"><code>import { UIElement } from '@efflore/ui-element'</code></pre>
 					<input-button class="copy">
 						<button type="button" class="secondary small">Copy</button>
 					</input-button>
@@ -172,7 +172,7 @@ <h2>Creating Your First Component</h2>
 					<p class="meta">
 						<span class="language">js</span>
 					</p>
-					<pre><code class="language-js">&lt;script type="module"&gt;
+					<pre class="language-js"><code>&lt;script type="module"&gt;
 	import { UIElement, setText, on } from 'https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js'
 
 	class HelloWorld extends UIElement {
@@ -196,7 +196,7 @@ <h2>Creating Your First Component</h2>
 					<p class="meta">
 						<span class="language">html</span>
 					</p>
-					<pre><code class="language-html">&lt;hello-world&gt;
+					<pre class="language-html"><code>&lt;hello-world&gt;
 	&lt;label&gt;Your name&lt;br&gt;
 		&lt;input type="text"&gt;
 	&lt;/label&gt;