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.

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 events for Alert Component

Added action: "showTabPanel" for opening specific panel in tabs. 

Now you can add a custom ID attribute to the dialog or drawer component. With this, you can open or hide different dialogs/drawers from any workflow using custom actions:

Drawer: openDrawerById and hideDrawerById

Dialog: openDialogById and hideDialogById

New component released: QR Code

Two new components released.

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.

Watch Demo

Watch short video on menu component on how to build simple menu.

Button Classes

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>