Mixins

Mixins are reusable JavaScript functions that add shared behavior — form handling, overlays, or scroll effects — to your own Lit-based custom elements, so you don't duplicate that logic in every component you build.

Form Data

DileEmmitChange

Emits a standard element-changed event so form elements plug into the Form mixin's automations.

@dile/ui

DileFormChangeDetect

Detects changes across a form's fields and emits a single dile-form-changed event.

@dile/ui

DileForm

Adds getData, setData, validation and other form automations to your custom elements.

@dile/ui

Effects

DileCloseDocumentClick

Closes a custom element when the user clicks anywhere in the document.

@dile/ui

DileCloseOnEscPressed

Closes a custom element automatically when the user presses the Esc key.

@dile/ui

DileOverlay

Positions and toggles overlay elements with a smooth open and close animation.

@dile/ui

DileSelectable

Adds the properties and events needed to select one item from a list.

@dile/ui

DileSlideDown

Adds slideShow and slideHide methods to smoothly reveal or hide elements.

@dile/ui

Scroll

DileSmoothScrollElement

Smoothly scrolls the content of an element with its own scrolling area.

@dile/utils

DileSmoothScroll

Smoothly scrolls the whole document to a position or element.

@dile/utils