Supported Components (16): Can be configured via $.setup()

Not Supported (9): Must use direct initialisation

Purpose: Interactive container elements with hover effects and click handling

$.setup({
  '.demo-card': {
    component: 'card',
    options: {
      hoverable: true,
      shadow: 'medium',
      onClick: () => console.log('Card clicked!')
    }
  }
});

Purpose: Dialog overlays with backdrop, keyboard support, and animations

$.setup({
  '#demo-modal': {
    component: 'modal',
    options: {
      backdrop: true,
      backdropClose: true,
      keyboard: true,
      animation: 'fade'
    }
  }
});

Purpose: Tabbed content panels with animation support

$.setup({
  '#demo-tabs': {
    component: 'tabs',
    options: {
      activeIndex: 0,
      animation: 'fade'
    }
  }
});

Purpose: Collapsible content sections with single or multi-expand modes

$.setup({
  '#demo-accordion': {
    component: 'accordion',
    options: {
      multiExpand: false,
      animation: 'slide'
    }
  }
});

Purpose: Contextual popups on hover or click with multiple positioning options

$.setup({
  '[data-tooltip]': {
    component: 'tooltip',
    options: {
      position: 'top',
      trigger: 'hover',
      delay: 200
    }
  }
});

Purpose: Image/content slider with autoplay, indicators, and navigation arrows

$.setup({
  '#demo-carousel': {
    component: 'carousel',
    options: {
      autoplay: true,
      interval: 3000,
      loop: true,
      showArrows: true,
      showIndicators: true
    }
  }
});

Purpose: Dropdown menus with positioning and selection handling

$.setup({
  '#demo-dropdown': {
    component: 'dropdown',
    options: {
      items: [
        { text: 'Edit', value: 'edit' },
        { text: 'Duplicate', value: 'duplicate' },
        { divider: true },
        { text: 'Delete', value: 'delete', class: 'text-danger' }
      ],
      placement: 'bottom',
      closeOnSelect: true
    }
  }
});

Purpose: Status indicators and labels with variant styles

$.setup({
  '.demo-badge': {
    component: 'badge',
    options: {
      variant: 'primary',
      rounded: true
    }
  }
});

Purpose: Scroll-to-top button that appears after scrolling down

$.setup({
  '#back-to-top': {
    component: 'backToTop',
    options: {
      showAfter: 300,
      duration: 500,
      position: 'bottom-right'
    }
  }
});

Purpose: Radio/checkbox style button groups with single or multi-select

$.setup({
  '#demo-btngroup': {
    component: 'buttonGroup',
    options: {
      mode: 'single',  // or 'multiple'
      activeClass: 'active'
    }
  }
});

Purpose: Loading indicators with multiple animation types

$.setup({
  '#demo-loader-container': {
    component: 'loader',
    options: {
      type: 'spinner',
      size: 'medium',
      overlay: true,
      text: 'Loading...'
    }
  }
});

Purpose: Navigation trail showing current page location

$.setup({
  '#demo-breadcrumbs': {
    component: 'breadcrumbs',
    options: {
      items: [
        {text: 'Home', url: '#'},
        {text: 'Showcase', url: '#'},
        {text: 'Config Engine', active: true}
      ],
      separator: '/'
    }
  }
});

Purpose: Responsive navigation bar with brand, menu items, and actions

$.setup({
  '#demo-navbar': {
    component: 'navbar',
    options: {
      brand: {text: 'Domma', url: '#'},
      items: [
        {text: 'Home', url: '#', active: true},
        {text: 'Docs', url: '#'},
        {text: 'Examples', url: '#'}
      ],
      variant: 'light'
    }
  }
});

Purpose: Desktop browser notifications (requires permission)

$.setup({
  '#request-notification-btn': {
    events: {
      click: async () => {
        if ('Notification' in window) {
          const permission = await Notification.requestPermission();
          if (permission === 'granted') {
            Domma.elements.notify('Domma Notification', {
              body: 'Desktop notification configured via $.setup()!',
              icon: '../../assets/logo/domma-icon.svg'
            });
          }
        }
      }
    }
  }
});

Purpose: Countdown timer with optional visual display and controls

$.setup({
  '#demo-timer': {
    component: 'timer',
    options: {
      duration: 60000,  // 60 seconds
      format: 'mm:ss',
      showControls: true,
      autoStart: false
    }
  }
});

Purpose: Scheduled time-based alerts with localStorage persistence

$.setup({
  '#demo-alarm': {
    component: 'alarm',
    options: {
      alarms: [
        {
          time: '09:00',
          label: 'Morning Meeting',
          repeat: 'weekdays',
          enabled: true
        }
      ],
      storageKey: 'demo-alarms'
    }
  }
});

Current Time: --:--
Next Alarm: Morning Meeting at 09:00 (weekdays)

These components cannot be configured via $.setup() and must be initialized directly.

// Use direct init
const ac = Domma.elements.autocomplete('#search', {
  data: ['Apple', 'Banana', 'Cherry'],
  onSelect: (val) => console.log(val)
});

// Use direct init
const pb = Domma.elements.pillbox('#tags', {
  data: ['React', 'Vue', 'Angular'],
  creatable: true
});

// Use static method
Domma.elements.toast('Success!', {
  type: 'success',
  duration: 3000
});

// Use static methods
const ok = await Domma.elements.confirm('Delete?');
const name = await Domma.elements.prompt('Name:');

// Use direct init
const tree = Domma.elements.treeView('#tree', {
  items: [{label: 'Parent', children: [...]}]
});

  
Hero Section

// Load domma-tools.min.js first
const roller = Domma.elements.themeRoller('#container');
const editor = Domma.elements.editor('#editor');