jb/shd.build
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

prototype: compact variant switcher

Browse Source
This commit is contained in:
jb
2026-08-23 19:50:18 -04:00
parent fe06b90117
commit 904cb073a2
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/database/ModelStatusPrototypeSwitcher.prototype.svelte
+2 -2
View File
@@ -36,10 +36,10 @@
<!-- THROWAWAY PROTOTYPE: development-only variant switcher for issue #5. --> <!-- THROWAWAY PROTOTYPE: development-only variant switcher for issue #5. -->
<nav class="prototype-switcher" aria-label="Model status prototype variants"> <nav class="prototype-switcher" aria-label="Model status prototype variants">
<button type="button" onclick={() => cycle(-1)} aria-label="Show previous prototype variant">←</button> <button type="button" onclick={() => cycle(-1)} aria-label="Show previous prototype variant">←</button>
<div aria-live="polite"><small>THROWAWAY PROTOTYPE</small><strong>VARIANT {current}</strong><span>{prototypeVariantNames[current]}</span></div> <strong aria-live="polite" title={prototypeVariantNames[current]} aria-label={`Variant ${current}: ${prototypeVariantNames[current]}`}>{current}</strong>
<button type="button" onclick={() => cycle(1)} aria-label="Show next prototype variant">→</button> <button type="button" onclick={() => cycle(1)} aria-label="Show next prototype variant">→</button>
</nav> </nav>
<style> <style>
.prototype-switcher{position:fixed;z-index:1000;left:50%;bottom:18px;transform:translateX(-50%);min-width:min(470px,calc(100vw - 24px));display:grid;grid-template-columns:48px minmax(0,1fr) 48px;border:1px solid var(--shd-border-strong);box-shadow:0 12px 38px #000c;background:var(--shd-bg);color:var(--shd-text)}.prototype-switcher button{display:grid;place-items:center;border:0;background:var(--shd-surface-raised);color:var(--shd-orange);font:800 22px/1 var(--shd-font-mono);cursor:pointer}.prototype-switcher button:first-child{border-right:1px solid var(--shd-border)}.prototype-switcher button:last-child{border-left:1px solid var(--shd-border)}.prototype-switcher button:hover{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.prototype-switcher button:active{transform:translateY(1px);filter:brightness(.82)}.prototype-switcher button:focus-visible{position:relative;z-index:1;outline:2px solid var(--shd-focus-ring);outline-offset:2px}.prototype-switcher>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:8px 12px;text-align:left}.prototype-switcher small{grid-column:1/-1;color:var(--shd-text-dim);font-size:9px;font-weight:900;letter-spacing:1px}.prototype-switcher strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.8px}.prototype-switcher span{overflow:hidden;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.prototype-switcher{bottom:10px;grid-template-columns:44px minmax(0,1fr) 44px}.prototype-switcher>div{grid-template-columns:1fr;gap:2px}.prototype-switcher small{display:none}}@media(prefers-reduced-motion:reduce){.prototype-switcher button{transition:none}} .prototype-switcher{position:fixed;z-index:1000;right:14px;bottom:14px;display:grid;grid-template-columns:36px 34px 36px;height:36px;border:1px solid var(--shd-border-strong);box-shadow:0 7px 20px #000a;background:var(--shd-bg);color:var(--shd-text)}.prototype-switcher button{display:grid;place-items:center;border:0;background:var(--shd-surface-raised);color:var(--shd-orange);font:800 17px/1 var(--shd-font-mono);cursor:pointer}.prototype-switcher button:first-child{border-right:1px solid var(--shd-border)}.prototype-switcher button:last-child{border-left:1px solid var(--shd-border)}.prototype-switcher button:hover{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.prototype-switcher button:active{transform:translateY(1px);filter:brightness(.82)}.prototype-switcher button:focus-visible{position:relative;z-index:1;outline:2px solid var(--shd-focus-ring);outline-offset:2px}.prototype-switcher>strong{display:grid;place-items:center;color:var(--shd-text);font:900 12px/1 var(--shd-font-mono);letter-spacing:.6px}@media(max-width:520px){.prototype-switcher{right:8px;bottom:8px}}@media(prefers-reduced-motion:reduce){.prototype-switcher button{transition:none}}
</style> </style>