0
# Interactive Modules
1

2
JavaScript-enhanced components providing dynamic behavior and user interaction through jQuery plugins with consistent APIs and configuration options.
3

4
## Capabilities
5

6
### Dropdown
7

8
Enhanced select dropdowns with search, multiple selection, and custom options.
9

10
```javascript { .api }
11
/**
12
 * Initialize dropdown functionality on elements
13
 * @param settings - Configuration object for dropdown behavior
14
 */
15
$('.ui.dropdown').dropdown(settings);
16

17
interface DropdownSettings {
18
  // Behavior
19
  on: 'click' | 'hover';              // Trigger event for showing
20
  action: 'activate' | 'select' | 'combo' | 'nothing' | 'hide'; // Action on selection
21
  allowReselection: boolean;          // Allow selecting current value again
22
  allowAdditions: boolean;            // Allow user to add custom options
23
  hideAdditions: boolean;             // Hide custom additions after selection
24
  
25
  // Selection
26
  clearable: boolean;                 // Allow clearing selection
27
  forceSelection: boolean;            // Force valid selection
28
  selectOnKeydown: boolean;           // Select on keyboard navigation
29
  maxSelections: number;              // Limit number of selections (for multi-select)
30
  
31
  // Search
32
  search: boolean;                    // Enable search functionality
33
  searchDelay: number;                // Delay before search triggers (ms)
34
  fullTextSearch: boolean;            // Search entire text vs just beginning
35
  preserveHTML: boolean;              // Preserve HTML in search results
36
  
37
  // Display
38
  placeholder: string;                // Placeholder text
39
  keepOnScreen: boolean;              // Keep dropdown on screen
40
  match: 'both' | 'value' | 'text';  // How to match search terms
41
  direction: 'auto' | 'upward' | 'downward'; // Dropdown direction
42
  
43
  // Animation
44
  duration: number;                   // Animation duration (ms)
45
  transition: string;                 // CSS transition type
46
  
47
  // Callbacks
48
  onShow: () => void;                 // Before dropdown shows
49
  onHide: () => void;                 // Before dropdown hides
50
  onChange: (value: any, text: string, $choice: JQuery) => void;
51
  onAdd: (addedValue: any, addedText: string, $addedChoice: JQuery) => void;
52
  onRemove: (removedValue: any, removedText: string, $removedChoice: JQuery) => void;
53
  onLabelCreate: (value: any, text: string) => JQuery;
54
  onNoResults: (searchTerm: string) => void;
55
}
56
```
57

58
**Dropdown Methods:**
59

60
```javascript { .api }
61
// Show/hide dropdown
62
$('.ui.dropdown').dropdown('show');
63
$('.ui.dropdown').dropdown('hide');
64
$('.ui.dropdown').dropdown('toggle');
65

66
// Clear and set values
67
$('.ui.dropdown').dropdown('clear');
68
$('.ui.dropdown').dropdown('set selected', value);
69
$('.ui.dropdown').dropdown('set text', text);
70
$('.ui.dropdown').dropdown('set value', value);
71

72
// Get values
73
$('.ui.dropdown').dropdown('get value');
74
$('.ui.dropdown').dropdown('get text');
75
$('.ui.dropdown').dropdown('get item', value);
76

77
// Refresh and restore
78
$('.ui.dropdown').dropdown('refresh');
79
$('.ui.dropdown').dropdown('restore defaults');
80
$('.ui.dropdown').dropdown('save defaults');
81

82
// Validation
83
$('.ui.dropdown').dropdown('is selection');
84
$('.ui.dropdown').dropdown('is animated');
85
$('.ui.dropdown').dropdown('is visible');
86
$('.ui.dropdown').dropdown('is hidden');
87
```
88

89
**Usage Examples:**
90

91
```html
92
<!-- Basic dropdown -->
93
<div class="ui selection dropdown">
94
  <input type="hidden" name="country">
95
  <i class="dropdown icon"></i>
96
  <div class="default text">Select Country</div>
97
  <div class="menu">
98
    <div class="item" data-value="us">United States</div>
99
    <div class="item" data-value="ca">Canada</div>
100
    <div class="item" data-value="uk">United Kingdom</div>
101
  </div>
102
</div>
103

104
<script>
105
$('.ui.dropdown').dropdown();
106
</script>
107
```
108

109
### Modal
110

111
Dialog modals for displaying content overlays and user interactions.
112

113
```javascript { .api }
114
/**
115
 * Initialize modal functionality on elements
116
 * @param settings - Configuration object for modal behavior
117
 */
118
$('.ui.modal').modal(settings);
119

120
interface ModalSettings {
121
  // Behavior
122
  allowMultiple: boolean;             // Allow multiple modals
123
  detachable: boolean;                // Move modal to body
124
  autofocus: boolean;                 // Auto focus first input
125
  restoreFocus: boolean;              // Restore focus on close
126
  observeChanges: boolean;            // Watch for DOM changes
127
  
128
  // Display
129
  blurring: boolean;                  // Blur background
130
  inverted: boolean;                  // Inverted modal styling
131
  closable: boolean;                  // Allow closing modal
132
  dimmerSettings: object;             // Dimmer configuration
133
  
134
  // Animation
135
  transition: string;                 // CSS transition type
136
  duration: number;                   // Animation duration (ms)
137
  
138
  // Callbacks
139
  onShow: () => void;                 // Before modal shows
140
  onVisible: () => void;              // After modal is visible
141
  onHide: () => boolean | void;       // Before modal hides (return false to prevent)
142
  onHidden: () => void;               // After modal is hidden
143
  onApprove: () => boolean | void;    // When approve button clicked
144
  onDeny: () => boolean | void;       // When deny button clicked
145
}
146
```
147

148
**Modal Methods:**
149

150
```javascript { .api }
151
// Show/hide modal
152
$('.ui.modal').modal('show');
153
$('.ui.modal').modal('hide');
154
$('.ui.modal').modal('toggle');
155

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

160
// State checks
161
$('.ui.modal').modal('is active');
162
$('.ui.modal').modal('can fit');
163
```
164

165
**Usage Examples:**
166

167
```html
168
<!-- Basic modal -->
169
<div class="ui modal">
170
  <i class="close icon"></i>
171
  <div class="header">Modal Title</div>
172
  <div class="content">
173
    <p>Modal content goes here.</p>
174
  </div>
175
  <div class="actions">
176
    <div class="ui cancel button">Cancel</div>
177
    <div class="ui primary approve button">Save</div>
178
  </div>
179
</div>
180

181
<script>
182
$('.ui.modal').modal({
183
  onApprove: function() {
184
    // Save logic here
185
    return true; // Close modal
186
  }
187
});
188

189
// Show modal
190
$('.show.modal.button').click(function() {
191
  $('.ui.modal').modal('show');
192
});
193
</script>
194
```
195

196
### Accordion 
197

198
Collapsible content panels for organizing information hierarchically.
199

200
```javascript { .api }
201
/**
202
 * Initialize accordion functionality on elements
203
 * @param settings - Configuration object for accordion behavior
204
 */
205
$('.ui.accordion').accordion(settings);
206

207
interface AccordionSettings {
208
  // Behavior
209
  exclusive: boolean;                 // Only one panel open at a time
210
  on: 'click' | 'hover';             // Trigger event
211
  animateChildren: boolean;           // Animate child accordions
212
  closeNested: boolean;               // Close nested accordions when parent closes
213
  collapsible: boolean;               // Allow all panels to be closed
214
  
215
  // Animation
216
  duration: number;                   // Animation duration (ms)
217
  easing: string;                     // CSS easing function
218
  
219
  // Callbacks
220
  onOpening: () => void;              // Before panel opens
221
  onOpen: () => void;                 // After panel opens
222
  onClosing: () => void;              // Before panel closes
223
  onClose: () => void;                // After panel closes
224
  onChange: () => void;               // When panel state changes
225
}
226
```
227

228
**Accordion Methods:**
229

230
```javascript { .api }
231
// Open/close panels
232
$('.ui.accordion').accordion('open', index);
233
$('.ui.accordion').accordion('close', index);
234
$('.ui.accordion').accordion('toggle', index);
235

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

239
// Refresh accordion
240
$('.ui.accordion').accordion('refresh');
241
```
242

243
**Usage Examples:**
244

245
```html
246
<!-- Basic accordion -->
247
<div class="ui accordion">
248
  <div class="active title">
249
    <i class="dropdown icon"></i>
250
    What is a dog?
251
  </div>
252
  <div class="active content">
253
    <p>A dog is a type of domesticated animal.</p>
254
  </div>
255
  <div class="title">
256
    <i class="dropdown icon"></i>
257
    What kinds of dogs are there?
258
  </div>
259
  <div class="content">
260
    <p>There are many breeds of dogs.</p>
261
  </div>
262
</div>
263

264
<script>
265
$('.ui.accordion').accordion();
266
</script>
267
```
268

269
### Popup
270

271
Contextual popups and tooltips for displaying additional information.
272

273
```javascript { .api }
274
/**
275
 * Initialize popup functionality on elements
276
 * @param settings - Configuration object for popup behavior
277
 */
278
$('.ui.popup').popup(settings);
279

280
interface PopupSettings {
281
  // Positioning
282
  position: string;                   // Popup position relative to trigger
283
  boundary: string | JQuery;          // Boundary element
284
  context: string | JQuery;           // Context element for positioning
285
  scrollContext: string | JQuery;     // Scrolling context
286
  jitter: number;                     // Jitter amount for positioning
287
  
288
  // Behavior
289
  on: 'hover' | 'click' | 'focus' | 'manual'; // Trigger event
290
  delay: { show: number, hide: number }; // Show/hide delays
291
  hoverable: boolean;                 // Keep popup open when hovered
292
  closable: boolean;                  // Allow closing popup
293
  addTouchEvents: boolean;            // Add touch events for mobile
294
  hideOnScroll: 'auto' | boolean;     // Hide on scroll behavior
295
  
296
  // Content
297
  popup: string | JQuery;             // Popup element or HTML
298
  inline: boolean;                    // Use inline popup
299
  preserve: boolean;                  // Preserve popup in DOM
300
  prefer: 'adjacent' | 'opposite';    // Preferred positioning
301
  
302
  // Animation
303
  transition: string;                 // CSS transition type
304
  duration: number;                   // Animation duration (ms)
305
  
306
  // Callbacks
307
  onCreate: () => void;               // When popup is created
308
  onRemove: () => void;               // When popup is removed
309
  onShow: () => void;                 // Before popup shows
310
  onVisible: () => void;              // After popup is visible
311
  onHide: () => void;                 // Before popup hides
312
  onHidden: () => void;               // After popup is hidden
313
}
314
```
315

316
**Popup Methods:**
317

318
```javascript { .api }
319
// Show/hide popup
320
$('.element').popup('show');
321
$('.element').popup('hide');
322
$('.element').popup('toggle');
323

324
// Position and refresh
325
$('.element').popup('reposition');
326
$('.element').popup('refresh');
327

328
// State checks
329
$('.element').popup('is visible');
330
$('.element').popup('is hidden');
331
$('.element').popup('exists');
332

333
// Get popup element
334
$('.element').popup('get popup');
335
```
336

337
**Usage Examples:**
338

339
```html
340
<!-- Basic popup -->
341
<div class="ui button" data-content="This is a popup">
342
  Hover me
343
</div>
344

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

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

353
// Popup with settings
354
$('.custom.button').popup({
355
  position: 'top center',
356
  delay: { show: 300, hide: 800 }
357
});
358
</script>
359
```
360

361
### Progress
362

363
Animated progress bars for showing completion status and loading states.
364

365
```javascript { .api }
366
/**
367
 * Initialize progress functionality on elements
368
 * @param settings - Configuration object for progress behavior
369
 */
370
$('.ui.progress').progress(settings);
371

372
interface ProgressSettings {
373
  // Behavior
374
  autoSuccess: boolean;               // Auto-trigger success state at 100%
375
  showActivity: boolean;              // Show activity indicator
376
  limitValues: boolean;               // Limit values to 0-100 range
377
  
378
  // Display
379
  label: 'percent' | 'ratio' | 'value'; // Label display type
380
  precision: number;                  // Decimal precision for display
381
  
382
  // Animation
383
  duration: number;                   // Animation duration (ms)
384
  
385
  // Callbacks
386
  onChange: (percent: number, value: number, total: number) => void;
387
  onSuccess: (total: number) => void;
388
  onActive: (value: number, total: number) => void;
389
  onError: (value: number, total: number) => void;
390
  onWarning: (value: number, total: number) => void;
391
}
392
```
393

394
**Progress Methods:**
395

396
```javascript { .api }
397
// Set progress values
398
$('.ui.progress').progress('set progress', percent);
399
$('.ui.progress').progress('set bar', percent);
400
$('.ui.progress').progress('increment', value);
401
$('.ui.progress').progress('decrement', value);
402

403
// Update total
404
$('.ui.progress').progress('update progress', value);
405
$('.ui.progress').progress('set total', value);
406

407
// States
408
$('.ui.progress').progress('complete');
409
$('.ui.progress').progress('reset');
410
$('.ui.progress').progress('set success');
411
$('.ui.progress').progress('set warning');
412
$('.ui.progress').progress('set error');
413

414
// Get values
415
$('.ui.progress').progress('get percent');
416
$('.ui.progress').progress('get value');
417
$('.ui.progress').progress('get total');
418
$('.ui.progress').progress('is complete');
419
$('.ui.progress').progress('is success');
420
$('.ui.progress').progress('is warning');
421
$('.ui.progress').progress('is error');
422
```
423

424
**Usage Examples:**
425

426
```html
427
<!-- Basic progress bar -->
428
<div class="ui progress" data-percent="32">
429
  <div class="bar">
430
    <div class="progress">32%</div>
431
  </div>
432
  <div class="label">Downloading Files</div>
433
</div>
434

435
<!-- Progress with custom total -->
436
<div class="ui progress" data-value="3" data-total="10">
437
  <div class="bar">
438
    <div class="progress">3 of 10</div>
439
  </div>
440
  <div class="label">Tasks Complete</div>
441
</div>
442

443
<script>
444
$('.ui.progress').progress();
445

446
// Update progress programmatically
447
$('.ui.progress').progress('set progress', 60);
448
</script>
449
```
450

451
### Checkbox
452

453
Enhanced checkbox and radio controls with custom styling and validation.
454

455
```javascript { .api }
456
/**
457
 * Initialize checkbox functionality on elements
458
 * @param settings - Configuration object for checkbox behavior
459
 */
460
$('.ui.checkbox').checkbox(settings);
461

462
interface CheckboxSettings {
463
  // Behavior
464
  uncheckable: 'auto' | boolean;      // Allow unchecking radio buttons
465
  fireOnInit: boolean;                // Fire callbacks on initialization
466
  
467
  // Callbacks
468
  onChecked: () => void;              // When checkbox is checked
469
  onUnchecked: () => void;            // When checkbox is unchecked
470
  onDeterminate: () => void;          // When checkbox becomes determinate
471
  onIndeterminate: () => void;        // When checkbox becomes indeterminate
472
  onChange: () => void;               // When checkbox state changes  
473
  onEnable: () => void;               // When checkbox is enabled
474
  onDisable: () => void;              // When checkbox is disabled
475
}
476
```
477

478
**Checkbox Methods:**
479

480
```javascript { .api }
481
// Check/uncheck
482
$('.ui.checkbox').checkbox('check');
483
$('.ui.checkbox').checkbox('uncheck');
484
$('.ui.checkbox').checkbox('toggle');
485

486
// Indeterminate state
487
$('.ui.checkbox').checkbox('indeterminate');
488
$('.ui.checkbox').checkbox('determinate');
489

490
// Enable/disable
491
$('.ui.checkbox').checkbox('enable');
492
$('.ui.checkbox').checkbox('disable');
493

494
// State checks
495
$('.ui.checkbox').checkbox('is checked');
496
$('.ui.checkbox').checkbox('is unchecked');
497
$('.ui.checkbox').checkbox('is indeterminate');
498
$('.ui.checkbox').checkbox('can change');
499
```
500

501
**Usage Examples:**
502

503
```html
504
<!-- Basic checkbox -->
505
<div class="ui checkbox">
506
  <input type="checkbox" name="example">
507
  <label>Make my profile visible</label>
508
</div>
509

510
<!-- Radio buttons -->
511
<div class="ui radio checkbox">
512
  <input type="radio" name="frequency" value="weekly">
513
  <label>Weekly</label>
514
</div>
515
<div class="ui radio checkbox">
516
  <input type="radio" name="frequency" value="monthly">
517
  <label>Monthly</label>
518
</div>
519

520
<!-- Toggle checkbox -->
521
<div class="ui toggle checkbox">
522
  <input type="checkbox" name="public">
523
  <label>Subscribe to weekly newsletter</label>
524
</div>
525

526
<script>
527
$('.ui.checkbox').checkbox();
528
</script>
529
```
530

531
## Common Module Patterns
532

533
### Initialization Pattern
534
All modules follow the same initialization pattern:
535
```javascript { .api }
536
$('.ui.module').moduleName();              // Initialize with defaults
537
$('.ui.module').moduleName(settings);     // Initialize with settings
538
$('.ui.module').moduleName('method');     // Call method
539
$('.ui.module').moduleName('method', param); // Call method with parameter
540
```
541

542
### Standard Methods
543
All modules support these common methods:
544
```javascript { .api }
545
$('.ui.module').moduleName('destroy');    // Remove module and cleanup
546
$('.ui.module').moduleName('refresh');    // Refresh module state  
547
$('.ui.module').moduleName('setting', key, value); // Get/set setting
548
```
549

550
### Dimmer
551

552
Page overlay effects for modal backgrounds and loading states.
553

554
```javascript { .api }
555
/**
556
 * Initialize dimmer functionality on elements
557
 * @param settings - Configuration object for dimmer behavior
558
 */
559
$('.ui.dimmer').dimmer(settings);
560

561
interface DimmerSettings {
562
  // Behavior
563
  closable: boolean;              // Allow closing dimmer by clicking
564
  useCSS: boolean;                // Use CSS animations
565
  variation: string;              // Dimmer variation class
566
  
567
  // Animation
568
  transition: string;             // CSS transition type
569
  duration: { show: number, hide: number }; // Animation durations
570
  
571
  // Callbacks
572
  onShow: () => void;             // Before dimmer shows
573
  onVisible: () => void;          // After dimmer is visible
574
  onHide: () => void;             // Before dimmer hides
575
  onHidden: () => void;           // After dimmer is hidden
576
  onChange: () => void;           // When dimmer state changes
577
}
578
```
579

580
**Dimmer Methods:**
581

582
```javascript { .api }
583
// Show/hide dimmer
584
$('.ui.dimmer').dimmer('show');
585
$('.ui.dimmer').dimmer('hide');
586
$('.ui.dimmer').dimmer('toggle');
587

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

591
// State checks
592
$('.ui.dimmer').dimmer('is active');
593
$('.ui.dimmer').dimmer('is animating');
594
$('.ui.dimmer').dimmer('is dimmer');
595
$('.ui.dimmer').dimmer('is dimmable');
596
$('.ui.dimmer').dimmer('is disabled');
597
$('.ui.dimmer').dimmer('is enabled');
598
$('.ui.dimmer').dimmer('has dimmer');
599
```
600

601
### Sidebar
602

603
Off-canvas navigation menus and slide-out panels.
604

605
```javascript { .api }
606
/**
607
 * Initialize sidebar functionality on elements
608
 * @param settings - Configuration object for sidebar behavior
609
 */
610
$('.ui.sidebar').sidebar(settings);
611

612
interface SidebarSettings {
613
  // Behavior
614
  context: string | JQuery;       // Context element for sidebar
615
  exclusive: boolean;             // Hide other sidebars when showing
616
  closable: boolean;              // Allow closing sidebar
617
  dimPage: boolean;               // Dim page when sidebar is visible
618
  scrollLock: boolean;            // Lock page scroll when sidebar is visible
619
  returnScroll: boolean;          // Return to scroll position on hide
620
  
621
  // Animation
622
  transition: string;             // CSS transition type
623
  mobileTransition: string;       // Mobile-specific transition
624
  
625
  // Callbacks
626
  onVisible: () => void;          // When sidebar becomes visible
627
  onShow: () => void;             // Before sidebar shows
628
  onChange: () => void;           // When sidebar visibility changes
629
  onHide: () => void;             // Before sidebar hides
630
  onHidden: () => void;           // After sidebar is hidden
631
}
632
```
633

634
**Sidebar Methods:**
635

636
```javascript { .api }
637
// Show/hide sidebar
638
$('.ui.sidebar').sidebar('show');
639
$('.ui.sidebar').sidebar('hide');
640
$('.ui.sidebar').sidebar('toggle');
641

642
// State checks
643
$('.ui.sidebar').sidebar('is visible');
644
$('.ui.sidebar').sidebar('is hidden');
645
```
646

647
### Tab
648

649
Tabbed content navigation for organizing related content sections.
650

651
```javascript { .api }
652
/**
653
 * Initialize tab functionality on elements
654
 * @param settings - Configuration object for tab behavior
655
 */
656
$('.ui.tab').tab(settings);
657

658
interface TabSettings {
659
  // Behavior
660
  auto: boolean;                  // Auto-refresh tab content
661
  deactivate: 'siblings' | 'all'; // How to deactivate tabs
662
  history: boolean;               // Use browser history
663
  ignoreFirstLoad: boolean;       // Ignore first load for history
664
  evaluateScripts: boolean;       // Evaluate scripts in loaded content
665
  
666
  // Context
667
  context: string | JQuery;       // Context for tab activation
668
  childrenOnly: boolean;          // Only look for direct children
669
  maxDepth: number;               // Maximum nesting depth
670
  
671
  // Callbacks
672
  onFirstLoad: (tabPath: string, parameterArray: any[], historyEvent: any) => void;
673
  onLoad: (tabPath: string, parameterArray: any[], historyEvent: any) => void;
674
  onVisible: (tabPath: string) => void;
675
  onRequest: (tabPath: string) => void;
676
}
677
```
678

679
**Tab Methods:**
680

681
```javascript { .api }
682
// Change tab
683
$('.ui.tab').tab('change tab', path);
684

685
// Get tab
686
$('.ui.tab').tab('get path');
687
$('.ui.tab').tab('is tab');
688

689
// State checks
690
$('.ui.tab').tab('cache read', path);
691
$('.ui.tab').tab('cache add', path, content);
692
$('.ui.tab').tab('cache remove', path);
693
```
694

695
### Rating
696

697
Interactive star ratings for user feedback and scoring.
698

699
```javascript { .api }
700
/**
701
 * Initialize rating functionality on elements
702
 * @param settings - Configuration object for rating behavior
703
 */
704
$('.ui.rating').rating(settings);
705

706
interface RatingSettings {
707
  // Behavior
708
  initialRating: number;          // Initial rating value
709
  maxRating: number;              // Maximum rating value
710
  clearable: 'auto' | boolean;    // Allow clearing rating
711
  fireOnInit: boolean;            // Fire callbacks on initialization
712
  
713
  // Callbacks
714
  onRate: (value: number) => void; // When rating is set
715
}
716
```
717

718
**Rating Methods:**
719

720
```javascript { .api }
721
// Set/get rating
722
$('.ui.rating').rating('set rating', rating);
723
$('.ui.rating').rating('get rating');
724
$('.ui.rating').rating('disable');
725
$('.ui.rating').rating('enable');
726
$('.ui.rating').rating('clear rating');
727
```
728

729
### Search
730

731
Live search interfaces with real-time results and API integration.
732

733
```javascript { .api }
734
/**
735
 * Initialize search functionality on elements
736
 * @param settings - Configuration object for search behavior
737
 */
738
$('.ui.search').search(settings);
739

740
interface SearchSettings {
741
  // API
742
  apiSettings: object;            // API settings for remote search
743
  source: any[];                  // Local search source data
744
  searchFields: string[];         // Fields to search in source
745
  displayField: string;           // Field to display in results
746
  
747
  // Behavior
748
  minCharacters: number;          // Minimum characters to trigger search
749
  selectFirstResult: boolean;     // Select first result by default
750
  showNoResults: boolean;         // Show message when no results
751
  searchDelay: number;            // Delay before search triggers
752
  
753
  // Callbacks
754
  onSelect: (result: any, response: any) => boolean;
755
  onResultsAdd: (html: string) => void;
756
  onSearchQuery: (query: string) => void;
757
  onResults: (response: any) => void;
758
  onResultsOpen: () => void;
759
  onResultsClose: () => void;
760
}
761
```
762

763
**Search Methods:**
764

765
```javascript { .api }
766
// Search control  
767
$('.ui.search').search('query');
768
$('.ui.search').search('display message', text, type);
769
$('.ui.search').search('cancel query');
770
$('.ui.search').search('search local', searchTerm);
771
$('.ui.search').search('has minimum characters');
772
$('.ui.search').search('search remote', searchTerm);
773
$('.ui.search').search('search object', searchTerm, source, searchFields);
774

775
// Results
776
$('.ui.search').search('cancel query');
777
$('.ui.search').search('is focused');
778
$('.ui.search').search('is visible');
779
$('.ui.search').search('is empty');
780
$('.ui.search').search('get result', value);
781
$('.ui.search').search('set value', value);
782
```
783

784
### Transition
785

786
CSS3 transition effects for smooth animations and state changes.
787

788
```javascript { .api }
789
/**
790
 * Initialize transition functionality on elements
791
 * @param settings - Configuration object for transition behavior
792
 */
793
$('.element').transition(animation);
794
$('.element').transition(settings);
795

796
interface TransitionSettings {
797
  // Animation
798
  animation: string;              // Animation name
799
  interval: number;               // Interval between group animations
800
  reverse: 'auto' | boolean;      // Reverse animation direction
801
  displayType: string;            // Display type after animation
802
  duration: number;               // Animation duration (ms)
803
  useFailSafe: boolean;           // Use failsafe for animation completion
804
  allowRepeats: boolean;          // Allow repeating same animation
805
  queue: boolean;                 // Queue animations
806
  
807
  // Callbacks
808
  onStart: () => void;            // Before animation starts
809
  onComplete: () => void;         // After animation completes
810
  onShow: () => void;             // When element shows
811
  onHide: () => void;             // When element hides
812
}
813
```
814

815
**Transition Methods:**
816

817
```javascript { .api }
818
// Animation control
819
$('.element').transition('fade');
820
$('.element').transition('fade up');
821
$('.element').transition('scale');
822
$('.element').transition('fly left');
823

824
// Queue management
825
$('.element').transition('stop');
826
$('.element').transition('stop all');
827
$('.element').transition('clear queue');
828
$('.element').transition('repaint');
829

830
// State checks
831
$('.element').transition('is visible');
832
$('.element').transition('is animating');
833
$('.element').transition('is looping');
834
$('.element').transition('is supported');
835
```
836

837
### Sticky
838

839
Sticky positioning behavior for headers, navigation, and content elements.
840

841
```javascript { .api }
842
/**
843
 * Initialize sticky functionality on elements
844
 * @param settings - Configuration object for sticky behavior
845
 */
846
$('.ui.sticky').sticky(settings);
847

848
interface StickySettings {
849
  // Behavior
850
  pushing: boolean;               // Push following content down
851
  jitter: number;                 // Jitter amount for calculations
852
  observeChanges: boolean;        // Watch for DOM changes
853
  
854
  // Context
855
  context: string | JQuery;       // Scrolling context
856
  scrollContext: string | JQuery; // Scroll container
857
  
858
  // Offsets
859
  offset: number;                 // Offset from top when stuck
860
  bottomOffset: number;           // Offset from bottom
861
  
862
  // Callbacks
863
  onReposition: () => void;       // When sticky repositions
864
  onScroll: () => void;           // On scroll events
865
  onStick: () => void;            // When element becomes stuck
866
  onUnstick: () => void;          // When element becomes unstuck
867
  onTop: () => void;              // When element reaches top
868
  onBottom: () => void;           // When element reaches bottom
869
}
870
```
871

872
**Sticky Methods:**
873

874
```javascript { .api }
875
// Refresh and destroy
876
$('.ui.sticky').sticky('refresh');
877
$('.ui.sticky').sticky('destroy');
878
```
879

880
### API
881

882
Remote data integration for dynamic content loading and server communication.
883

884
```javascript { .api }
885
/**
886
 * Initialize API functionality on elements
887
 * @param settings - Configuration object for API behavior
888
 */
889
$('.element').api(settings);
890

891
interface APISettings {
892
  // Request
893
  action: string;                     // API action to use
894
  url: string;                        // API endpoint URL
895
  urlData: object;                    // Data to pass in URL
896
  response: boolean;                  // Process API response
897
  responseAsync: boolean;             // Process response asynchronously
898
  
899
  // Data
900
  method: 'post' | 'get' | 'put' | 'delete'; // HTTP method
901
  data: object;                       // Data to send with request
902
  dataType: 'json' | 'xml' | 'html';  // Expected response type
903
  
904
  // Behavior
905
  cache: boolean | string;            // Cache responses
906
  stateContext: string | JQuery;      // Context for loading state
907
  encodeParameters: boolean;          // URL encode parameters
908
  
909
  // Callbacks
910
  beforeSend: (settings: object) => object;
911
  beforeXHR: (xhr: XMLHttpRequest) => void;
912
  onRequest: (promise: any, xhr: XMLHttpRequest) => void;
913
  onResponse: (response: any) => any;
914
  onSuccess: (response: any, element: JQuery, xhr: XMLHttpRequest) => void;
915
  onComplete: (response: any, element: JQuery, xhr: XMLHttpRequest) => void;
916
  onFailure: (response: any, element: JQuery) => void;
917
  onError: (errorMessage: string, element: JQuery, xhr: XMLHttpRequest) => void;
918
  onAbort: (errorMessage: string, element: JQuery, xhr: XMLHttpRequest) => void;
919
}
920
```
921

922
**API Methods:**
923

924
```javascript { .api }
925
// Request control
926
$('.element').api('query');
927
$('.element').api('add url data', data);
928
$('.element').api('get request');
929
$('.element').api('abort');
930

931
// State checks
932
$('.element').api('was cancelled');
933
$('.element').api('is disabled');
934
$('.element').api('is loading');
935
$('.element').api('is mocked');
936

937
// Caching
938
$('.element').api('remove templated url');
939
$('.element').api('get url data');
940
$('.element').api('cache write', url, response);
941
$('.element').api('cache read', url);
942
```
943

944
### Embed
945

946
Embedded content loading for videos, iframes, and external media.
947

948
```javascript { .api }
949
/**
950
 * Initialize embed functionality on elements
951
 * @param settings - Configuration object for embed behavior
952
 */
953
$('.ui.embed').embed(settings);
954

955
interface EmbedSettings {
956
  // Content
957
  source: string;                     // Content source (youtube, vimeo, etc.)
958
  id: string;                         // Content ID
959
  url: string;                        // Direct URL for content
960
  
961
  // Display
962
  autoplay: boolean;                  // Autoplay embedded content
963
  color: string;                      // Player color theme
964
  hd: boolean;                        // HD quality when available
965
  brandedUI: boolean;                 // Show branded player UI
966
  
967
  // Callbacks
968
  onCreate: (url: string) => void;    // When embed is created
969
  onDisplay: () => void;              // When embed is displayed
970
  onPlaceholderDisplay: () => void;   // When placeholder is displayed
971
  onEmbed: (parameters: object) => object; // Modify embed parameters
972
}
973
```
974

975
**Embed Methods:**
976

977
```javascript { .api }
978
// Show/hide embed
979
$('.ui.embed').embed('show');
980
$('.ui.embed').embed('hide');
981

982
// Control
983
$('.ui.embed').embed('reset');
984
$('.ui.embed').embed('get id');
985
$('.ui.embed').embed('get placeholder');
986
$('.ui.embed').embed('get sources');
987
$('.ui.embed').embed('get type');
988
$('.ui.embed').embed('get url');
989
$('.ui.embed').embed('has placeholder');
990
```
991

992
### Nag
993

994
Persistent notification messages that remain visible until dismissed.
995

996
```javascript { .api }
997
/**
998
 * Initialize nag functionality on elements
999
 * @param settings - Configuration object for nag behavior
1000
 */
1001
$('.ui.nag').nag(settings);
1002

1003
interface NagSettings {
1004
  // Behavior
1005
  persist: boolean;                   // Persist across browser sessions
1006
  displayTime: number;                // Time to show nag automatically
1007
  
1008
  // Storage
1009
  key: string;                        // Storage key for persistence
1010
  value: any;                         // Storage value
1011
  
1012
  // Animation
1013
  speed: number;                      // Animation speed
1014
  easing: string;                     // CSS easing function
1015
  
1016
  // Callbacks
1017
  onHide: () => void;                 // When nag is hidden
1018
  onShow: () => void;                 // When nag is shown
1019
  onVisible: () => void;              // When nag becomes visible
1020
}
1021
```
1022

1023
**Nag Methods:**
1024

1025
```javascript { .api }
1026
// Show/hide nag
1027
$('.ui.nag').nag('show');
1028
$('.ui.nag').nag('hide');
1029

1030
// Storage
1031
$('.ui.nag').nag('clear');
1032
```
1033

1034
### Shape
1035

1036
3D CSS transformations and shape morphing effects.
1037

1038
```javascript { .api }
1039
/**
1040
 * Initialize shape functionality on elements
1041
 * @param settings - Configuration object for shape behavior
1042
 */
1043
$('.ui.shape').shape(settings);
1044

1045
interface ShapeSettings {
1046
  // Animation
1047
  duration: number;                   // Animation duration (ms)
1048
  beforeChange: () => void;           // Before shape changes
1049
  onChange: () => void;               // During shape change
1050
  
1051
  // Callbacks
1052
  onSideChange: (activeSide: string) => void;
1053
}
1054
```
1055

1056
**Shape Methods:**
1057

1058
```javascript { .api }
1059
// Flip shape
1060
$('.ui.shape').shape('flip up');
1061
$('.ui.shape').shape('flip down');
1062
$('.ui.shape').shape('flip left');  
1063
$('.ui.shape').shape('flip right');
1064
$('.ui.shape').shape('flip over');
1065
$('.ui.shape').shape('flip back');
1066

1067
// State checks
1068
$('.ui.shape').shape('is animating');
1069
$('.ui.shape').shape('reset');
1070
$('.ui.shape').shape('queue');
1071
$('.ui.shape').shape('repaint');
1072
$('.ui.shape').shape('set default side');
1073
$('.ui.shape').shape('get transform down');
1074
$('.ui.shape').shape('get transform left');
1075
$('.ui.shape').shape('get transform right');
1076
$('.ui.shape').shape('get transform up');
1077
$('.ui.shape').shape('get transform over');
1078
$('.ui.shape').shape('get transform back');
1079
```
1080

1081
### Video
1082

1083
Video player controls and embedded video management.
1084

1085
```javascript { .api }
1086
/**
1087
 * Initialize video functionality on elements
1088
 * @param settings - Configuration object for video behavior
1089
 */
1090
$('.ui.video').video(settings);
1091

1092
interface VideoSettings {
1093
  // Behavior
1094
  onChange: (event: Event) => void;   // When video state changes
1095
  onPause: (event: Event) => void;    // When video is paused
1096
  onPlay: (event: Event) => void;     // When video starts playing
1097
  onStop: (event: Event) => void;     // When video stops
1098
}
1099
```
1100

1101
**Video Methods:**
1102

1103
```javascript { .api }
1104
// Playback control
1105
$('.ui.video').video('play');
1106
$('.ui.video').video('pause');
1107
$('.ui.video').video('stop');
1108

1109
// State checks
1110
$('.ui.video').video('is playing');
1111
$('.ui.video').video('get video');
1112
```
1113

1114
### Visibility
1115

1116
Viewport visibility tracking and scroll-based callbacks.
1117

1118
```javascript { .api }
1119
/**
1120
 * Initialize visibility functionality on elements
1121
 * @param settings - Configuration object for visibility behavior
1122
 */
1123
$('.element').visibility(settings);
1124

1125
interface VisibilitySettings {
1126
  // Behavior
1127
  once: boolean;                      // Fire callbacks only once
1128
  continuous: boolean;                // Fire callbacks continuously
1129
  offset: number;                     // Offset for visibility calculations
1130
  includeMargin: boolean;             // Include margin in calculations
1131
  
1132
  // Context
1133
  context: string | JQuery;           // Scrolling context
1134
  refreshOnLoad: boolean;             // Refresh on window load
1135
  refreshOnResize: boolean;           // Refresh on window resize
1136
  checkOnRefresh: boolean;            // Check visibility on refresh
1137
  
1138
  // Thresholds
1139
  initialCheck: boolean;              // Check on initialization
1140
  zIndex: number;                     // Z-index for visibility
1141
  
1142
  // Callbacks - Viewport visibility
1143
  onOnScreen: () => void;             // When element enters viewport
1144
  onOffScreen: () => void;            // When element leaves viewport
1145
  onPassing: () => void;              // When element is passing through viewport
1146
  onTopVisible: () => void;           // When top of element is visible
1147
  onBottomVisible: () => void;        // When bottom of element is visible
1148
  onTopPassed: () => void;            // When top of element has passed
1149
  onBottomPassed: () => void;         // When bottom of element has passed
1150
  
1151
  // Callbacks - Fixed visibility
1152
  onFixed: () => void;                // When element becomes fixed
1153
  onUnfixed: () => void;              // When element becomes unfixed
1154
  
1155
  // Callbacks - Percentage based
1156
  onUpdate: (calculations: object) => void; // On visibility calculations update
1157
}
1158
```
1159

1160
**Visibility Methods:**
1161

1162
```javascript { .api }
1163
// State checks
1164
$('.element').visibility('is on screen');
1165
$('.element').visibility('is off screen');
1166
$('.element').visibility('is visible');
1167
$('.element').visibility('is hidden');
1168

1169
// Get calculations
1170
$('.element').visibility('get screen calculations');
1171
$('.element').visibility('get element calculations');
1172
$('.element').visibility('get element position');
1173
$('.element').visibility('get screen size');
1174

1175
// Refresh
1176
$('.element').visibility('refresh');
1177
```
1178

1179
### State
1180

1181
Element state management for loading, disabled, and error states.
1182

1183
```javascript { .api }
1184
/**
1185
 * Initialize state functionality on elements  
1186
 * @param settings - Configuration object for state behavior
1187
 */
1188
$('.element').state(settings);
1189

1190
interface StateSettings {
1191
  // Behavior
1192
  context: string | JQuery;           // Context for state changes
1193
  automatic: boolean;                 // Automatically handle states
1194
  sync: boolean;                      // Sync states across elements
1195
  flashError: boolean;                // Flash error state briefly
1196
  
1197
  // Text
1198
  text: {
1199
    inactive: string;                 // Inactive state text
1200
    active: string;                   // Active state text
1201
    activating: string;               // Activating state text
1202
    deactivating: string;             // Deactivating state text
1203
    success: string;                  // Success state text
1204
    error: string;                    // Error state text
1205
    warning: string;                  // Warning state text
1206
  };
1207
  
1208
  // Callbacks
1209
  onActivate: () => void;             // When state becomes active
1210
  onDeactivate: () => void;           // When state becomes inactive
1211
  onSuccess: () => void;              // When success state is triggered
1212
  onError: () => void;                // When error state is triggered
1213
}
1214
```
1215

1216
**State Methods:**
1217

1218
```javascript { .api }
1219
// State changes
1220
$('.element').state('activate');
1221
$('.element').state('deactivate');  
1222
$('.element').state('toggle');
1223

1224
// Flash states
1225
$('.element').state('flash text');
1226
$('.element').state('reset');
1227

1228
// State checks
1229
$('.element').state('is active');
1230
$('.element').state('is inactive');
1231
$('.element').state('is loading');
1232
$('.element').state('is disabled');
1233
```
1234

1235
### Event Callbacks
1236
Consistent callback naming across modules:
1237
```javascript { .api }
1238
onShow: () => void;        // Before element shows
1239
onVisible: () => void;     // After element is visible
1240
onHide: () => void;        // Before element hides
1241
onHidden: () => void;      // After element is hidden
1242
onChange: () => void;      // When state changes
1243
```