Shoelace Package

Added two events for the sl-tab-group component.

Added the following events for drawer and dialog

And a new attribute, prevent_close: When the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing Escape, the dialog will remain open if this attribute is set to true.

You can now apply custom class to dialog.

Added  textarea component, and all components have been updated to the latest version of Shoelace.

Fixed the default "dark" theme for button component.

Hello everyone 👋, I want to provide an update on my Shoelace Package.

For everyone who is using it, this update was very much needed. I have rebuilt the docs, so it is now much easier to navigate and learn more about each component.

Updates include:

• Each component has been updated to the latest version.
• Each component's default theme is now set to dark.
• You can now import each component separately without installing the Shoelace Package.
• You can duplicate the component preview to quickly get started with already filled-out attributes.
• I added new attributes to many components and fixed lots of bugs.
• Finally, I prepared the UI for the Web Awesome components library, which is the next iteration of Shoelace. Once it is live, I will add components to the package.

There was a bug when sometimes the single value for the select component was not working properly, as the value attribute was not added to the sl-select element in HTML. I added a fix so that the value attributes are added with JS for both single select and multiple select.

This update introduces a supercharged Input component: a powerful, highly configurable input element for your Toddle project. You can now build powerful forms with minimal effort using this input component that comes with built-in accessibility features right out of the box.

Input preview is not yet available. Visit official Shoealce input page for more details. For any questions, please reach out to me on Discord.

Added new attribute for button component.

TYPE

The type of button. Note that the default value is button instead of submit, which is opposite of how native <button> elements behave. When the type is submit, the button will submit the surrounding form.

Detail components now support four different events and two actions (Open and Hide Details) that can be triggered anywhere in your workflow.

New attribute: max-options-visible
The maximum number of selected options to show when multiple is true. After the maximum, ”+n” will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit. Default: 3

New component: copy-button-custom-icons. This one allows you to add any icon as a slot for copy, success, and error states.