From 4adb141b46b5fec410903531aaac6b7001b70167 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 19:42:32 -0500 Subject: fix(gallery): render the slide toggle as its pill, mark it born-digital MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Card 01 collapsed to a sliver because the pill was an inline span (inline boxes ignore width/height — the invisible-lamp bug family), so it never rendered as the familiar toggle. It also gets an honest identity: renamed Slide toggle, origin and period note it as the touchscreen idiom, with pointers to its physical cousins R03 and N01. --- docs/prototypes/panel-widget-gallery.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'docs') diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 87d7d89..2e479e6 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -116,7 +116,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} /* standard pulse: 1s ease-in-out — the norm for every pulsing / flashing element */ @keyframes pulse{50%{opacity:.25}} -.switch{width:40px;height:21px;border-radius:11px;background:var(--wash);border:1px solid var(--slate); +.switch{display:inline-block;width:40px;height:21px;border-radius:11px;background:var(--wash);border:1px solid var(--slate); position:relative;cursor:pointer} .switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:var(--dim);transition:left .15s} @@ -764,10 +764,11 @@ function screenChips(no,el,fams,def){ const INFO={ '01':{input:'Click to flip. Click-only, ports everywhere incl. Emacs.', solves:'One persistent on/off state, visible at a glance without reading text.', - use:'Common everywhere. Shines as a master control: power, mute, enable.', + use:'Common in every modern UI. Shines as a master control: power, mute, enable.', limits:'Two states only. Ambiguous if the on-direction is not marked.', - origin:'Electrical panels generally.',difficulty:'Intuitive.', - prefer:'The state persists and gets glanced at more than changed.'}, + origin:'The touchscreen pill toggle — the digital descendant of the slide switch.',difficulty:'Intuitive.', + prefer:'The state persists and gets glanced at more than changed. For period consoles use R03 or N01 instead.', + period:'Modern (2007+ touchscreen idiom) — the only born-digital control here; it will look wrong beside nixies.'}, '02':{input:'Click one key to engage it; the others release. Click-only.', solves:'One-of-few mode selection where the active mode must glow.', use:'Common on consoles. Shines for 2-4 modes switched often.', @@ -1525,9 +1526,9 @@ function seg7(ch,cls){ /* ============ CONTROLS ============ */ const C=$('controls'); -card(C,'01','Toggle switch', +card(C,'01','Slide toggle', ``, - 'on / off. The faceplate master control — power, mute, enable. Click to flip; readout shows the state.'); + 'on / off, the touchscreen way. The one born-digital control in the kit — the smartphone pill toggle the live net/bt/audio panels use. Click to flip; readout shows the state. Physical cousins: the bat-handle (R03) and the rocker (N01).'); card(C,'02','Console key', ``, 'physical push button. Mutually exclusive — click one to engage. Gold = live, terracotta = muted.'); -- cgit v1.2.3