Farbwähler
Nativer Farbwähler (input type=color) als Formulardatum — z. B. eine Kunden-Markenfarbe. NICHT für Design-Entscheidungen im System (dafür gibt es semantische Tokens)
Beispiele
Markenfarbe wählen
Ungültiger Wert fällt auf Default
Deaktiviert
Mit Paletten-Vorschlägen (Markenfarben)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Beschriftung |
| name | string | "" | Feldname |
| value | string | "#16895f" | Wert (#rrggbb) |
| disabled | boolean | false | Deaktiviert |
| hint | string | "" | Hinweis |
| swatches | string | "" | Paletten-Vorschläge |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — 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 |
|---|---|
--color-input-border | var(--form-border, var(--color-border-default)) |
--color-input-radius | var(--radius-control) |
Genutzte Design-Tokens
border.hairlinecolor.border.defaultcolor.surface.defaultcolor.text.defaultcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultfont.family.monoform.borderopacity.disabledradius.controlradius.smsize.1size.10size.2size.4size.8text.mdtext.smweight.semibold
LLM-Notizen
Palette (v1.1)
swatches = Komma-Liste aus #rrggbb (max. 12, dedupliziert) → erscheint als Vorschlags-Palette im Browser-Farbwähler (datalist, kein JS) + sichtbare Vorschau-Chips. Klick-zum-Übernehmen wäre eine Component.