Just before the page loads, there was a brief flash of unstyled HTML. This is now fixed, and the component is visible once it is ready.
Added new components tree and tree-item. Also included a short demo video.
Added new Component: split-panel with a short demo video on how it works.
A new attribute 'multiple' has been added to the Select component. Setting it to boolean True enables the selection of multiple options instead of just one.
Watch short video on menu component on how to build simple menu.
Now you can add classes to buttons for custom styling.
Example of styling shoelace button:
To view the code snippet from the widget, open the Changelog in a new tab.
Button class example: "pink"
You can paste the code snippet above the "sl-button" component into your code editor.
<style> sl-button.pink::part(base) { /* Set design tokens for height and border width */ --sl-input-height-medium: 48px; --sl-input-border-width: 4px; border-radius: 0; background-color: #ff1493; border-top-color: #ff7ac1; border-left-color: #ff7ac1; border-bottom-color: #ad005c; border-right-color: #ad005c; color: white; font-size: 1.125rem; box-shadow: 0 2px 10px #0002; transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease; } sl-button.pink::part(base):hover { transform: scale(1.05) rotate(-1deg); } sl-button.pink::part(base):active { border-top-color: #ad005c; border-right-color: #ff7ac1; border-bottom-color: #ff7ac1; border-left-color: #ad005c; transform: scale(1.05) rotate(-1deg) translateY(2px); } sl-button.pink::part(base):focus-visible { outline: dashed 2px deeppink; outline-offset: 4px; }</style>