{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "toggle-switch",
 "name": "Toggle-Schalter",
 "name_en": "Toggle switch",
 "kurz": "Der Daumen federt in die neue Position, wird beim Drücken breiter und die Spur wechselt die Farbe: der Zustand ist sofort lesbar und fühlt sich haptisch an.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "freundlich",
  "funktional"
 ],
 "technik": [
  "css",
  "motion"
 ],
 "technik_gruppen": [
  "css",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein binärer Schalter. Der Daumen gleitet von links nach rechts, die Spur wechselt die Farbe. Hochwertige Varianten federn beim Ankommen, dehnen den Daumen beim Drücken (Squash) oder tauschen ein Icon im Daumen, etwa Haken und Kreuz oder Sonne und Mond. Seit 2026 gibt es dafür nativ <input type=\"checkbox\" switch> mit accent-color.",
  "warum_es_wirkt": "Der Zustand ist an Position und Farbe sofort lesbar. Die Feder und der Squash machen den Wechsel haptisch, ohne die Bedienung zu verlangsamen.",
  "wann_einsetzen": "Für Einstellungen mit sofortiger Wirkung: dunkle Ansicht, Ton, Benachrichtigungen, Preis monatlich oder jährlich.",
  "wann_nicht": "Für Optionen, die erst mit „Speichern“ wirken: dann eine Checkbox. Für mehr als zwei Zustände: dann ein Segment-Schalter.",
  "varianten": [
   "Schlicht: Daumen und Spur 200 ms ease-in-out, wie bei Dub",
   "Feder: Daumen schwingt leicht über, Squash beim Drücken (Breite +20 %)",
   "Icon im Daumen: Haken/Kreuz oder Sonne/Mond",
   "Nativer Schalter mit switch-Attribut und accent-color",
   "Ziehbarer Daumen (das Polyfill unterstützt Drag)"
  ],
  "umsetzung": "Nativ: <label>Benachrichtigungen <input type=\"checkbox\" switch></label> und input[switch] { accent-color: var(--akzent) }. Eigene Optik: echte Checkbox mit role=\"switch\" unsichtbar über die Spur legen, Daumen als eigenes Element. Daumen per translate bewegen, Weg = Spurbreite minus Höhe. Feder als linear()-Kurve (350 ms), Spur background-color 200 ms ease-in-out. Squash: beim Drücken die Daumenbreite um 20 % erhöhen (150 ms) und translate so rechnen, dass der Daumen an seiner Seite bleibt. Im Skript das change-Event nutzen und .checked lesen. Fokusring sichtbar lassen (outline 3px, offset 4px).",
  "mobil": "Die ganze Zeile als Label klickbar machen, Tippfläche mindestens 44 px. Den Squash per pointerdown/pointerup setzen, weil :active auf Touch unzuverlässig ist.",
  "reduzierte_bewegung": "Der Daumen springt, die Farbe wechselt sofort. Kein Squash, kein Überschwingen.",
  "barrierefreiheit": "Native Checkbox mit role=\"switch\" bzw. switch-Attribut, damit Screenreader „Schalter, an/aus“ ansagen. Leertaste schaltet. Zustand nicht nur über Farbe zeigen: Position und gegebenenfalls Icon. Das Label ist klickbar, der Fokusring sichtbar."
 },
 "messwerte": {
  "easing": "ease-in-out",
  "dauer_ms": "200",
  "stagger_ms": "",
  "distanz": "Daumenweg 16 px (Dub)",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://dub.co/"
 },
 "kurve": {
  "bezier": [
   0.42,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0.42, 0, 0.58, 1)",
  "name": "ease-in-out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Developers: Switch",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/forms/switch",
   "auszeichnung": "",
   "beobachtung": "Offiziell: <input type='checkbox' switch>, accent-color, :focus-visible outline 3px/offset 4px, Polyfill input-switch-polyfill nur bedingt laden (setzt role=switch, Drag).",
   "art": "artikel"
  },
  {
   "seite": "Motion Examples: Base UI Switch",
   "url": "https://motion.dev/examples/react-base-switch",
   "auszeichnung": "",
   "beobachtung": "Animierter Switch auf Base-UI-Basis.",
   "art": "demo"
  },
  {
   "seite": "Motion Examples: Radix Switch",
   "url": "https://motion.dev/examples/vue-radix-switch",
   "auszeichnung": "",
   "beobachtung": "Animierter Switch auf Radix-Basis.",
   "art": "demo"
  },
  {
   "seite": "Dub",
   "url": "https://dub.co/",
   "auszeichnung": "",
   "beobachtung": "Radix-Switch im Live-HTML: Spur 32×16 px, transition-colors 200 ms ease-in-out (blau/neutral); Daumen 12 px, translate-x 16 px, transition 200 ms ease-in-out.",
   "art": "website"
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Base-UI-Switch (role='switch', aria-checked) als Ansichtsumschalter; Segmente mit transition 200 ms ease-in-out.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Switch",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/forms/switch"
  }
 ],
 "kombinierbar_mit": [
  "token-federnd-verspielt",
  "theme-umschalter-view-transition",
  "zahlen-odometer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege, beide eher schlicht (keine Federung)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Daumen federt in die neue Position, wird beim Drücken breiter und die Spur wechselt die Farbe: der Zustand ist sofort lesbar und fühlt sich haptisch an.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "spur_farbe": "background-color 200 ms cubic-bezier(0.42, 0, 0.58, 1) (gemessen bei Dub, ease-in-out)",
   "schlicht_daumen": "translate 200 ms cubic-bezier(0.42, 0, 0.58, 1), kein Squash",
   "feder_daumen": "translate 350 ms linear(0, 0.101, 0.322, 0.568, 0.783, 0.941, 1.038, 1.085, 1.095, 1.083, 1.061, 1.038, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1), gedämpfte Feder ζ 0.6, ca. 9 % Überschwingen",
   "squash": "Daumenbreite +20 % (24 → 28,8 px) beim Drücken, width 150 ms cubic-bezier(0.42, 0, 0.58, 1), Daumen bleibt an seiner Seite verankert",
   "icon": "Haken/Kreuz: opacity, scale 0.4 → 1, rotate ±45°, 200 ms cubic-bezier(0.42, 0, 0.58, 1); Sonne/Mond: Strahlen scale 0.3 + rotate 90°, Schattenkreis per Feder 350 ms",
   "geometrie": "Spur 52 × 30 px, Rand 3 px, Daumen 24 px, Weg 22 px; groß 96 × 52 px, Rand 4 px, Daumen 44 px, Weg 44 px",
   "fokus": "outline 3px, offset 4px in Akzentfarbe",
   "theme_wechsel": "Seitenfarben 200 ms cubic-bezier(0.42, 0, 0.58, 1)",
   "farben": "aus rgba(38,50,49,.22), an #005450 (Petrol); Abend: aus rgba(228,236,234,.24), an #f2b866 (Apricot); Daumen #ffffff, abends #fbfaf6",
   "tippziel": "ganze Zeile als <label>, min. 64 px hoch (Touch 72 px)"
  },
  "ausloeser": "klick",
  "touch": "Die ganze Zeile ist Tippfläche (Label, 72 px hoch). Der Squash läuft über pointerdown/pointerup statt :active, weil :active auf Touch unzuverlässig greift.",
  "reduziert": "Keine Übergänge: der Daumen springt, Spur- und Seitenfarbe wechseln sofort, kein Squash. Die Werte-Zeile zeigt den reduzierten Zustand.",
  "korrekturen": {
   "beschreibung": "Ein binärer Schalter. Der Daumen gleitet von links nach rechts, die Spur wechselt die Farbe. Hochwertige Varianten federn beim Ankommen, dehnen den Daumen beim Drücken (Squash) oder tauschen ein Icon im Daumen, etwa Haken und Kreuz oder Sonne und Mond. Seit 2026 gibt es dafür nativ <input type=\"checkbox\" switch> mit accent-color.",
   "warum_es_wirkt": "Der Zustand ist an Position und Farbe sofort lesbar. Die Feder und der Squash machen den Wechsel haptisch, ohne die Bedienung zu verlangsamen.",
   "wann_einsetzen": "Für Einstellungen mit sofortiger Wirkung: dunkle Ansicht, Ton, Benachrichtigungen, Preis monatlich oder jährlich.",
   "wann_nicht": "Für Optionen, die erst mit „Speichern“ wirken: dann eine Checkbox. Für mehr als zwei Zustände: dann ein Segment-Schalter.",
   "varianten": [
    "Schlicht: Daumen und Spur 200 ms ease-in-out, wie bei Dub",
    "Feder: Daumen schwingt leicht über, Squash beim Drücken (Breite +20 %)",
    "Icon im Daumen: Haken/Kreuz oder Sonne/Mond",
    "Nativer Schalter mit switch-Attribut und accent-color",
    "Ziehbarer Daumen (das Polyfill unterstützt Drag)"
   ],
   "umsetzung": "Nativ: <label>Benachrichtigungen <input type=\"checkbox\" switch></label> und input[switch] { accent-color: var(--akzent) }. Eigene Optik: echte Checkbox mit role=\"switch\" unsichtbar über die Spur legen, Daumen als eigenes Element. Daumen per translate bewegen, Weg = Spurbreite minus Höhe. Feder als linear()-Kurve (350 ms), Spur background-color 200 ms ease-in-out. Squash: beim Drücken die Daumenbreite um 20 % erhöhen (150 ms) und translate so rechnen, dass der Daumen an seiner Seite bleibt. Im Skript das change-Event nutzen und .checked lesen. Fokusring sichtbar lassen (outline 3px, offset 4px).",
   "mobil": "Die ganze Zeile als Label klickbar machen, Tippfläche mindestens 44 px. Den Squash per pointerdown/pointerup setzen, weil :active auf Touch unzuverlässig ist.",
   "reduzierte_bewegung": "Der Daumen springt, die Farbe wechselt sofort. Kein Squash, kein Überschwingen.",
   "barrierefreiheit": "Native Checkbox mit role=\"switch\" bzw. switch-Attribut, damit Screenreader „Schalter, an/aus“ ansagen. Leertaste schaltet. Zustand nicht nur über Farbe zeigen: Position und gegebenenfalls Icon. Das Label ist klickbar, der Fokusring sichtbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Neue Welt: Patientenkonto der erfundenen Praxis „Physiotherapie am Stadtpark, Bonn“, gestaltet nach Rezept praxis-gesundheit-ruhig (Hedvig Letters Serif + Google Sans Flex, kühles Off-White #f3f6f5, Petrol #005450, Apricot als Akzent). Vier echte Schalter (role=switch über unsichtbarer Checkbox): „Abendtermine bevorzugen“ tauscht den nächsten Termin und schaltet die Seite samt eigener SVG-Parkillustration in die Abendstimmung (Sonne wird Mond, Fenster leuchten), dazu SMS-Erinnerung, Übungsplan und Gerätetraining-Abo mit Preistausch. Umschalter Schlicht (gemessen bei Dub) / Feder + Squash / Icon im Daumen. Die Vorführung tippt mit gedachtem Finger und hält kurz gedrückt, damit der Squash sichtbar wird; pro Runde wechselt die Variante. Bewegungswerte unverändert. Zugang 02.11.2026: Bühne einspaltig mit minmax(0, 1fr) (vorher 1fr, 364 px breit bei 320), unter 360 px Terminknopf zweizeilig, Datum in der Karte umbrechend, Werte mit overflow-wrap anywhere, Kontrastmodus-Rahmen für Knöpfe."
 }
}