0
# Dialog Components
1

2
Dialog and overlay components provide modal interactions, notifications, and contextual information display. These components handle focus management, backdrop interactions, and accessibility patterns.
3

4
## Capabilities
5

6
### Dialog
7

8
Modal dialog component for focused user interactions.
9

10
```typescript { .api }
11
/**
12
 * Modal dialog component with customizable behavior
13
 */
14
interface Dialog extends HTMLElement {
15
  /** Dialog is currently visible */
16
  opened: boolean;
17
  /** Non-modal mode (allows interaction with background) */
18
  modeless: boolean;
19
  /** Dialog can be dragged */
20
  draggable: boolean;
21
  /** Dialog can be resized */
22
  resizable: boolean;
23
  /** Disable backdrop click to close */
24
  noCloseOnOutsideClick: boolean;
25
  /** Disable ESC key to close */
26
  noCloseOnEsc: boolean;
27

28
  /** Open the dialog */
29
  open(): void;
30
  /** Close the dialog */
31
  close(): void;
32
}
33
```
34

35
### Confirm Dialog
36

37
Pre-built confirmation dialog with standard actions.
38

39
```typescript { .api }
40
/**
41
 * Confirmation dialog with standard OK/Cancel actions
42
 */
43
interface ConfirmDialog extends HTMLElement {
44
  /** Dialog is currently open */
45
  opened: boolean;
46
  /** Dialog header text */
47
  header: string;
48
  /** Main message text */
49
  message: string;
50
  /** Confirm button text */
51
  confirmText: string;
52
  /** Cancel button text */
53
  cancelText: string;
54
  /** Reject button text */
55
  rejectText: string;
56

57
  /** Open the dialog */
58
  open(): void;
59
  /** Close the dialog */
60
  close(): void;
61
}
62
```
63

64
### Notification
65

66
Toast notification system for user feedback.
67

68
```typescript { .api }
69
/**
70
 * Toast notification component
71
 */
72
interface Notification extends HTMLElement {
73
  /** Notification is currently visible */
74
  opened: boolean;
75
  /** Auto-close duration in milliseconds */
76
  duration: number;
77
  /** Notification position on screen */
78
  position: NotificationPosition;
79
  /** Theme variant */
80
  theme: string;
81

82
  /** Show the notification */
83
  open(): void;
84
  /** Hide the notification */
85
  close(): void;
86
}
87

88
/**
89
 * Notification position options
90
 */
91
type NotificationPosition =
92
  | 'top-start' | 'top-center' | 'top-end'
93
  | 'middle'
94
  | 'bottom-start' | 'bottom-center' | 'bottom-end';
95
```
96

97
### Popover
98

99
Contextual overlay component positioned relative to target elements.
100

101
```typescript { .api }
102
/**
103
 * Contextual popover overlay
104
 */
105
interface Popover extends HTMLElement {
106
  /** Target element selector or reference */
107
  for: string | Element;
108
  /** Popover is currently open */
109
  opened: boolean;
110
  /** Popover position relative to target */
111
  position: PopoverPosition;
112
  /** Trigger event for opening */
113
  trigger: 'click' | 'hover' | 'focus';
114

115
  /** Open the popover */
116
  open(): void;
117
  /** Close the popover */
118
  close(): void;
119
}
120
```
121

122
### Tooltip
123

124
Simple tooltip component for contextual help text.
125

126
```typescript { .api }
127
/**
128
 * Tooltip component for contextual information
129
 */
130
interface Tooltip extends HTMLElement {
131
  /** Target element selector */
132
  for: string;
133
  /** Tooltip text content */
134
  text: string;
135
  /** Tooltip position */
136
  position: string;
137
  /** Delay before showing (milliseconds) */
138
  delay: number;
139
  /** Hide delay (milliseconds) */
140
  hideDelay: number;
141

142
  /** Show tooltip manually */
143
  show(): void;
144
  /** Hide tooltip manually */
145
  hide(): void;
146
}
147
```
148

149
### Context Menu
150

151
Right-click context menu with customizable items.
152

153
```typescript { .api }
154
/**
155
 * Context menu component with customizable items
156
 */
157
interface ContextMenu extends HTMLElement {
158
  /** Target selector for context menu trigger */
159
  selector: string;
160
  /** Array of menu items */
161
  items: ContextMenuItem[];
162
  /** Menu is currently open */
163
  opened: boolean;
164

165
  /** Close the context menu */
166
  close(): void;
167
}
168

169
/**
170
 * Context menu item configuration
171
 */
172
interface ContextMenuItem {
173
  /** Item display text */
174
  text: string;
175
  /** Item is disabled */
176
  disabled?: boolean;
177
  /** Item is a separator */
178
  separator?: boolean;
179
  /** Child menu items */
180
  children?: ContextMenuItem[];
181
  /** Item theme variant */
182
  theme?: string;
183
}
184
```
185

186
For complete API details and usage examples, see the main documentation.