{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "animiertes-select",
 "name": "Animiertes Auswahlmenü (anpassbares select)",
 "name_en": "Customizable select with animated picker (appearance: base-select)",
 "kurz": "Natives select mit appearance: base-select. Der Picker fällt 6 px herab und blendet in 300 ms ein, das gewählte Icon zeichnet sich neu.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "markentreu"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das native <select> wird mit appearance: base-select voll gestaltbar. Man gestaltet den Picker (::picker(select)), den Pfeil (::picker-icon) und Optionen mit Icons, Farbflächen oder Preisen. Der Picker blendet beim Öffnen über @starting-style ein, der Pfeil dreht sich, die gewählte Option trägt einen Haken. Stand November 2026 können das Chrome und Edge (ab 135) und Safari (ab 27, September 2026). Firefox zeigt ein normales, voll funktionsfähiges select.",
  "warum_es_wirkt": "Formularelemente passen zur Markenwelt, ohne eigenes Dropdown-JavaScript und ohne Verlust an Barrierefreiheit. Die kurze Bewegung zeigt, woher die Liste kommt, und bestätigt die Wahl.",
  "wann_einsetzen": "Sprachwahl, Filter, Formularauswahl mit Icons oder Farben, Länderauswahl, Leistungsauswahl in Anfrageformularen.",
  "wann_nicht": "Bei sehr langen Listen. Dann eine Combobox mit Suche verwenden.",
  "varianten": [
   "Picker mit Ein- und Ausblend-Animation",
   "Optionen mit Bildern, Icons oder Flaggen",
   "Gestaffelte Optionen über sibling-index()",
   "Picker als Raster-Layout"
  ],
  "umsetzung": "Browserstand (geprüft 02.11.2026, Web Features Explorer, WebKit-Blog zu Safari 27, web.dev September 2026): appearance: base-select mit <selectedcontent>, ::picker-icon und ::checkmark gibt es in Chrome und Edge ab 135 und in Safari ab 27. Firefox hat es nur hinter Flag und zeigt das native select; Baseline ist es deshalb noch nicht. Alles Gestalten gehört in @supports (appearance: base-select), dann bleibt Firefox voll bedienbar. select, ::picker(select) { appearance: base-select; } ::picker(select) { opacity: 0; translate: 0 -6px; transition: opacity .15s, translate .15s, display .15s allow-discrete, overlay .15s allow-discrete; } select:open::picker(select) { opacity: 1; translate: 0; transition-duration: .3s; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } @starting-style { select:open::picker(select) { opacity: 0; translate: 0 -6px; } } select::picker-icon { transition: rotate .3s; } select:open::picker-icon { rotate: 180deg; }. Das gewählte Element zeigt <button><selectedcontent></selectedcontent></button> als erstes Kind des select. Chrome öffnet den Picker standardmäßig dort, wo mehr Platz ist (position-try-order: most-block-size); position-try: normal flip-block öffnet ihn zuerst nach unten. showPicker() braucht eine Nutzergeste, ein Skript kann den Picker also nicht von selbst öffnen.",
  "mobil": "Safari auf iOS ab 27 und Chrome auf Android zeigen den gestalteten Picker; dann Optionen mindestens 48 px hoch und den Picker nicht breiter als das Feld. Firefox auf Android zeigt weiter den nativen Picker.",
  "reduzierte_bewegung": "Alle Übergänge auf 0 setzen. Der Picker erscheint dann sofort.",
  "barrierefreiheit": "Native Semantik und Tastatursteuerung bleiben erhalten. Icons und Farbflächen tragen aria-hidden, der Optionstext enthält die ganze Information."
 },
 "messwerte": {
  "easing": "cubic-bezier(.25,1,.5,1) (Optionen); cubic-bezier(0.65,0,0.35,1) (Icon-Morph)",
  "dauer_ms": "300 (Optionen); 1000 (Icon)",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Reduced Motion setzt Dauer auf 0",
  "herkunft": "beobachtet",
  "quelle": "https://stripe.com/"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Blog: New in Web UI – I/O 2025 Recap",
   "url": "https://developer.chrome.com/blog/new-in-web-ui-io-2025-recap",
   "auszeichnung": "",
   "beobachtung": "appearance: base-select, ::picker(select), ::picker-icon ab Chrome 134; progressive Verbesserung.",
   "art": "artikel"
  },
  {
   "seite": "Chrome Developers: Animated select picker",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/forms/animated-select-picker",
   "auszeichnung": "",
   "beobachtung": "Eigene Anleitung in der Modern-Web-Guidance-Navigation (Titel gesehen, Seite nicht geöffnet).",
   "art": "artikel"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle a86126a5a6c78d53.css): eigenes Auswahlmenü .time-of-day-select (Trigger appearance:none, Menü mit backdrop-filter blur(2.5px)); Optionen transition .3s cubic-bezier(.25,1,.5,1) nur bei prefers-reduced-motion: no-preference; Trigger-Icon morpht Sonne↔Mond per stroke-dashoffset und transform in 1s cubic-bezier(0.65,0,0.35,1), bei reduce 0s.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome Blog: New in Web UI – I/O 2025 Recap",
   "url": "https://developer.chrome.com/blog/new-in-web-ui-io-2025-recap"
  }
 ],
 "kombinierbar_mit": [
  "einblenden-starting-style",
  "gestaffelte-einblendung"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Custom-Select in Produktion; natives appearance:base-select wurde nur auf nerdy.dev als Demo-Text gefunden, nicht als Bedienelement.",
   "02.11.2026: Priorität B → A (Lückenrecherche K2), weil appearance: base-select ist seit Safari 27 da, damit in Chrome und Safari, Firefox fällt auf das native select zurück."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Natives select mit appearance: base-select. Der Picker fällt 6 px herab und blendet in 300 ms ein, das gewählte Icon zeichnet sich neu.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "picker_oeffnen": "opacity 0→1, translate 0 -6px→0, 300 ms cubic-bezier(0.25, 1, 0.5, 1) (power3.out), Start über @starting-style",
   "picker_schliessen": "150 ms cubic-bezier(0.4, 0, 1, 1), display und overlay mit allow-discrete",
   "optionen": "opacity 0→1, translate 0 -4px→0, 300 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "stagger_ms": "0 (Einblenden, Raster), 30 (Gestaffelt) per transition-delay: calc((sibling-index() - 2) * 30ms)",
   "pfeil": "::picker-icon rotate 0→180deg, 300 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "icon_im_feld": "selectedcontent: stroke-dashoffset 1→0 (pathLength 1), 1000 ms cubic-bezier(0.65, 0, 0.35, 1); Titel opacity und translate 0 5px, 300 ms",
   "hover_option": "background-color 150 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "druck": "scale 0.985, 150 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "picker_flaeche": "rgba(250, 249, 246, .985), backdrop-filter blur(10px), Rand 1px, Radius 5px, Innenabstand 5px, Abstand zum Feld 6px",
   "position": "position-area: bottom span-right; position-try: normal flip-block (Chrome-Standard most-block-size klappt sonst zu früh nach oben)",
   "raster": "::picker(select) display: grid, Leistungen 2 Spalten, Farbtöne 4 Spalten bei mind. 340px Breite",
   "wand": "fill-Übergang 400 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "reduziert": "alle Dauern 0 ms, Versatz 0 px"
  },
  "ausloeser": "klick",
  "touch": "Gleiches anpassbares select; Optionen mindestens 48 px hoch, unter 560 px Leistungen dreizeilig, damit der Picker so breit bleibt wie das Feld. Browser ohne base-select (Stand 02.11.2026: Firefox) zeigen ihren nativen Picker.",
  "reduziert": "Alle Dauern auf 0 ms und kein Versatz: Picker, Optionen, Icon und Wandfarbe erscheinen sofort. Die Werte-Anzeige nennt das.",
  "korrekturen": {
   "beschreibung": "Das native <select> wird mit appearance: base-select voll gestaltbar. Man gestaltet den Picker (::picker(select)), den Pfeil (::picker-icon) und Optionen mit Icons, Farbflächen oder Preisen. Der Picker blendet beim Öffnen über @starting-style ein, der Pfeil dreht sich, die gewählte Option trägt einen Haken. Stand November 2026 können das Chrome und Edge (ab 135) und Safari (ab 27, September 2026). Firefox zeigt ein normales, voll funktionsfähiges select.",
   "warum_es_wirkt": "Formularelemente passen zur Markenwelt, ohne eigenes Dropdown-JavaScript und ohne Verlust an Barrierefreiheit. Die kurze Bewegung zeigt, woher die Liste kommt, und bestätigt die Wahl.",
   "wann_einsetzen": "Sprachwahl, Filter, Formularauswahl mit Icons oder Farben, Länderauswahl, Leistungsauswahl in Anfrageformularen.",
   "wann_nicht": "Bei sehr langen Listen. Dann eine Combobox mit Suche verwenden.",
   "varianten": [
    "Picker mit Ein- und Ausblend-Animation",
    "Optionen mit Bildern, Icons oder Flaggen",
    "Gestaffelte Optionen über sibling-index()",
    "Picker als Raster-Layout"
   ],
   "umsetzung": "Browserstand (geprüft 02.11.2026, Web Features Explorer, WebKit-Blog zu Safari 27, web.dev September 2026): appearance: base-select mit <selectedcontent>, ::picker-icon und ::checkmark gibt es in Chrome und Edge ab 135 und in Safari ab 27. Firefox hat es nur hinter Flag und zeigt das native select; Baseline ist es deshalb noch nicht. Alles Gestalten gehört in @supports (appearance: base-select), dann bleibt Firefox voll bedienbar. select, ::picker(select) { appearance: base-select; } ::picker(select) { opacity: 0; translate: 0 -6px; transition: opacity .15s, translate .15s, display .15s allow-discrete, overlay .15s allow-discrete; } select:open::picker(select) { opacity: 1; translate: 0; transition-duration: .3s; transition-timing-function: cubic-bezier(.25, 1, .5, 1); } @starting-style { select:open::picker(select) { opacity: 0; translate: 0 -6px; } } select::picker-icon { transition: rotate .3s; } select:open::picker-icon { rotate: 180deg; }. Das gewählte Element zeigt <button><selectedcontent></selectedcontent></button> als erstes Kind des select. Chrome öffnet den Picker standardmäßig dort, wo mehr Platz ist (position-try-order: most-block-size); position-try: normal flip-block öffnet ihn zuerst nach unten. showPicker() braucht eine Nutzergeste, ein Skript kann den Picker also nicht von selbst öffnen.",
   "mobil": "Safari auf iOS ab 27 und Chrome auf Android zeigen den gestalteten Picker; dann Optionen mindestens 48 px hoch und den Picker nicht breiter als das Feld. Firefox auf Android zeigt weiter den nativen Picker.",
   "reduzierte_bewegung": "Alle Übergänge auf 0 setzen. Der Picker erscheint dann sofort.",
   "barrierefreiheit": "Native Semantik und Tastatursteuerung bleiben erhalten. Icons und Farbflächen tragen aria-hidden, der Optionstext enthält die ganze Information."
  },
  "geprueft": "02.11.2026",
  "notiz": "Anfrageformular der erfundenen Malerwerkstatt Brenneis (Heidelberg-Handschuhsheim) im Rezept handwerk-werkstatt-klartext: drei echte select-Elemente mit base-select (Leistung mit Icon und Ab-Preis, Farbton mit Farbfläche, Wunschzeitraum). Der Farbton färbt eine gezeichnete Altbauwand (SVG). Umschalter Einblenden, Gestaffelt, Raster. Wer klickt, bedient das echte select. Die Vorführung zeigt ein Doppel des Pickers mit denselben Werten, weil showPicker() ohne Nutzergeste nicht öffnet; der Wert wird danach am echten select gesetzt, selectedcontent zeichnet das Icon neu. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: 320 px: body-Raster mit minmax(0, 1fr), bis 360 px Kopf enger, Variantenschalter und Wandkopf umbrechend, Werte-Zeile bricht lange Kurven um. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Korrektur 02.11.2026: Browserstand nachgezogen. base-select mit selectedcontent, ::picker-icon und ::checkmark gibt es seit Safari 27 (WebKit-Blog, Web Features Explorer: Safari 27 am 14.09.2026), dazu Chrome/Edge ab 135; Firefox nur hinter Flag, fällt auf das native select zurück. Werte-Zeile der Demo zeigt „base-select hier ja/nein · Chrome 135+, Safari 27+“; beschreibung, umsetzung, mobil über korrekturen, touch angepasst. Priorität ist bereits A."
 }
}