Naming
Every component has its own tag instead of a shared kern-input type="…", because values, events, properties and popovers differ per type. The name tells the role.
| Role | Name | Examples |
|---|---|---|
| Display | noun | kern-date, kern-time, kern-status, kern-meter, kern-code |
| Control without a field box | noun | kern-switch, kern-checkbox, kern-calendar, kern-rating, kern-range |
| Typed field with its own value model | -input | kern-ip-input, kern-mac-input, kern-step-input, kern-file-input |
| Field that offers a picker popover | -picker | kern-date-picker, kern-time-picker, kern-color-picker |
Native counterparts keep their names: kern-input (the general text field), kern-textarea, kern-select. Display and input can live side by side, e.g. kern-date and kern-date-picker.
Events and properties
- Events start with
kern:kernChange(value applied),kernInput(while typing or dragging),kernClose,kernSelect, … - Texts the user sees are properties starting with
label(label-close,label-invalid). See Localization.