Interactive Modules

/**
 * Initialize dropdown functionality on elements
 * @param settings - Configuration object for dropdown behavior
 */
$('.ui.dropdown').dropdown(settings);

interface DropdownSettings {
  // Behavior
  on: 'click' | 'hover';              // Trigger event for showing
  action: 'activate' | 'select' | 'combo' | 'nothing' | 'hide'; // Action on selection
  allowReselection: boolean;          // Allow selecting current value again
  allowAdditions: boolean;            // Allow user to add custom options
  hideAdditions: boolean;             // Hide custom additions after selection
  
  // Selection
  clearable: boolean;                 // Allow clearing selection
  forceSelection: boolean;            // Force valid selection
  selectOnKeydown: boolean;           // Select on keyboard navigation
  maxSelections: number;              // Limit number of selections (for multi-select)
  
  // Search
  search: boolean;                    // Enable search functionality
  searchDelay: number;                // Delay before search triggers (ms)
  fullTextSearch: boolean;            // Search entire text vs just beginning
  preserveHTML: boolean;              // Preserve HTML in search results
  
  // Display
  placeholder: string;                // Placeholder text
  keepOnScreen: boolean;              // Keep dropdown on screen
  match: 'both' | 'value' | 'text';  // How to match search terms
  direction: 'auto' | 'upward' | 'downward'; // Dropdown direction
  
  // Animation
  duration: number;                   // Animation duration (ms)
  transition: string;                 // CSS transition type
  
  // Callbacks
  onShow: () => void;                 // Before dropdown shows
  onHide: () => void;                 // Before dropdown hides
  onChange: (value: any, text: string, $choice: JQuery) => void;
  onAdd: (addedValue: any, addedText: string, $addedChoice: JQuery) => void;
  onRemove: (removedValue: any, removedText: string, $removedChoice: JQuery) => void;
  onLabelCreate: (value: any, text: string) => JQuery;
  onNoResults: (searchTerm: string) => void;
}

// Show/hide dropdown
$('.ui.dropdown').dropdown('show');
$('.ui.dropdown').dropdown('hide');
$('.ui.dropdown').dropdown('toggle');

// Clear and set values
$('.ui.dropdown').dropdown('clear');
$('.ui.dropdown').dropdown('set selected', value);
$('.ui.dropdown').dropdown('set text', text);
$('.ui.dropdown').dropdown('set value', value);

// Get values
$('.ui.dropdown').dropdown('get value');
$('.ui.dropdown').dropdown('get text');
$('.ui.dropdown').dropdown('get item', value);

// Refresh and restore
$('.ui.dropdown').dropdown('refresh');
$('.ui.dropdown').dropdown('restore defaults');
$('.ui.dropdown').dropdown('save defaults');

// Validation
$('.ui.dropdown').dropdown('is selection');
$('.ui.dropdown').dropdown('is animated');
$('.ui.dropdown').dropdown('is visible');
$('.ui.dropdown').dropdown('is hidden');

<!-- Basic dropdown -->
<div class="ui selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
    <div class="item" data-value="us">United States</div>
    <div class="item" data-value="ca">Canada</div>
    <div class="item" data-value="uk">United Kingdom</div>
  </div>
</div>

<script>
$('.ui.dropdown').dropdown();
</script>

/**
 * Initialize modal functionality on elements
 * @param settings - Configuration object for modal behavior
 */
$('.ui.modal').modal(settings);

interface ModalSettings {
  // Behavior
  allowMultiple: boolean;             // Allow multiple modals
  detachable: boolean;                // Move modal to body
  autofocus: boolean;                 // Auto focus first input
  restoreFocus: boolean;              // Restore focus on close
  observeChanges: boolean;            // Watch for DOM changes
  
  // Display
  blurring: boolean;                  // Blur background
  inverted: boolean;                  // Inverted modal styling
  closable: boolean;                  // Allow closing modal
  dimmerSettings: object;             // Dimmer configuration
  
  // Animation
  transition: string;                 // CSS transition type
  duration: number;                   // Animation duration (ms)
  
  // Callbacks
  onShow: () => void;                 // Before modal shows
  onVisible: () => void;              // After modal is visible
  onHide: () => boolean | void;       // Before modal hides (return false to prevent)
  onHidden: () => void;               // After modal is hidden
  onApprove: () => boolean | void;    // When approve button clicked
  onDeny: () => boolean | void;       // When deny button clicked
}

// Show/hide modal
$('.ui.modal').modal('show');
$('.ui.modal').modal('hide');
$('.ui.modal').modal('toggle');

// Refresh and attach events
$('.ui.modal').modal('refresh');
$('.ui.modal').modal('attach events', selector, event);

// State checks
$('.ui.modal').modal('is active');
$('.ui.modal').modal('can fit');

<!-- Basic modal -->
<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">Modal Title</div>
  <div class="content">
    <p>Modal content goes here.</p>
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui primary approve button">Save</div>
  </div>
</div>

<script>
$('.ui.modal').modal({
  onApprove: function() {
    // Save logic here
    return true; // Close modal
  }
});

// Show modal
$('.show.modal.button').click(function() {
  $('.ui.modal').modal('show');
});
</script>

/**
 * Initialize accordion functionality on elements
 * @param settings - Configuration object for accordion behavior
 */
$('.ui.accordion').accordion(settings);

interface AccordionSettings {
  // Behavior
  exclusive: boolean;                 // Only one panel open at a time
  on: 'click' | 'hover';             // Trigger event
  animateChildren: boolean;           // Animate child accordions
  closeNested: boolean;               // Close nested accordions when parent closes
  collapsible: boolean;               // Allow all panels to be closed
  
  // Animation
  duration: number;                   // Animation duration (ms)
  easing: string;                     // CSS easing function
  
  // Callbacks
  onOpening: () => void;              // Before panel opens
  onOpen: () => void;                 // After panel opens
  onClosing: () => void;              // Before panel closes
  onClose: () => void;                // After panel closes
  onChange: () => void;               // When panel state changes
}

// Open/close panels
$('.ui.accordion').accordion('open', index);
$('.ui.accordion').accordion('close', index);
$('.ui.accordion').accordion('toggle', index);

// Close all panels
$('.ui.accordion').accordion('close others', index);

// Refresh accordion
$('.ui.accordion').accordion('refresh');

<!-- Basic accordion -->
<div class="ui accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="active content">
    <p>A dog is a type of domesticated animal.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div class="content">
    <p>There are many breeds of dogs.</p>
  </div>
</div>

<script>
$('.ui.accordion').accordion();
</script>

/**
 * Initialize popup functionality on elements
 * @param settings - Configuration object for popup behavior
 */
$('.ui.popup').popup(settings);

interface PopupSettings {
  // Positioning
  position: string;                   // Popup position relative to trigger
  boundary: string | JQuery;          // Boundary element
  context: string | JQuery;           // Context element for positioning
  scrollContext: string | JQuery;     // Scrolling context
  jitter: number;                     // Jitter amount for positioning
  
  // Behavior
  on: 'hover' | 'click' | 'focus' | 'manual'; // Trigger event
  delay: { show: number, hide: number }; // Show/hide delays
  hoverable: boolean;                 // Keep popup open when hovered
  closable: boolean;                  // Allow closing popup
  addTouchEvents: boolean;            // Add touch events for mobile
  hideOnScroll: 'auto' | boolean;     // Hide on scroll behavior
  
  // Content
  popup: string | JQuery;             // Popup element or HTML
  inline: boolean;                    // Use inline popup
  preserve: boolean;                  // Preserve popup in DOM
  prefer: 'adjacent' | 'opposite';    // Preferred positioning
  
  // Animation
  transition: string;                 // CSS transition type
  duration: number;                   // Animation duration (ms)
  
  // Callbacks
  onCreate: () => void;               // When popup is created
  onRemove: () => void;               // When popup is removed
  onShow: () => void;                 // Before popup shows
  onVisible: () => void;              // After popup is visible
  onHide: () => void;                 // Before popup hides
  onHidden: () => void;               // After popup is hidden
}

// Show/hide popup
$('.element').popup('show');
$('.element').popup('hide');
$('.element').popup('toggle');

// Position and refresh
$('.element').popup('reposition');
$('.element').popup('refresh');

// State checks
$('.element').popup('is visible');
$('.element').popup('is hidden');
$('.element').popup('exists');

// Get popup element
$('.element').popup('get popup');

<!-- Basic popup -->
<div class="ui button" data-content="This is a popup">
  Hover me
</div>

<!-- Popup with custom HTML -->
<div class="ui button" data-html="<div class='header'>Popup Title</div><div class='content'>Popup content</div>">
  Custom popup
</div>

<script>
$('.ui.button').popup();

// Popup with settings
$('.custom.button').popup({
  position: 'top center',
  delay: { show: 300, hide: 800 }
});
</script>

/**
 * Initialize progress functionality on elements
 * @param settings - Configuration object for progress behavior
 */
$('.ui.progress').progress(settings);

interface ProgressSettings {
  // Behavior
  autoSuccess: boolean;               // Auto-trigger success state at 100%
  showActivity: boolean;              // Show activity indicator
  limitValues: boolean;               // Limit values to 0-100 range
  
  // Display
  label: 'percent' | 'ratio' | 'value'; // Label display type
  precision: number;                  // Decimal precision for display
  
  // Animation
  duration: number;                   // Animation duration (ms)
  
  // Callbacks
  onChange: (percent: number, value: number, total: number) => void;
  onSuccess: (total: number) => void;
  onActive: (value: number, total: number) => void;
  onError: (value: number, total: number) => void;
  onWarning: (value: number, total: number) => void;
}

// Set progress values
$('.ui.progress').progress('set progress', percent);
$('.ui.progress').progress('set bar', percent);
$('.ui.progress').progress('increment', value);
$('.ui.progress').progress('decrement', value);

// Update total
$('.ui.progress').progress('update progress', value);
$('.ui.progress').progress('set total', value);

// States
$('.ui.progress').progress('complete');
$('.ui.progress').progress('reset');
$('.ui.progress').progress('set success');
$('.ui.progress').progress('set warning');
$('.ui.progress').progress('set error');

// Get values
$('.ui.progress').progress('get percent');
$('.ui.progress').progress('get value');
$('.ui.progress').progress('get total');
$('.ui.progress').progress('is complete');
$('.ui.progress').progress('is success');
$('.ui.progress').progress('is warning');
$('.ui.progress').progress('is error');

<!-- Basic progress bar -->
<div class="ui progress" data-percent="32">
  <div class="bar">
    <div class="progress">32%</div>
  </div>
  <div class="label">Downloading Files</div>
</div>

<!-- Progress with custom total -->
<div class="ui progress" data-value="3" data-total="10">
  <div class="bar">
    <div class="progress">3 of 10</div>
  </div>
  <div class="label">Tasks Complete</div>
</div>

<script>
$('.ui.progress').progress();

// Update progress programmatically
$('.ui.progress').progress('set progress', 60);
</script>

/**
 * Initialize checkbox functionality on elements
 * @param settings - Configuration object for checkbox behavior
 */
$('.ui.checkbox').checkbox(settings);

interface CheckboxSettings {
  // Behavior
  uncheckable: 'auto' | boolean;      // Allow unchecking radio buttons
  fireOnInit: boolean;                // Fire callbacks on initialization
  
  // Callbacks
  onChecked: () => void;              // When checkbox is checked
  onUnchecked: () => void;            // When checkbox is unchecked
  onDeterminate: () => void;          // When checkbox becomes determinate
  onIndeterminate: () => void;        // When checkbox becomes indeterminate
  onChange: () => void;               // When checkbox state changes  
  onEnable: () => void;               // When checkbox is enabled
  onDisable: () => void;              // When checkbox is disabled
}

// Check/uncheck
$('.ui.checkbox').checkbox('check');
$('.ui.checkbox').checkbox('uncheck');
$('.ui.checkbox').checkbox('toggle');

// Indeterminate state
$('.ui.checkbox').checkbox('indeterminate');
$('.ui.checkbox').checkbox('determinate');

// Enable/disable
$('.ui.checkbox').checkbox('enable');
$('.ui.checkbox').checkbox('disable');

// State checks
$('.ui.checkbox').checkbox('is checked');
$('.ui.checkbox').checkbox('is unchecked');
$('.ui.checkbox').checkbox('is indeterminate');
$('.ui.checkbox').checkbox('can change');

<!-- Basic checkbox -->
<div class="ui checkbox">
  <input type="checkbox" name="example">
  <label>Make my profile visible</label>
</div>

<!-- Radio buttons -->
<div class="ui radio checkbox">
  <input type="radio" name="frequency" value="weekly">
  <label>Weekly</label>
</div>
<div class="ui radio checkbox">
  <input type="radio" name="frequency" value="monthly">
  <label>Monthly</label>
</div>

<!-- Toggle checkbox -->
<div class="ui toggle checkbox">
  <input type="checkbox" name="public">
  <label>Subscribe to weekly newsletter</label>
</div>

<script>
$('.ui.checkbox').checkbox();
</script>

$('.ui.module').moduleName();              // Initialize with defaults
$('.ui.module').moduleName(settings);     // Initialize with settings
$('.ui.module').moduleName('method');     // Call method
$('.ui.module').moduleName('method', param); // Call method with parameter

$('.ui.module').moduleName('destroy');    // Remove module and cleanup
$('.ui.module').moduleName('refresh');    // Refresh module state  
$('.ui.module').moduleName('setting', key, value); // Get/set setting

/**
 * Initialize dimmer functionality on elements
 * @param settings - Configuration object for dimmer behavior
 */
$('.ui.dimmer').dimmer(settings);

interface DimmerSettings {
  // Behavior
  closable: boolean;              // Allow closing dimmer by clicking
  useCSS: boolean;                // Use CSS animations
  variation: string;              // Dimmer variation class
  
  // Animation
  transition: string;             // CSS transition type
  duration: { show: number, hide: number }; // Animation durations
  
  // Callbacks
  onShow: () => void;             // Before dimmer shows
  onVisible: () => void;          // After dimmer is visible
  onHide: () => void;             // Before dimmer hides
  onHidden: () => void;           // After dimmer is hidden
  onChange: () => void;           // When dimmer state changes
}

// Show/hide dimmer
$('.ui.dimmer').dimmer('show');
$('.ui.dimmer').dimmer('hide');
$('.ui.dimmer').dimmer('toggle');

// Add/remove content
$('.ui.dimmer').dimmer('add content', element);

// State checks
$('.ui.dimmer').dimmer('is active');
$('.ui.dimmer').dimmer('is animating');
$('.ui.dimmer').dimmer('is dimmer');
$('.ui.dimmer').dimmer('is dimmable');
$('.ui.dimmer').dimmer('is disabled');
$('.ui.dimmer').dimmer('is enabled');
$('.ui.dimmer').dimmer('has dimmer');

/**
 * Initialize sidebar functionality on elements
 * @param settings - Configuration object for sidebar behavior
 */
$('.ui.sidebar').sidebar(settings);

interface SidebarSettings {
  // Behavior
  context: string | JQuery;       // Context element for sidebar
  exclusive: boolean;             // Hide other sidebars when showing
  closable: boolean;              // Allow closing sidebar
  dimPage: boolean;               // Dim page when sidebar is visible
  scrollLock: boolean;            // Lock page scroll when sidebar is visible
  returnScroll: boolean;          // Return to scroll position on hide
  
  // Animation
  transition: string;             // CSS transition type
  mobileTransition: string;       // Mobile-specific transition
  
  // Callbacks
  onVisible: () => void;          // When sidebar becomes visible
  onShow: () => void;             // Before sidebar shows
  onChange: () => void;           // When sidebar visibility changes
  onHide: () => void;             // Before sidebar hides
  onHidden: () => void;           // After sidebar is hidden
}

// Show/hide sidebar
$('.ui.sidebar').sidebar('show');
$('.ui.sidebar').sidebar('hide');
$('.ui.sidebar').sidebar('toggle');

// State checks
$('.ui.sidebar').sidebar('is visible');
$('.ui.sidebar').sidebar('is hidden');

/**
 * Initialize tab functionality on elements
 * @param settings - Configuration object for tab behavior
 */
$('.ui.tab').tab(settings);

interface TabSettings {
  // Behavior
  auto: boolean;                  // Auto-refresh tab content
  deactivate: 'siblings' | 'all'; // How to deactivate tabs
  history: boolean;               // Use browser history
  ignoreFirstLoad: boolean;       // Ignore first load for history
  evaluateScripts: boolean;       // Evaluate scripts in loaded content
  
  // Context
  context: string | JQuery;       // Context for tab activation
  childrenOnly: boolean;          // Only look for direct children
  maxDepth: number;               // Maximum nesting depth
  
  // Callbacks
  onFirstLoad: (tabPath: string, parameterArray: any[], historyEvent: any) => void;
  onLoad: (tabPath: string, parameterArray: any[], historyEvent: any) => void;
  onVisible: (tabPath: string) => void;
  onRequest: (tabPath: string) => void;
}

// Change tab
$('.ui.tab').tab('change tab', path);

// Get tab
$('.ui.tab').tab('get path');
$('.ui.tab').tab('is tab');

// State checks
$('.ui.tab').tab('cache read', path);
$('.ui.tab').tab('cache add', path, content);
$('.ui.tab').tab('cache remove', path);

/**
 * Initialize rating functionality on elements
 * @param settings - Configuration object for rating behavior
 */
$('.ui.rating').rating(settings);

interface RatingSettings {
  // Behavior
  initialRating: number;          // Initial rating value
  maxRating: number;              // Maximum rating value
  clearable: 'auto' | boolean;    // Allow clearing rating
  fireOnInit: boolean;            // Fire callbacks on initialization
  
  // Callbacks
  onRate: (value: number) => void; // When rating is set
}

// Set/get rating
$('.ui.rating').rating('set rating', rating);
$('.ui.rating').rating('get rating');
$('.ui.rating').rating('disable');
$('.ui.rating').rating('enable');
$('.ui.rating').rating('clear rating');

/**
 * Initialize search functionality on elements
 * @param settings - Configuration object for search behavior
 */
$('.ui.search').search(settings);

interface SearchSettings {
  // API
  apiSettings: object;            // API settings for remote search
  source: any[];                  // Local search source data
  searchFields: string[];         // Fields to search in source
  displayField: string;           // Field to display in results
  
  // Behavior
  minCharacters: number;          // Minimum characters to trigger search
  selectFirstResult: boolean;     // Select first result by default
  showNoResults: boolean;         // Show message when no results
  searchDelay: number;            // Delay before search triggers
  
  // Callbacks
  onSelect: (result: any, response: any) => boolean;
  onResultsAdd: (html: string) => void;
  onSearchQuery: (query: string) => void;
  onResults: (response: any) => void;
  onResultsOpen: () => void;
  onResultsClose: () => void;
}

// Search control  
$('.ui.search').search('query');
$('.ui.search').search('display message', text, type);
$('.ui.search').search('cancel query');
$('.ui.search').search('search local', searchTerm);
$('.ui.search').search('has minimum characters');
$('.ui.search').search('search remote', searchTerm);
$('.ui.search').search('search object', searchTerm, source, searchFields);

// Results
$('.ui.search').search('cancel query');
$('.ui.search').search('is focused');
$('.ui.search').search('is visible');
$('.ui.search').search('is empty');
$('.ui.search').search('get result', value);
$('.ui.search').search('set value', value);

/**
 * Initialize transition functionality on elements
 * @param settings - Configuration object for transition behavior
 */
$('.element').transition(animation);
$('.element').transition(settings);

interface TransitionSettings {
  // Animation
  animation: string;              // Animation name
  interval: number;               // Interval between group animations
  reverse: 'auto' | boolean;      // Reverse animation direction
  displayType: string;            // Display type after animation
  duration: number;               // Animation duration (ms)
  useFailSafe: boolean;           // Use failsafe for animation completion
  allowRepeats: boolean;          // Allow repeating same animation
  queue: boolean;                 // Queue animations
  
  // Callbacks
  onStart: () => void;            // Before animation starts
  onComplete: () => void;         // After animation completes
  onShow: () => void;             // When element shows
  onHide: () => void;             // When element hides
}

// Animation control
$('.element').transition('fade');
$('.element').transition('fade up');
$('.element').transition('scale');
$('.element').transition('fly left');

// Queue management
$('.element').transition('stop');
$('.element').transition('stop all');
$('.element').transition('clear queue');
$('.element').transition('repaint');

// State checks
$('.element').transition('is visible');
$('.element').transition('is animating');
$('.element').transition('is looping');
$('.element').transition('is supported');

/**
 * Initialize sticky functionality on elements
 * @param settings - Configuration object for sticky behavior
 */
$('.ui.sticky').sticky(settings);

interface StickySettings {
  // Behavior
  pushing: boolean;               // Push following content down
  jitter: number;                 // Jitter amount for calculations
  observeChanges: boolean;        // Watch for DOM changes
  
  // Context
  context: string | JQuery;       // Scrolling context
  scrollContext: string | JQuery; // Scroll container
  
  // Offsets
  offset: number;                 // Offset from top when stuck
  bottomOffset: number;           // Offset from bottom
  
  // Callbacks
  onReposition: () => void;       // When sticky repositions
  onScroll: () => void;           // On scroll events
  onStick: () => void;            // When element becomes stuck
  onUnstick: () => void;          // When element becomes unstuck
  onTop: () => void;              // When element reaches top
  onBottom: () => void;           // When element reaches bottom
}

// Refresh and destroy
$('.ui.sticky').sticky('refresh');
$('.ui.sticky').sticky('destroy');

/**
 * Initialize API functionality on elements
 * @param settings - Configuration object for API behavior
 */
$('.element').api(settings);

interface APISettings {
  // Request
  action: string;                     // API action to use
  url: string;                        // API endpoint URL
  urlData: object;                    // Data to pass in URL
  response: boolean;                  // Process API response
  responseAsync: boolean;             // Process response asynchronously
  
  // Data
  method: 'post' | 'get' | 'put' | 'delete'; // HTTP method
  data: object;                       // Data to send with request
  dataType: 'json' | 'xml' | 'html';  // Expected response type
  
  // Behavior
  cache: boolean | string;            // Cache responses
  stateContext: string | JQuery;      // Context for loading state
  encodeParameters: boolean;          // URL encode parameters
  
  // Callbacks
  beforeSend: (settings: object) => object;
  beforeXHR: (xhr: XMLHttpRequest) => void;
  onRequest: (promise: any, xhr: XMLHttpRequest) => void;
  onResponse: (response: any) => any;
  onSuccess: (response: any, element: JQuery, xhr: XMLHttpRequest) => void;
  onComplete: (response: any, element: JQuery, xhr: XMLHttpRequest) => void;
  onFailure: (response: any, element: JQuery) => void;
  onError: (errorMessage: string, element: JQuery, xhr: XMLHttpRequest) => void;
  onAbort: (errorMessage: string, element: JQuery, xhr: XMLHttpRequest) => void;
}

// Request control
$('.element').api('query');
$('.element').api('add url data', data);
$('.element').api('get request');
$('.element').api('abort');

// State checks
$('.element').api('was cancelled');
$('.element').api('is disabled');
$('.element').api('is loading');
$('.element').api('is mocked');

// Caching
$('.element').api('remove templated url');
$('.element').api('get url data');
$('.element').api('cache write', url, response);
$('.element').api('cache read', url);

/**
 * Initialize embed functionality on elements
 * @param settings - Configuration object for embed behavior
 */
$('.ui.embed').embed(settings);

interface EmbedSettings {
  // Content
  source: string;                     // Content source (youtube, vimeo, etc.)
  id: string;                         // Content ID
  url: string;                        // Direct URL for content
  
  // Display
  autoplay: boolean;                  // Autoplay embedded content
  color: string;                      // Player color theme
  hd: boolean;                        // HD quality when available
  brandedUI: boolean;                 // Show branded player UI
  
  // Callbacks
  onCreate: (url: string) => void;    // When embed is created
  onDisplay: () => void;              // When embed is displayed
  onPlaceholderDisplay: () => void;   // When placeholder is displayed
  onEmbed: (parameters: object) => object; // Modify embed parameters
}

// Show/hide embed
$('.ui.embed').embed('show');
$('.ui.embed').embed('hide');

// Control
$('.ui.embed').embed('reset');
$('.ui.embed').embed('get id');
$('.ui.embed').embed('get placeholder');
$('.ui.embed').embed('get sources');
$('.ui.embed').embed('get type');
$('.ui.embed').embed('get url');
$('.ui.embed').embed('has placeholder');

/**
 * Initialize nag functionality on elements
 * @param settings - Configuration object for nag behavior
 */
$('.ui.nag').nag(settings);

interface NagSettings {
  // Behavior
  persist: boolean;                   // Persist across browser sessions
  displayTime: number;                // Time to show nag automatically
  
  // Storage
  key: string;                        // Storage key for persistence
  value: any;                         // Storage value
  
  // Animation
  speed: number;                      // Animation speed
  easing: string;                     // CSS easing function
  
  // Callbacks
  onHide: () => void;                 // When nag is hidden
  onShow: () => void;                 // When nag is shown
  onVisible: () => void;              // When nag becomes visible
}

// Show/hide nag
$('.ui.nag').nag('show');
$('.ui.nag').nag('hide');

// Storage
$('.ui.nag').nag('clear');

/**
 * Initialize shape functionality on elements
 * @param settings - Configuration object for shape behavior
 */
$('.ui.shape').shape(settings);

interface ShapeSettings {
  // Animation
  duration: number;                   // Animation duration (ms)
  beforeChange: () => void;           // Before shape changes
  onChange: () => void;               // During shape change
  
  // Callbacks
  onSideChange: (activeSide: string) => void;
}

// Flip shape
$('.ui.shape').shape('flip up');
$('.ui.shape').shape('flip down');
$('.ui.shape').shape('flip left');  
$('.ui.shape').shape('flip right');
$('.ui.shape').shape('flip over');
$('.ui.shape').shape('flip back');

// State checks
$('.ui.shape').shape('is animating');
$('.ui.shape').shape('reset');
$('.ui.shape').shape('queue');
$('.ui.shape').shape('repaint');
$('.ui.shape').shape('set default side');
$('.ui.shape').shape('get transform down');
$('.ui.shape').shape('get transform left');
$('.ui.shape').shape('get transform right');
$('.ui.shape').shape('get transform up');
$('.ui.shape').shape('get transform over');
$('.ui.shape').shape('get transform back');

/**
 * Initialize video functionality on elements
 * @param settings - Configuration object for video behavior
 */
$('.ui.video').video(settings);

interface VideoSettings {
  // Behavior
  onChange: (event: Event) => void;   // When video state changes
  onPause: (event: Event) => void;    // When video is paused
  onPlay: (event: Event) => void;     // When video starts playing
  onStop: (event: Event) => void;     // When video stops
}

// Playback control
$('.ui.video').video('play');
$('.ui.video').video('pause');
$('.ui.video').video('stop');

// State checks
$('.ui.video').video('is playing');
$('.ui.video').video('get video');

/**
 * Initialize visibility functionality on elements
 * @param settings - Configuration object for visibility behavior
 */
$('.element').visibility(settings);

interface VisibilitySettings {
  // Behavior
  once: boolean;                      // Fire callbacks only once
  continuous: boolean;                // Fire callbacks continuously
  offset: number;                     // Offset for visibility calculations
  includeMargin: boolean;             // Include margin in calculations
  
  // Context
  context: string | JQuery;           // Scrolling context
  refreshOnLoad: boolean;             // Refresh on window load
  refreshOnResize: boolean;           // Refresh on window resize
  checkOnRefresh: boolean;            // Check visibility on refresh
  
  // Thresholds
  initialCheck: boolean;              // Check on initialization
  zIndex: number;                     // Z-index for visibility
  
  // Callbacks - Viewport visibility
  onOnScreen: () => void;             // When element enters viewport
  onOffScreen: () => void;            // When element leaves viewport
  onPassing: () => void;              // When element is passing through viewport
  onTopVisible: () => void;           // When top of element is visible
  onBottomVisible: () => void;        // When bottom of element is visible
  onTopPassed: () => void;            // When top of element has passed
  onBottomPassed: () => void;         // When bottom of element has passed
  
  // Callbacks - Fixed visibility
  onFixed: () => void;                // When element becomes fixed
  onUnfixed: () => void;              // When element becomes unfixed
  
  // Callbacks - Percentage based
  onUpdate: (calculations: object) => void; // On visibility calculations update
}

// State checks
$('.element').visibility('is on screen');
$('.element').visibility('is off screen');
$('.element').visibility('is visible');
$('.element').visibility('is hidden');

// Get calculations
$('.element').visibility('get screen calculations');
$('.element').visibility('get element calculations');
$('.element').visibility('get element position');
$('.element').visibility('get screen size');

// Refresh
$('.element').visibility('refresh');

/**
 * Initialize state functionality on elements  
 * @param settings - Configuration object for state behavior
 */
$('.element').state(settings);

interface StateSettings {
  // Behavior
  context: string | JQuery;           // Context for state changes
  automatic: boolean;                 // Automatically handle states
  sync: boolean;                      // Sync states across elements
  flashError: boolean;                // Flash error state briefly
  
  // Text
  text: {
    inactive: string;                 // Inactive state text
    active: string;                   // Active state text
    activating: string;               // Activating state text
    deactivating: string;             // Deactivating state text
    success: string;                  // Success state text
    error: string;                    // Error state text
    warning: string;                  // Warning state text
  };
  
  // Callbacks
  onActivate: () => void;             // When state becomes active
  onDeactivate: () => void;           // When state becomes inactive
  onSuccess: () => void;              // When success state is triggered
  onError: () => void;                // When error state is triggered
}

// State changes
$('.element').state('activate');
$('.element').state('deactivate');  
$('.element').state('toggle');

// Flash states
$('.element').state('flash text');
$('.element').state('reset');

// State checks
$('.element').state('is active');
$('.element').state('is inactive');
$('.element').state('is loading');
$('.element').state('is disabled');

onShow: () => void;        // Before element shows
onVisible: () => void;     // After element is visible
onHide: () => void;        // Before element hides
onHidden: () => void;      // After element is hidden
onChange: () => void;      // When state changes