Kirby 4.0.10: New tooling for moving to web components

[RasmusKjeldgaard]

With Kirby version 4.0.10, we are taking a major step with our tooling towards implementing Kirby as framework-agnostic web-components.

As a first small test of this new setup, we have converted Kirby Badge to a StencilJS component. For ease of use in Angular applications, StencilJS generates a small Angular proxy that enables input and output bindings and some other niceties, that means that the API does not change. This should make migration rather painless.
Even though the Angular proxy components ensure that this is not a breaking change, there are changes to the internals of the badge (among other things, it now has a ShadowRoot), which means that some of the custom styling ‘hacks’ that have previously been used to create e.g. a small badge, will now have no effect. To still serve the most common use-cases we have seen out there, badge now has:

✨ A size parameter, and a new size sm that will act as a ‘notification-dot’ style badge (See issue #498)
✨ The option of adding an icon when used in a Segmented Control (See issue #815)

With these small additions, we hope that the new Badge component will serve all your use-cases. If not, please reach out or create an issue to let us know.