Varianten-Picker
Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante
Nutzt: ui.swatch
Beispiele
Farb-Swatches + Größen-Pills mit ausverkaufter Größe (klicken wechselt die Auswahl)
Farbe: Schwarz
GrößeGrößentabelle
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| colorLabel | string | "Farbe" | Label der Farbgruppe |
| colors | array | [] | Farben (Content-Daten) |
| sizesLabel | string | "Größe" | Label der Größengruppe |
| sizes | array | [] | Größen |
| sizeChartLabel | string | "" | Größentabelle-Link (leer = aus) |
| sizeChartUrl | string | "" | Größentabelle-Ziel |
* Pflicht-Prop
Events & Slots
Events:
⚡ variant — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--variant-picker-border-strong | var(--color-border-strong) |
--variant-picker-radius-control | var(--radius-control) |
--variant-picker-surface-default | var(--color-surface-default) |
--variant-picker-surface-sunken | var(--color-surface-sunken) |
--variant-picker-text-default | var(--color-text-default) |
--variant-picker-text-disabled | var(--color-text-disabled) |
--variant-picker-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.border.strongcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedfont.family.defaultradius.controlsize.12size.2size.4text.mdtext.smweight.semibold