UI Components

<dile-button-icon>

Button component with integrated icon support using Lit templates or SVG. Extends dile-button with icon positioning features.

<dile-button>

Customizable button component with disabled and loading states. Supports form integration and extensive CSS property customization.

<dile-checkbox>

Customizable checkbox input element with disabled and error states. Supports validation messages and form integration with change events.

<dile-color-picker>

Color picker component with saturation/brightness square, hue slider, and hex input field. Form-integrated with validation support.

<dile-country-select>

Country selection component with multiple language support. Pre-configured country list with priority countries for quick access.

<dile-datepicker>

Date input component with integrated calendar picker. Based on lion-calendar with automatic localization and calendar navigation.

<dile-datetimepicker>

Date and time selection component extending dile-datepicker. Adds hours, minutes, seconds selection with combined YYYY-MM-DD HH:mm:ss format.

<dile-drop-file>

File upload component with drag-and-drop support, preview, and extension validation. Includes manual file selection and clear functionality.

<dile-form-separator>

Form section separator component with optional label. Customizable appearance with CSS properties for form organization.

<dile-input-search>

Search input component with icon and clear functionality. Emits search events with configurable delay between keystrokes.

<dile-input>

Text input field component with customizable design. Base component for many specialized input types in dile-components.

<dile-number-picker>

Integer selection component with increment/decrement buttons. Supports step, min, max, leading zeros, and digit display configuration.

<dile-otp-input>

One-time-password input component with automatic focus movement. Shows one box per character for 2FA code entry.

<dile-password>

Password input component extending dile-input. Includes optional show/hide password toggle for improved user experience.

<dile-radio-group-dialog>

A radio button group component displayed in a card dialog format with optional title and description. Extends dile-radio-group with enhanced UI presentation.

<dile-radio-group>

Radio button group component ensuring single selection. Includes dile-radio subcomponent with customizable labels and values.

<dile-range>

Range slider input component extending standard input range. Adds labels, messages, error states, and CSS customization support.

<dile-select-ajax-overlay>

Select component with API search results appearing in floating popup. Combines dile-select-ajax and dile-select-overlay functionality.

<dile-select-ajax>

Dynamic select component fetching options from JSON API endpoints. Includes search capability with configurable request delay.

<dile-select-boolean>

Boolean select component wrapping dile-select with true/false options. Provides proper boolean value handling for form fields.

<dile-select-overlay>

Accessible select alternative using custom overlay popup instead of native dropdown. Implements WAI-ARIA combobox pattern for styling control.

<dile-select>

Dropdown select component using native HTML select element. Adds styling, labels, error states, and custom change events.

<dile-switch>

Customizable switch input component for boolean values. Supports reactive labels, disabled state, and form integration.

<dile-textarea>

Text area input component with customizable design and sizing. Supports row configuration, labels, and message display.

<dile-time-picker>

Time selection component using numeric pickers for hours, minutes, seconds. Form-integrated with validation and error message support.

<dile-breadcrumbs>

Navigation breadcrumbs component supporting array-based and HTML markup approaches. Customizable separators and links for hierarchical navigation.

<dile-chip-tooltip>

Chip component that opens a tooltip on interaction. Supports customizable message, position, icons, and fade-in animations.

<dile-chip>

Small chip component with customizable icon. Dispatches events on icon click and supports flexible CSS styling properties.

<dile-confirm-text>

Modal confirm dialog requiring text input for confirmation. Extends dile-confirm for high-risk operations requiring user intent verification.

<dile-confirm>

Modal confirm dialog based on dile-modal. Displays custom content with cancel and accept buttons dispatching confirmation events.

<dile-floating-feedback>

Floating feedback message component appearing above trigger element. Supports customizable message, duration, and optional icon display.

<dile-info-box>

Information display box component with optional title, close button, and error state. Supports custom icons for different message types.

<dile-inline-feedback>

Feedback message component for user notifications. Supports positive, negative, neutral messages with optional auto-clear delays.

<dile-message>

Custom message component with close icon and animation. Supports property-based and method-based message display with auto-open options.

<dile-modal-help>

Help dialog component based on dile-modal with pre-built interface. Quick way to provide help messages triggered by button or icon.

<dile-modal>

Dialog box component with customizable appearance and behavior. Supports blocking mode, close icon, and programmatic open/close control.

<dile-rating-scale-question>

Semantic-differential rating scale component for opinion measurement. Provides bipolar adjectival scale with customizable labels.

<dile-rating>

Star rating component with 1-5 star display and selection. Supports float values with half-star display and disable changes option.

<dile-toast-persistent>

Always visible toast message component with smooth animation. Supports relative/fixed positioning with open/close/toggle methods.

<dile-toast>

Feedback notification component inspired by Material Design toast. Supports success, error, neutral status with customizable duration display.

<dile-tooltip>

Customizable tooltip component displaying message on hover or focus. Supports positioning options, arrows, and fade-in animations.

<dile-icon-switch-group>

Group container for multiple icon switches. Enables organized icon-based selection with shared styling and event handling.

<dile-icon-switch>

Switch component based on icons. Provides binary toggle functionality with custom icon display and change event dispatch.

<dile-icon>

Legacy icon component accepting any Lit template, raw SVG, or image. Lightweight container for custom icon implementations.

<dile-social-icon>

Social network icon component displaying curated social media icons. Legacy component with limited icon set available.

<dile-copy-markdown-url>

Component that fetches URL content and provides clickable link to copy to clipboard with visual feedback notification.

<dile-copy-text>

Clickable component for copying text to clipboard with visual feedback. Supports customizable feedback text and duration display.

<dile-editor>

Rich markdown editor component with WYSIWYG and plain markdown editing modes. Customizable toolbar and language support for interfaces.

<dile-graph>

Chart component based on Chart.js library. Supports line, bar, doughnut charts with customizable labels, datasets, and options.

<dile-html-transform>

Text transformation component that converts newlines to breaks and URLs to links. Uses Linkify-string for URL detection conversion.

<dile-light-mode-switch>

Light and dark theme toggle component with synchronization support. Updates HTML element class for theme switching functionality.

<dile-local-time>

Local time display component from ISO 8601 dates. Supports 12/24 hour format, seconds, timezone, and multiple language displays.

<dile-media-query>

Media query monitoring component that dispatches events on breakpoint changes. Enables responsive component behavior without CSS media queries.

<dile-network>

Network status monitoring component for online/offline detection. Displays customizable offline message with close functionality.

<dile-order-switch>

Order filter component toggling between ascending and descending. Useful for search result listings with order switching.

<dile-pages>

Page switching component displaying selected child element. Supports index or attribute-based selection with animation transitions.

<dile-pdf-viewer>

PDF viewer component with zoom, navigation, and download controls. Built with PDF.js for responsive accessible viewing.

<dile-progress-bar>

Progress bar component showing completion percentage. Supports optional title and animated display with CSS customization.

<dile-slide-show>

Content toggle component with smooth slide animation. Supports customizable open/close labels and target height configuration.

<dile-smooth-scroll>

Smooth scrolling API component for document and element sections. Provides methods for smooth scroll to top, bottom, or position.

<dile-time-duration>

Human-readable duration display component. Converts seconds into readable format like "1h 20m", with support for extended format, multiple languages, and customizable precision.

<dile-timer>

Countdown timer component with optional start, pause, reset controls. Emits events on tick and completion with customizable formatting.

<dile-web-visor>

iframe viewer component with zoom controls and full screen functionality. Customizable toolbar with zoom in, out, full screen options.

<dile-accordion>

Web component for creating a fully accessible UI for expandable accordion sections with keyboard navigation.

<dile-app-drawer>

Animated drawer menu component with Material Design appearance. Provides smooth slide animations from top or left viewport sides.

<dile-floating-menu-item>

Navigation link component for floating menus. Declarative way to build menu items with customizable colors and hover effects.

<dile-floating-menu>

Absolute positioned button with floating menu container. Displays navigation links with configurable positioning and customizable styling.

<dile-hamburger>

Hamburger menu icon component with smooth CSS animation between open and closed states. Controlled via boolean active property.

<dile-menu-hamburger>

Complete hamburger menu combining dile-hamburger and dile-app-drawer components. Provides full menu implementation with open/close/toggle methods.

<dile-menu-overlay>

Overlay menu component with trigger and content slots. Closes on outside clicks and manages multiple menus on same page.

<dile-selector-box>

Specialized selector component with box-based design for selection items. Useful for presenting available actions in flexible interface.

<dile-selector-overlay>

Selector component hidden behind capsule trigger button. Shows options in overlay menu combining dile-menu-overlay and dile-selector.

<dile-selector>

Generic selector interface component for value selection between options. Supports index or attribute-based selection with URL hash linking.

<dile-slide-menu>

Menu component with smooth slide animation for show/hide. Includes open, close, toggle methods with customizable label.

<dile-tabs>

Tab navigation component with index or attribute-based selection. Supports URL hash linking and integration with page components.

<dile-spinner-bar>

Full-width horizontal loading bar component with moving gradient animation. Customizable height, colors, and animation timing.

<dile-spinner-block>

Block-style spinner component for section loading states. Always active display useful for page section loading indication.

<dile-spinner-horizontal>

Horizontal loading animation component with animated lines. Customizable height, colors, and animation timing for loading states.

<dile-spinner-icon>

Spinning loader-circle icon component from Lucide Icons library. Displays rotating icon for content loading indication.

<dile-spinner-modal>

Modal spinner component blocking page interface during loading. Extends dile-spinner with modal overlay and customizable background colors.

<dile-spinner>

Loading spinner component for indicating background processing. Inline display with customizable colors and dot sizes.

<dile-card-slide>

Collapsible card component with smooth slide-down and slide-up animation. Extends dile-card with toggle behavior and chevron icon.

<dile-card>

Container component for card-based layouts with optional title and footer slots. Supports shadow styling and flexible content organization.

<dile-nav>

Navigation bar component with title, menu, and actions slots. Supports flexible content organization and customizable styling.