Glassmorphism

<form
					hx-post="/guides/glass/demo-form"
					hx-target="#glass-form-response"
					hx-swap="innerHTML"
					class="space-y-5"
				>
					<div>
						<label class="block text-xs font-medium mb-1.5" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;" for="glass-name">Name</label>
						<input
							id="glass-name"
							name="name"
							type="text"
							placeholder="Enter your name..."
							class="glass-input"
						/>
					</div>
					<div>
						<label class="block text-xs font-medium mb-1.5" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;" for="glass-email">Email</label>
						<input
							id="glass-email"
							name="email"
							type="email"
							placeholder="hello@example.com"
							class="glass-input"
						/>
					</div>
					<div>
						<label class="block text-xs font-medium mb-1.5" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;" for="glass-theme">Theme Preference</label>
						<select id="glass-theme" name="theme" class="glass-input cursor-pointer">
							<option value="" style="background: #1a1a2e;">— Select theme —</option>
							<option value="dark" style="background: #1a1a2e;">Deep Dark</option>
							<option value="aurora" style="background: #1a1a2e;">Aurora</option>
							<option value="cosmic" style="background: #1a1a2e;">Cosmic</option>
						</select>
					</div>
					<div class="flex items-center gap-3">
						<input type="checkbox" id="glass-notify" name="notify" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
						<label for="glass-notify" class="text-sm cursor-pointer" style="color: var(--color-text);">Enable blur-in notifications</label>
					</div>
					<!-- Radio buttons -->
					<div>
						<p class="text-xs font-medium mb-2" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;">Blur Level</p>
						<div class="space-y-2">
							<label class="flex items-center gap-3 cursor-pointer text-sm" style="color: var(--color-text);">
								<input type="radio" name="blur" value="subtle" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
								Subtle (8px)
							</label>
							<label class="flex items-center gap-3 cursor-pointer text-sm" style="color: var(--color-text);">
								<input type="radio" name="blur" value="medium" checked class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
								Medium (16px)
							</label>
							<label class="flex items-center gap-3 cursor-pointer text-sm" style="color: var(--color-text);">
								<input type="radio" name="blur" value="heavy" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
								Heavy (24px)
							</label>
						</div>
					</div>
					<!-- Textarea -->
					<div>
						<label class="block text-xs font-medium mb-1.5" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;" for="glass-notes">Notes</label>
						<textarea
							id="glass-notes"
							name="notes"
							placeholder="Additional details..."
							rows="3"
							class="glass-input"
						></textarea>
					</div>
					<button type="submit" class="glass-btn-primary px-6 py-2.5 text-sm w-full">
						Submit via HTMX
					</button>
				</form>

<div x-data="{ tab: 'layers' }">
					<div class="flex gap-2 mb-6" style="border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem;">
						for _, t := range []struct{ id, label string }{
							{"layers", "Layers"},
							{"depth", "Depth"},
							{"glow", "Glow"},
						} {
							<button
								{ templ.Attributes{
									":class": "tab==='" + t.id + "' ? 'glass-tab glass-tab-active' : 'glass-tab'",
									"@click": "tab='" + t.id + "'",
								}... }
							>{ t.label }</button>
						}
					</div>
					<div x-show="tab==='layers'">
						<p class="text-sm" style="color: var(--color-text-muted);">Glassmorphism builds depth through stacked translucent layers. Each panel reveals what lies beneath, creating a sense of physical space in a flat medium.</p>
					</div>
					<div x-show="tab==='depth'" style="display: none;">
						<p class="text-sm" style="color: var(--color-text-muted);">Blur intensity creates visual hierarchy. Foreground panels use heavy frost (16-24px blur), while background elements use subtle frost (4-8px). The eye focuses on what is sharpest.</p>
					</div>
					<div x-show="tab==='glow'" style="display: none;">
						<p class="text-sm" style="color: var(--color-text-muted);">Gradient glows serve as ambient lighting. Soft radial gradients behind panels simulate light sources, giving the interface a luminous, ethereal quality.</p>
					</div>
				</div>

<div id="glass-editable">
					<div class="flex items-center justify-between">
						<div>
							<p class="text-xs" style="color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;">Project Name</p>
							<p class="text-lg font-semibold mt-1" style="color: var(--color-text);">Aurora Dashboard</p>
						</div>
						<button
							class="glass-btn-ghost px-3 py-1.5 text-xs"
							hx-get="/guides/glass/edit-field"
							hx-target="#glass-editable"
							hx-swap="innerHTML"
						>Edit</button>
					</div>
				</div>

<div x-data="{ open: false }">
					<button class="glass-btn-primary px-4 py-2 text-sm" { templ.Attributes{"@click": "open = true"}... }>
						Open Modal
					</button>
					<div
						x-show="open"
						class="fixed inset-0 flex items-center justify-center z-50"
						style="backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0,0,0,0.5);"
						{ templ.Attributes{
							"x-transition:enter":       "transition ease-out duration-200",
							"x-transition:enter-start": "opacity-0",
							"x-transition:enter-end":   "opacity-100",
							"x-transition:leave":       "transition ease-in duration-150",
							"x-transition:leave-start": "opacity-100",
							"x-transition:leave-end":   "opacity-0",
							"@click.self":               "open = false",
						}... }
					>
						<div class="glass-panel p-8 max-w-md w-full mx-4">
							<h3 class="text-lg font-semibold mb-2" style="color: var(--color-text);">Frosted Dialog</h3>
							<p class="text-sm mb-6" style="color: var(--color-text-muted);">
								This overlay uses backdrop-filter: blur() on both the modal panel and the scrim.
							</p>
							<button class="glass-btn-primary px-4 py-2 text-sm" { templ.Attributes{"@click": "open = false"}... }>Close</button>
						</div>
					</div>
				</div>