/* ============================================================ Komponente: chip (Filter-Chip) ------------------------------------------------------------ Quelle: SKILL.md §5 und §11.4, Figma „Filters, Chips, Tags, Controls" → tag filter category / Genre. Freigegeben am 28.08.2026 — vorher Entwurf im CSS von examples/motion-demo.html. Setzt tokens.css und base.css voraus. Bewegung kommt aus components/motion.css (§23) — die Datei hier setzt keine transition. STRICH MITTIG, NICHT INNEN (§5, 31.08.2026) In Figma auf strokeAlign CENTER umgestellt: ein innen liegender Strich frisst von der Fläche und lässt den Chip kleiner wirken. In CSS heißt das box-shadow statt border — Details am .chip. FLÄCHE FOLGT DEM UNTERGRUND (§5, 31.08.2026) Auf surface-primary und auf der Suchleiste: .chip allein. Auf einer Karte zusätzlich .chip--auf-karte. ZWEI ZUSTÄNDE, NICHT DREI Ein Chip kennt aktiv und nicht aktiv. Einen eigenen Click-Zustand gibt es nicht; `label-fill-click` existiert nicht mehr (§5). VERWENDUNG Mehrfachauswahl — das ✓ zeigt den AUSWAHL-TYP, nicht den Zustand (§5). Nie mit Einfachauswahl im selben Set mischen: Entfernbarer Chip (aktive Filterzeile): Suche in: eBooks Der Aktiv-Zustand hängt an aria-pressed="true" (Toggle) oder data-aktiv="true" (nicht tappbarer Träger). Nie an einer Klasse allein — der Zustand muss auch für Screenreader da sein. ============================================================ */ .chip { display: inline-flex; align-items: center; gap: var(--space-xs); /* 8 — Haken → Label */ padding: var(--space-sm) var(--space-md); /* 12 / 16 (§11.4) — Höhe 45 */ border-radius: var(--radius-full); background-color: var(--label-fill); /* DER STRICH LIEGT MITTIG, NICHT INNEN (§5, 31.08.2026). Halb außen, halb innen: 0,5 px in jede Richtung. Kein border — der zählt bei automatischer Höhe OBEN DRAUF und hätte den Chip auf 47 px getrieben statt auf 45. Und ein border liegt immer innen, verkleinert also die Fläche; genau deshalb ist in Figma am 31.08.2026 von INSIDE auf CENTER umgestellt worden — innen wirkt der Chip kleiner. */ box-shadow: 0 0 0 0.5px var(--label-outline), inset 0 0 0 0.5px var(--label-outline); color: var(--label-text); font-family: var(--font-family-inter); font-size: var(--font-size-small-text); line-height: var(--line-height-small-text); font-weight: var(--font-weight-regular); cursor: pointer; } /* Die Pille ist mit 12/16 Padding 45 px hoch und erfüllt damit die 44er-Untergrenze aus §11.2 ohne Zusatz. Korrigiert am 31.08.2026: vorher standen hier 8/12, das ergab 37 px und lag UNTER der eigenen Untergrenze. Die Werte kamen aus einem Entwurf, nicht aus der Komponente — Figma führt 12/16. Braucht ein Chip mehr Fläche, .touch-target aus base.css ergänzen, nicht die Maße hier ändern. */ /* ------------------------------------------------------------ Fläche — folgt dem Untergrund, nicht der Komponente (§5) ------------------------------------------------------------ label-fill hat in beiden Modes denselben Farbwert wie surface-card, und label-fill-inverted denselben wie surface-primary. Auf der falschen Fläche fällt der Chip auf 1,00:1 und nur der 1-px-Rand bleibt übrig. .chip trägt label-fill — richtig auf surface-primary und auf der Suchleiste. Liegt der Chip auf einer Karte (Dialog, Sheet, Content-Card), kommt .chip--auf-karte dazu. In Figma ist das die Variante „Type=Chip, State=inactive inverted". Der Chip liegt damit immer eine Stufe VERTIEFT — in beiden Modes gleich. Aufliegend ginge nicht: surface-card ist in Light reines Weiß, darüber gibt es keine hellere Fläche. Der aktive Zustand ist davon unberührt: label-fill-active plus 2-px-Akzentrand hält auf jeder Fläche über 3:1. ------------------------------------------------------------ */ .chip--auf-karte:not([aria-pressed="true"]):not([data-aktiv="true"]) { background-color: var(--label-fill-inverted); } /* ------------------------------------------------------------ Aktiv ------------------------------------------------------------ Der 2-px-Border trägt den Zustand. In Dark ist er zwingend: ohne ihn ist aktiv auf dunklem Grund kaum sichtbar (~1,6:1). Der Glow ist nur Verstärkung und in Light aus (§5). KEIN LAYOUT-SPRUNG: Es gibt in keinem Zustand einen border — der Strich ist immer ein box-shadow, halb außen halb innen (§5, §23.6). Der Wechsel 1 → 2 px verschiebt damit nichts, und die Fläche bleibt in voller Größe sichtbar. Der Glow steht im gleichen box-shadow, aber NICHT in einer transition (motion.css) — er springt. Er ist ein Schatten und wird auf der CPU gemalt; fällt er auf schwachen Geräten aus, bleibt der Zustand über den Border lesbar. ------------------------------------------------------------ */ .chip[aria-pressed="true"], .chip[data-aktiv="true"] { background-color: var(--label-fill-active); color: var(--label-text-active); /* 2 px mittig = 1 px außen, 1 px innen. Der Wechsel 1 → 2 px verschiebt nichts, weil beide Zustände ohne border arbeiten und ein Schatten kein Layout kennt (§23.6). */ box-shadow: 0 0 0 1px var(--label-outline-active), inset 0 0 0 1px var(--label-outline-active), var(--glow-chip); } /* ------------------------------------------------------------ Icon und Häkchen ------------------------------------------------------------ */ .chip__icon, .chip__haken { flex: 0 0 auto; width: 15px; height: 15px; } /* DAS KATEGORIE-ICON TRÄGT DEN AKZENT, NICHT DIE TEXTFARBE (09.09.2026, Lisi: „für den chip in der suche, der muss blau sein das icon. im design system in figma neu angepasst"). An der Variante „Type=Filter, State=active category" (952:2626) nachgesehen. Drei Farben in einer Pille, und jede bindet ein anderes Token: Kategorie-Icon label-outline-active #56b2dd ← neu Text label-text-active #fcfdfd ✕ label-icon #fcfdfd Es ist dasselbe Token wie der Rand: das Icon sagt, WORIN gesucht wird, und gehört damit zum Zustand „aktiv" — nicht zum Text. Vorher erbte es die Textfarbe und war weiß. Nur im aktiven Zustand — im inaktiven gibt es diese Pille nicht. Das ✓ der Mehrfachauswahl bleibt außen vor: es meldet den Auswahl-Typ und liest sich mit dem Text zusammen. */ .chip[aria-pressed="true"] .chip__icon, .chip[data-aktiv="true"] .chip__icon { color: var(--label-outline-active); } /* Das ✓ erscheint nur im aktiven Zustand — es zeigt den Auswahl-Typ Mehrfachauswahl an (§5). */ .chip--mehrfach .chip__haken { display: none; } .chip--mehrfach[aria-pressed="true"] .chip__haken, .chip--mehrfach[data-aktiv="true"] .chip__haken { display: block; } /* ------------------------------------------------------------ Entfernen-✕ ------------------------------------------------------------ Rechts, mit engerem Außenabstand als der Text links — Figma: padding-left 16, padding-right 9 an der Pille. Die Scheibe nutzt text-opposite-background, NICHT label-fill-inverted (§5). Das Token liefert Weiß in Light und Colors/Black in Dark: die Gegenfläche zum Grund. In Dark geht die Scheibe unter den Chip, in Light darüber — die Richtung dreht, die Regel bleibt eine. Warum nicht label-fill-inverted, was in Dark denselben Wert hätte: in Light zeigt es auf gray-50 und liegt mit 1,01:1 neben Blau als grauer Fleck. Die Glyphe ist ein STRICH, keine gefüllte Form: 2 px, runde Endpunkte. Das Zeichen „✕" als Text sieht anders aus — dünner an den Enden, spitz statt rund. ------------------------------------------------------------ */ /* DIE PILLE BLEIBT 45 HOCH, AUCH MIT ✕ (nachgemessen am 08.09.2026 an I2000:17573;8823:10332 — 293 x 45). Die 12 senkrechtes Polster gelten für den TEXT: 12 + 21 + 12 = 45. Die ✕-Scheibe ist 28 hoch und damit höher als die Textzeile; mit denselben 12 wurde die Pille 52. In Figma sitzt die Scheibe bei y 8,5 — also 8,5 + 28 + 8,5 = 45. Deshalb steht hier 8,5 statt 12. Am Text ändert das nichts: er ist mittig ausgerichtet und liegt in beiden Fällen bei 12. Die 8,5 sind nicht gegriffen, sondern (45 − 28) / 2 aus zwei gemessenen Werten. */ .chip--entfernbar { padding-block: 8.5px; /* siehe oben */ padding-right: 9px; gap: var(--space-xs); /* 8 */ cursor: default; } /* AUF DEM TABLET IST DIE PILLE 48 STATT 45 (Figma I13970:16794;8823:10332, gemessen 09.09.2026). Der Text sitzt dort bei y 13,5 und die ✕-Scheibe bei y 10 — 13,5 + 21 + 13,5 und 10 + 28 + 10 ergeben beide 48. Die 10 stehen hier, weil die Scheibe die Höhe treibt, so wie die 8,5 es mobil tun. Der Text bleibt mittig und landet damit von allein auf 13,5. 13,5 IST KEIN WERT AUS DER SKALA — die kennt 12 und 16. Ich hatte das als versehentlich gezogene Instanz gemeldet; Lisi hat entschieden, die Figma-Maße zu nehmen (09.09.2026: „bitte alle maße aus figma nehmen"). Steht so hier und in OFFEN. */ @media (min-width: 768px) { .chip--entfernbar { padding-block: 10px; /* siehe oben */ } } .chip__entfernen { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-full); background-color: var(--text-opposite-background); color: var(--label-icon); cursor: pointer; } .chip__entfernen > svg { width: 7.3px; height: 7.3px; } /* ------------------------------------------------------------ Fokus ------------------------------------------------------------ Neutraler Ring aus base.css (§14). Das Entfernen-✕ ist ein eigenes Ziel und bekommt deshalb seinen eigenen Ring. ------------------------------------------------------------ */ .chip.is-focus, .chip__entfernen.is-focus { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* ------------------------------------------------------------ Abgrenzung — was der Chip NICHT ist ------------------------------------------------------------ · Status-Label (§5): nicht klickbar, nur abgeschwächter Stroke. Ein voller farbiger Border wäre als aktiver Chip zu lesen. · Listen-Control (§6): Ghost-Anatomie mit ⌄, kein Akzent-Border, kein ✓, kein Glow. Öffnet ein Menü, wählt nicht aus. Hat noch keine eigene Datei — Entwurf in examples/motion-demo.html. · Button: Pill + Text + Gray-900-Fill im Ruhezustand ist Chips vorbehalten (§10.1a). Ein so gefüllter Button wäre pixelidentisch mit einem inaktiven Chip. ------------------------------------------------------------ */