Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.6.2",+  "version": "1.6.1",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container.",   "dependencies": {},

@@ -69,13 +69,13 @@ Anatomy, in order, inside every card:    the honest caveat ("threads already running when the hook installs will not report until    restarted"). That is the bar. 3. **Control rows**: label + control + inline status + action buttons, one row per control,-   dividers between them. Checkbox labels are the human name ("Claude Code"), not the key.+   dividers between them. Control labels are the human name ("Claude Code"), not the key. 4. **Consequence honesty**: a control that does nothing yet says so; a destructive button is    visually distinct (red text/border) and never offered on things that must not be removed.  ## Rows with lifecycle actions (Install / Update / Uninstall) -The ah Monitored-AIs pattern: `[checkbox + name] [status: version or "not installed"]+The ah Monitored-AIs pattern: `[toggle + name] [status: version or "not installed"] [Install|Update] [Uninstall?] [Details toggle]`. - The button LABEL reflects state: Install when absent, Update when present. Never show   "installed" next to a button that says Install.@@ -165,6 +165,54 @@ backdrop color - because each one fails silently and independently.   and a full re-census only when the tab layout changes"). - State honest limitations inline, not in docs nobody reads. +## Controls: TOGGLES, not checkboxes (John 2026-08-18)++A native `<input type="checkbox">` paints the BROWSER's blue when checked. That blue is not an+Adom color and it is instantly obvious sitting next to teal UI. Two rules:++1. **A boolean that switches a behavior on or off is a TOGGLE**, not a checkbox. A toggle reads+   as "this is a state I am flipping"; a checkbox reads as "I am selecting items from a list".+   Settings are almost always the former.+2. **If a checkbox is genuinely right** (multi-select inside one setting), never ship the native+   one: hide the input and draw your own box in brand teal. ah's `BooleanSettingsProperty` does+   exactly this: `input[type=checkbox]{display:none}` plus a `.fake-checkbox` that goes+   `background: var(--brand-teal, var(--accent))` when `:checked`.++The house toggle, copy-paste (36x20 track in a settings PAGE, 32x18 in a compact MODAL row):++```css+.toggle{background:none;border:none;padding:2px;cursor:pointer;flex-shrink:0;transition:transform .06s ease}+.toggle-track{display:block;width:32px;height:18px;background:var(--overlay,#21262d);+  border:1px solid var(--border,#30363d);border-radius:9px;position:relative;+  transition:background .15s ease,border-color .15s ease}+.toggle:hover .toggle-track{border-color:var(--accent,#00b8b1)}+.toggle:active{transform:translateY(1px) scale(.97)}+.toggle.active .toggle-track{background:var(--accent,#00b8b1);border-color:var(--accent,#00b8b1)}+.toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;+  border-radius:50%;transition:transform .18s ease,width .12s ease}+.toggle.active .toggle-thumb{transform:translateX(14px)}+.toggle:active .toggle-thumb{width:16px}            /* knob stretches under the finger */+.toggle.active:active .toggle-thumb{transform:translateX(10px)}+.toggle:focus-visible{outline:2px solid var(--accent,#00b8b1);outline-offset:2px;border-radius:10px}+```++```svelte+<button class="toggle" class:active={on} role="switch" aria-checked={on}+        aria-label="Watch claude threads" on:click={() => save(!on)}>+  <span class="toggle-track"><span class="toggle-thumb"></span></span>+</button>+<span class="set-check-label">Claude Code</span>+```++Non-negotiables: `role="switch"` plus `aria-checked` (a bare div toggle is invisible to a screen+reader), an `aria-label` when the visible label sits outside the button, a teal-on / neutral-off+track, a WHITE thumb in both states, and all three input-feedback moments (hover ring, press+compress with the knob stretching, `:focus-visible` ring). Never animate the track for longer+than about 150ms: a toggle that lags reads as "did that take?".++Reference: `PanelAiThreads.svelte` (compact rows) and `SharingApprovalDialog.svelte` (the+original 36x20 track) in hydrogen-desktop.+ ## Input feedback + testing  Every button, checkbox, toggle and row follows the **input-feedback** sub-skill (hover