Place a11y button inline with theme switch, add Auto on/off toggle

- A11y toggle button now sits side-by-side with theme switch inside
  the FAB bar, separated by a divider
- A11y button height matches the theme switch
- Auto button replaced with a proper on/off toggle switch that
  clearly indicates system-follow state
- Manual theme switch turns off Auto automatically
- A11y panel floats from its inline position when opened
- Falls back to standalone toolbar when theme FAB is disabled

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/media/js/template.js

@@ -87,13 +87,40 @@
 		lblD.className = 'label';
 		lblD.textContent = 'Dark';
 
-		// Auto button
+		// Auto toggle (on/off switch style)
+		var autoWrap = doc.createElement('div');
+		autoWrap.className = 'auto-toggle-wrap';
+
+		var autoLabel = doc.createElement('span');
+		autoLabel.className = 'auto-label';
+		autoLabel.textContent = 'Auto';
+
 		var auto = doc.createElement('button');
 		auto.id = 'mokoThemeAuto';
 		auto.type = 'button';
-		auto.className = 'btn btn-sm btn-link text-decoration-none px-2';
-		auto.setAttribute('aria-label', 'Follow system theme');
-		auto.textContent = 'Auto';
+		auto.className = 'auto-switch';
+		auto.setAttribute('role', 'switch');
+		auto.setAttribute('aria-label', 'Automatic theme (follow system)');
+		auto.setAttribute('aria-checked', getStored() ? 'false' : 'true');
+
+		var autoTrack = doc.createElement('span');
+		autoTrack.className = 'auto-track';
+		var autoKnob = doc.createElement('span');
+		autoKnob.className = 'auto-knob';
+		autoTrack.appendChild(autoKnob);
+		auto.appendChild(autoTrack);
+		if (!getStored()) auto.classList.add('on');
+
+		autoWrap.appendChild(autoLabel);
+		autoWrap.appendChild(auto);
+
+		// Divider before a11y slot
+		var divider = doc.createElement('span');
+		divider.className = 'fab-divider';
+
+		// A11y slot — buildA11yToolbar will inject its toggle here
+		var a11ySlot = doc.createElement('span');
+		a11ySlot.id = 'mokoA11ySlot';
 
 		// Behavior
 		switchWrap.addEventListener('click', function () {
@@ -101,6 +128,9 @@
 			var next = current === 'dark' ? 'light' : 'dark';
 			applyTheme(next);
 			switchWrap.setAttribute('aria-checked', next === 'dark' ? 'true' : 'false');
+			// Turn off auto when manually switching
+			auto.classList.remove('on');
+			auto.setAttribute('aria-checked', 'false');
 			// Update meta theme color
 			var meta = doc.querySelector('meta[name="theme-color"]');
 			if (meta) {
@@ -109,10 +139,14 @@
 		});
 
 		auto.addEventListener('click', function () {
-			clearStored();
-			var sys = systemTheme();
-			applyTheme(sys);
-			switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false');
+			var isAuto = auto.classList.toggle('on');
+			auto.setAttribute('aria-checked', isAuto ? 'true' : 'false');
+			if (isAuto) {
+				clearStored();
+				var sys = systemTheme();
+				applyTheme(sys);
+				switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false');
+			}
 		});
 
 		// Respond to OS changes only when not user-forced
@@ -134,7 +168,9 @@
 		wrap.appendChild(lblL);
 		wrap.appendChild(switchWrap);
 		wrap.appendChild(lblD);
-		wrap.appendChild(auto);
+		wrap.appendChild(autoWrap);
+		wrap.appendChild(divider);
+		wrap.appendChild(a11ySlot);
 		doc.body.appendChild(wrap);
 
 		// Debug helper
@@ -359,23 +395,6 @@
 		addSwitchOption(showFont,       "font",     "fa-solid fa-font",               "Readable font",      applyFont);
 		addSwitchOption(showAnimations, "paused",   "fa-solid fa-pause",              "Pause animations",   applyPaused);
 
-		// Toggle panel open/close
-		toggle.addEventListener("click", function () {
-			var isOpen = !panel.hidden;
-			panel.hidden = isOpen;
-			toggle.setAttribute("aria-expanded", isOpen ? "false" : "true");
-			toggle.classList.toggle("active", !isOpen);
-		});
-
-		// Close on outside click
-		doc.addEventListener("click", function (e) {
-			if (!toolbar.contains(e.target) && !panel.hidden) {
-				panel.hidden = true;
-				toggle.setAttribute("aria-expanded", "false");
-				toggle.classList.remove("active");
-			}
-		});
-
 		// Apply saved preferences on load
 		if (prefs.fontStep !== defaultStep) applyFontSize(prefs.fontStep);
 		if (prefs.inverted) applyInversion(true);
@@ -384,9 +403,55 @@
 		if (prefs.font)     applyFont(true);
 		if (prefs.paused)   applyPaused(true);
 
-		toolbar.appendChild(toggle);
-		toolbar.appendChild(panel);
-		body.appendChild(toolbar);
+		// If theme FAB is present, mount a11y toggle inside it; otherwise standalone
+		var fabSlot = doc.getElementById("mokoA11ySlot");
+		if (fabSlot) {
+			toggle.className = "a11y-toggle a11y-toggle-inline";
+			fabSlot.appendChild(toggle);
+			toolbar.className = "a11y-toolbar-floating";
+			toolbar.appendChild(panel);
+			body.appendChild(toolbar);
+			// Position panel near the FAB
+			toggle.addEventListener("click", function () {
+				var isOpen = !panel.hidden;
+				panel.hidden = isOpen;
+				toggle.setAttribute("aria-expanded", isOpen ? "false" : "true");
+				toggle.classList.toggle("active", !isOpen);
+				if (!isOpen) {
+					var rect = toggle.getBoundingClientRect();
+					toolbar.style.position = "fixed";
+					toolbar.style.bottom = (win.innerHeight - rect.top + 8) + "px";
+					toolbar.style.right = (win.innerWidth - rect.right) + "px";
+					toolbar.style.zIndex = "1202";
+				}
+			});
+			// Close on outside click for inline mode
+			doc.addEventListener("click", function (e) {
+				if (!toggle.contains(e.target) && !toolbar.contains(e.target) && !panel.hidden) {
+					panel.hidden = true;
+					toggle.setAttribute("aria-expanded", "false");
+					toggle.classList.remove("active");
+				}
+			});
+		} else {
+			// Standalone mode — toggle and close handlers
+			toggle.addEventListener("click", function () {
+				var isOpen = !panel.hidden;
+				panel.hidden = isOpen;
+				toggle.setAttribute("aria-expanded", isOpen ? "false" : "true");
+				toggle.classList.toggle("active", !isOpen);
+			});
+			doc.addEventListener("click", function (e) {
+				if (!toolbar.contains(e.target) && !panel.hidden) {
+					panel.hidden = true;
+					toggle.setAttribute("aria-expanded", "false");
+					toggle.classList.remove("active");
+				}
+			});
+			toolbar.appendChild(toggle);
+			toolbar.appendChild(panel);
+			body.appendChild(toolbar);
+		}
 	}
 
 	// ========================================================================