@hypoth-ui/wc 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +60 -0
- package/dist/button-MKQKTC5Q.js +10 -0
- package/dist/button-MKQKTC5Q.js.map +1 -0
- package/dist/chunk-4HLM6DBG.js +910 -0
- package/dist/chunk-4HLM6DBG.js.map +1 -0
- package/dist/chunk-55ID7LJL.js +3602 -0
- package/dist/chunk-55ID7LJL.js.map +1 -0
- package/dist/chunk-66HFYJD7.js +86 -0
- package/dist/chunk-66HFYJD7.js.map +1 -0
- package/dist/chunk-CZOXIJVS.js +70 -0
- package/dist/chunk-CZOXIJVS.js.map +1 -0
- package/dist/chunk-DHUM4Q5Y.js +495 -0
- package/dist/chunk-DHUM4Q5Y.js.map +1 -0
- package/dist/chunk-DNNI5BDE.js +1842 -0
- package/dist/chunk-DNNI5BDE.js.map +1 -0
- package/dist/chunk-GXKZ6E6K.js +99 -0
- package/dist/chunk-GXKZ6E6K.js.map +1 -0
- package/dist/chunk-H4GJJZ3N.js +51 -0
- package/dist/chunk-H4GJJZ3N.js.map +1 -0
- package/dist/chunk-JMPTFALJ.js +175 -0
- package/dist/chunk-JMPTFALJ.js.map +1 -0
- package/dist/chunk-MYQWCLUJ.js +45 -0
- package/dist/chunk-MYQWCLUJ.js.map +1 -0
- package/dist/chunk-QZSPWT7L.js +183 -0
- package/dist/chunk-QZSPWT7L.js.map +1 -0
- package/dist/chunk-TSKBQCTR.js +5137 -0
- package/dist/chunk-TSKBQCTR.js.map +1 -0
- package/dist/chunk-TXIIUVL3.js +130 -0
- package/dist/chunk-TXIIUVL3.js.map +1 -0
- package/dist/chunk-UM7WRO7W.js +237 -0
- package/dist/chunk-UM7WRO7W.js.map +1 -0
- package/dist/chunk-VPXL4RB3.js +202 -0
- package/dist/chunk-VPXL4RB3.js.map +1 -0
- package/dist/chunk-VX5CKSMN.js +39 -0
- package/dist/chunk-VX5CKSMN.js.map +1 -0
- package/dist/chunk-WQ5BEP3E.js +2845 -0
- package/dist/chunk-WQ5BEP3E.js.map +1 -0
- package/dist/chunk-YDQ434UH.js +60 -0
- package/dist/chunk-YDQ434UH.js.map +1 -0
- package/dist/chunk-ZWV4VI6D.js +153 -0
- package/dist/chunk-ZWV4VI6D.js.map +1 -0
- package/dist/core.d.ts +127 -0
- package/dist/core.js +38 -0
- package/dist/core.js.map +1 -0
- package/dist/data-display.d.ts +872 -0
- package/dist/data-display.js +57 -0
- package/dist/data-display.js.map +1 -0
- package/dist/ds-element-Db0LMfxI.d.ts +43 -0
- package/dist/feedback.d.ts +292 -0
- package/dist/feedback.js +31 -0
- package/dist/feedback.js.map +1 -0
- package/dist/form-controls.d.ts +1713 -0
- package/dist/form-controls.js +63 -0
- package/dist/form-controls.js.map +1 -0
- package/dist/icon-7IZTJ5WT.js +8 -0
- package/dist/icon-7IZTJ5WT.js.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +423 -0
- package/dist/index.js.map +1 -0
- package/dist/input-LB6UR37A.js +10 -0
- package/dist/input-LB6UR37A.js.map +1 -0
- package/dist/layout.d.ts +504 -0
- package/dist/layout.js +34 -0
- package/dist/layout.js.map +1 -0
- package/dist/link-NHDJ6SFY.js +9 -0
- package/dist/link-NHDJ6SFY.js.map +1 -0
- package/dist/navigation.d.ts +255 -0
- package/dist/navigation.js +111 -0
- package/dist/navigation.js.map +1 -0
- package/dist/overlays.d.ts +1291 -0
- package/dist/overlays.js +106 -0
- package/dist/overlays.js.map +1 -0
- package/dist/primitives.d.ts +230 -0
- package/dist/primitives.js +26 -0
- package/dist/primitives.js.map +1 -0
- package/dist/registry-Bns0t11H.d.ts +233 -0
- package/dist/skeleton-MUdd2029.d.ts +109 -0
- package/dist/spinner-BWaNlc-Y.d.ts +45 -0
- package/dist/spinner-UIYDUVBZ.js +8 -0
- package/dist/spinner-UIYDUVBZ.js.map +1 -0
- package/dist/stepper-CCRwcQOe.d.ts +851 -0
- package/dist/text-MT3S3EMU.js +8 -0
- package/dist/text-MT3S3EMU.js.map +1 -0
- package/dist/visually-hidden-MW2XY4CS.js +8 -0
- package/dist/visually-hidden-MW2XY4CS.js.map +1 -0
- package/package.json +92 -0
|
@@ -0,0 +1,1291 @@
|
|
|
1
|
+
import * as lit from 'lit';
|
|
2
|
+
import { nothing } from 'lit';
|
|
3
|
+
import { D as DSElement } from './ds-element-Db0LMfxI.js';
|
|
4
|
+
import { Placement } from '@hypoth-ui/primitives-dom';
|
|
5
|
+
|
|
6
|
+
type DialogContentSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
7
|
+
type DialogContentState = "open" | "closed";
|
|
8
|
+
/**
|
|
9
|
+
* Dialog content container component.
|
|
10
|
+
*
|
|
11
|
+
* Contains the dialog's content including title, description, and actions.
|
|
12
|
+
* Receives accessibility attributes from parent ds-dialog.
|
|
13
|
+
*
|
|
14
|
+
* @element ds-dialog-content
|
|
15
|
+
*
|
|
16
|
+
* @slot - Dialog content (title, description, body, actions)
|
|
17
|
+
*
|
|
18
|
+
* @csspart container - The content container element
|
|
19
|
+
*
|
|
20
|
+
* @attr {string} data-state - Animation state ("open" or "closed")
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```html
|
|
24
|
+
* <ds-dialog-content size="lg">
|
|
25
|
+
* <ds-dialog-title>Large Dialog</ds-dialog-title>
|
|
26
|
+
* <p>Dialog body content here.</p>
|
|
27
|
+
* <div class="ds-dialog__footer">
|
|
28
|
+
* <button>Cancel</button>
|
|
29
|
+
* <button>Confirm</button>
|
|
30
|
+
* </div>
|
|
31
|
+
* </ds-dialog-content>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
declare class DsDialogContent extends DSElement {
|
|
35
|
+
/** Size variant of the dialog */
|
|
36
|
+
size: DialogContentSize;
|
|
37
|
+
/** Animation state (open or closed) - set by parent ds-dialog */
|
|
38
|
+
dataState: DialogContentState;
|
|
39
|
+
render(): lit.TemplateResult<1>;
|
|
40
|
+
}
|
|
41
|
+
declare global {
|
|
42
|
+
interface HTMLElementTagNameMap {
|
|
43
|
+
"ds-dialog-content": DsDialogContent;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Dialog title component.
|
|
49
|
+
*
|
|
50
|
+
* Renders the dialog's accessible title. The parent ds-dialog
|
|
51
|
+
* automatically connects this to the dialog content via aria-labelledby.
|
|
52
|
+
*
|
|
53
|
+
* @element ds-dialog-title
|
|
54
|
+
*
|
|
55
|
+
* @csspart title - The title element
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```html
|
|
59
|
+
* <ds-dialog-title>Confirm Deletion</ds-dialog-title>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
declare class DsDialogTitle extends DSElement {
|
|
63
|
+
/** Preserved text content from initial children */
|
|
64
|
+
private titleText;
|
|
65
|
+
connectedCallback(): void;
|
|
66
|
+
render(): typeof nothing | lit.TemplateResult<1>;
|
|
67
|
+
}
|
|
68
|
+
declare global {
|
|
69
|
+
interface HTMLElementTagNameMap {
|
|
70
|
+
"ds-dialog-title": DsDialogTitle;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Dialog description component.
|
|
76
|
+
*
|
|
77
|
+
* Renders the dialog's accessible description. The parent ds-dialog
|
|
78
|
+
* automatically connects this to the dialog content via aria-describedby.
|
|
79
|
+
*
|
|
80
|
+
* @element ds-dialog-description
|
|
81
|
+
*
|
|
82
|
+
* @csspart description - The description element
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```html
|
|
86
|
+
* <ds-dialog-description>
|
|
87
|
+
* This action cannot be undone.
|
|
88
|
+
* </ds-dialog-description>
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
declare class DsDialogDescription extends DSElement {
|
|
92
|
+
/** Preserved text content from initial children */
|
|
93
|
+
private descriptionText;
|
|
94
|
+
connectedCallback(): void;
|
|
95
|
+
render(): typeof nothing | lit.TemplateResult<1>;
|
|
96
|
+
}
|
|
97
|
+
declare global {
|
|
98
|
+
interface HTMLElementTagNameMap {
|
|
99
|
+
"ds-dialog-description": DsDialogDescription;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
type DialogRole = "dialog" | "alertdialog";
|
|
104
|
+
/**
|
|
105
|
+
* Modal dialog component with accessibility and focus management.
|
|
106
|
+
*
|
|
107
|
+
* Provides a modal overlay with backdrop, focus trap, and dismissal handling.
|
|
108
|
+
* Follows WAI-ARIA Dialog (Modal) pattern.
|
|
109
|
+
*
|
|
110
|
+
* @element ds-dialog
|
|
111
|
+
*
|
|
112
|
+
* @slot trigger - Button or element that opens the dialog
|
|
113
|
+
* @slot - Dialog content (ds-dialog-content)
|
|
114
|
+
*
|
|
115
|
+
* @fires ds:open-change - Fired when open state changes (detail: { open, reason })
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* ```html
|
|
119
|
+
* <ds-dialog>
|
|
120
|
+
* <button slot="trigger">Open Dialog</button>
|
|
121
|
+
* <ds-dialog-content>
|
|
122
|
+
* <ds-dialog-title>Confirm Action</ds-dialog-title>
|
|
123
|
+
* <ds-dialog-description>Are you sure?</ds-dialog-description>
|
|
124
|
+
* <button>Yes</button>
|
|
125
|
+
* <button>No</button>
|
|
126
|
+
* </ds-dialog-content>
|
|
127
|
+
* </ds-dialog>
|
|
128
|
+
* ```
|
|
129
|
+
*/
|
|
130
|
+
declare class DsDialog extends DSElement {
|
|
131
|
+
/** Whether the dialog is open */
|
|
132
|
+
open: boolean;
|
|
133
|
+
/** Whether Escape key closes the dialog */
|
|
134
|
+
closeOnEscape: boolean;
|
|
135
|
+
/** Whether clicking the backdrop closes the dialog */
|
|
136
|
+
closeOnBackdrop: boolean;
|
|
137
|
+
/** Whether to animate open/close transitions */
|
|
138
|
+
animated: boolean;
|
|
139
|
+
/** Dialog role - stored internally, read from attribute */
|
|
140
|
+
private dialogRole;
|
|
141
|
+
/** Whether the dialog is closing (for animation) */
|
|
142
|
+
private isClosing;
|
|
143
|
+
private dialogBehavior;
|
|
144
|
+
private presence;
|
|
145
|
+
private attributeObserver;
|
|
146
|
+
private backdropElement;
|
|
147
|
+
connectedCallback(): void;
|
|
148
|
+
disconnectedCallback(): void;
|
|
149
|
+
/**
|
|
150
|
+
* Initializes the dialog behavior primitive.
|
|
151
|
+
*/
|
|
152
|
+
private initDialogBehavior;
|
|
153
|
+
/**
|
|
154
|
+
* Handles close triggered by the behavior (escape/outside click).
|
|
155
|
+
*/
|
|
156
|
+
private handleBehaviorClose;
|
|
157
|
+
/** Tracks the reason for closing (for animation completion) */
|
|
158
|
+
private _closeReason;
|
|
159
|
+
/**
|
|
160
|
+
* Opens the dialog.
|
|
161
|
+
*/
|
|
162
|
+
show(): void;
|
|
163
|
+
/**
|
|
164
|
+
* Closes the dialog.
|
|
165
|
+
* @param reason - The reason for closing (default: "programmatic")
|
|
166
|
+
*/
|
|
167
|
+
close(reason?: "escape" | "outside-click" | "trigger" | "programmatic"): void;
|
|
168
|
+
/**
|
|
169
|
+
* Completes the close after exit animation.
|
|
170
|
+
* Note: The open-change event was already emitted before animation started.
|
|
171
|
+
*/
|
|
172
|
+
private completeClose;
|
|
173
|
+
private handleTriggerClick;
|
|
174
|
+
private handleBackdropClick;
|
|
175
|
+
private cleanup;
|
|
176
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
177
|
+
/**
|
|
178
|
+
* Updates accessibility attributes on dialog content.
|
|
179
|
+
*/
|
|
180
|
+
private updateContentAccessibility;
|
|
181
|
+
render(): lit.TemplateResult<1>;
|
|
182
|
+
}
|
|
183
|
+
declare global {
|
|
184
|
+
interface HTMLElementTagNameMap {
|
|
185
|
+
"ds-dialog": DsDialog;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
type PopoverContentState = "open" | "closed";
|
|
190
|
+
/**
|
|
191
|
+
* Popover content container.
|
|
192
|
+
*
|
|
193
|
+
* @element ds-popover-content
|
|
194
|
+
*
|
|
195
|
+
* @slot - Content to display in the popover
|
|
196
|
+
*
|
|
197
|
+
* @attr {string} data-state - Animation state ("open" or "closed")
|
|
198
|
+
*
|
|
199
|
+
* @example
|
|
200
|
+
* ```html
|
|
201
|
+
* <ds-popover>
|
|
202
|
+
* <button slot="trigger">Open</button>
|
|
203
|
+
* <ds-popover-content>
|
|
204
|
+
* <p>Popover content here</p>
|
|
205
|
+
* <button>Action</button>
|
|
206
|
+
* </ds-popover-content>
|
|
207
|
+
* </ds-popover>
|
|
208
|
+
* ```
|
|
209
|
+
*/
|
|
210
|
+
declare class DsPopoverContent extends DSElement {
|
|
211
|
+
/** Unique ID for ARIA association */
|
|
212
|
+
id: string;
|
|
213
|
+
/** Animation state (open or closed) - set by parent ds-popover */
|
|
214
|
+
dataState: PopoverContentState;
|
|
215
|
+
connectedCallback(): void;
|
|
216
|
+
render(): lit.TemplateResult<1>;
|
|
217
|
+
}
|
|
218
|
+
declare global {
|
|
219
|
+
interface HTMLElementTagNameMap {
|
|
220
|
+
"ds-popover-content": DsPopoverContent;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/**
|
|
225
|
+
* Non-modal popover component with anchor positioning.
|
|
226
|
+
*
|
|
227
|
+
* Unlike Dialog, Popover does not trap focus and allows Tab to exit.
|
|
228
|
+
* Positioned relative to its trigger using anchor positioning.
|
|
229
|
+
*
|
|
230
|
+
* @element ds-popover
|
|
231
|
+
*
|
|
232
|
+
* @slot trigger - Button or element that opens the popover
|
|
233
|
+
* @slot - Popover content (ds-popover-content)
|
|
234
|
+
*
|
|
235
|
+
* @fires ds:open - Fired when popover opens
|
|
236
|
+
* @fires ds:close - Fired when popover closes
|
|
237
|
+
*
|
|
238
|
+
* @example
|
|
239
|
+
* ```html
|
|
240
|
+
* <ds-popover>
|
|
241
|
+
* <button slot="trigger">Open Menu</button>
|
|
242
|
+
* <ds-popover-content>
|
|
243
|
+
* <button>Option 1</button>
|
|
244
|
+
* <button>Option 2</button>
|
|
245
|
+
* </ds-popover-content>
|
|
246
|
+
* </ds-popover>
|
|
247
|
+
* ```
|
|
248
|
+
*/
|
|
249
|
+
declare class DsPopover extends DSElement {
|
|
250
|
+
/** Whether the popover is open */
|
|
251
|
+
open: boolean;
|
|
252
|
+
/** Placement relative to trigger */
|
|
253
|
+
placement: Placement;
|
|
254
|
+
/** Offset distance from trigger in pixels */
|
|
255
|
+
offset: number;
|
|
256
|
+
/** Whether to flip placement when near viewport edge */
|
|
257
|
+
flip: boolean;
|
|
258
|
+
/** Whether Escape key closes the popover */
|
|
259
|
+
closeOnEscape: boolean;
|
|
260
|
+
/** Whether clicking outside closes the popover */
|
|
261
|
+
closeOnOutsideClick: boolean;
|
|
262
|
+
/** Whether to animate open/close transitions */
|
|
263
|
+
animated: boolean;
|
|
264
|
+
private anchorPosition;
|
|
265
|
+
private dismissLayer;
|
|
266
|
+
private presence;
|
|
267
|
+
private triggerElement;
|
|
268
|
+
private resizeObserver;
|
|
269
|
+
private scrollHandler;
|
|
270
|
+
connectedCallback(): void;
|
|
271
|
+
disconnectedCallback(): void;
|
|
272
|
+
/**
|
|
273
|
+
* Opens the popover.
|
|
274
|
+
*/
|
|
275
|
+
show(): void;
|
|
276
|
+
/**
|
|
277
|
+
* Closes the popover.
|
|
278
|
+
*/
|
|
279
|
+
close(): void;
|
|
280
|
+
/**
|
|
281
|
+
* Completes the close after exit animation.
|
|
282
|
+
*/
|
|
283
|
+
private completeClose;
|
|
284
|
+
/**
|
|
285
|
+
* Toggles the popover open/closed state.
|
|
286
|
+
*/
|
|
287
|
+
toggle(): void;
|
|
288
|
+
private handleTriggerClick;
|
|
289
|
+
private handleDismiss;
|
|
290
|
+
private setupTriggerAccessibility;
|
|
291
|
+
private updateTriggerAria;
|
|
292
|
+
private setupPositioning;
|
|
293
|
+
private setupDismissLayer;
|
|
294
|
+
private cleanup;
|
|
295
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
296
|
+
render(): lit.TemplateResult<1>;
|
|
297
|
+
}
|
|
298
|
+
declare global {
|
|
299
|
+
interface HTMLElementTagNameMap {
|
|
300
|
+
"ds-popover": DsPopover;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
type TooltipContentState = "open" | "closed";
|
|
305
|
+
/**
|
|
306
|
+
* Tooltip content container.
|
|
307
|
+
*
|
|
308
|
+
* @element ds-tooltip-content
|
|
309
|
+
*
|
|
310
|
+
* @slot - Content to display in the tooltip
|
|
311
|
+
*
|
|
312
|
+
* @attr {string} data-state - Animation state ("open" or "closed")
|
|
313
|
+
*
|
|
314
|
+
* @example
|
|
315
|
+
* ```html
|
|
316
|
+
* <ds-tooltip>
|
|
317
|
+
* <button slot="trigger">Hover me</button>
|
|
318
|
+
* <ds-tooltip-content>Helpful information</ds-tooltip-content>
|
|
319
|
+
* </ds-tooltip>
|
|
320
|
+
* ```
|
|
321
|
+
*/
|
|
322
|
+
declare class DsTooltipContent extends DSElement {
|
|
323
|
+
/** Unique ID for ARIA association */
|
|
324
|
+
id: string;
|
|
325
|
+
/** Animation state (open or closed) - set by parent ds-tooltip */
|
|
326
|
+
dataState: TooltipContentState;
|
|
327
|
+
connectedCallback(): void;
|
|
328
|
+
render(): lit.TemplateResult<1>;
|
|
329
|
+
}
|
|
330
|
+
declare global {
|
|
331
|
+
interface HTMLElementTagNameMap {
|
|
332
|
+
"ds-tooltip-content": DsTooltipContent;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
* Tooltip component with hover/focus trigger and configurable delays.
|
|
338
|
+
*
|
|
339
|
+
* Shows informational content on hover or focus with positioning
|
|
340
|
+
* relative to the trigger element.
|
|
341
|
+
*
|
|
342
|
+
* @element ds-tooltip
|
|
343
|
+
*
|
|
344
|
+
* @slot trigger - Element that triggers the tooltip
|
|
345
|
+
* @slot - Tooltip content (ds-tooltip-content)
|
|
346
|
+
*
|
|
347
|
+
* @example
|
|
348
|
+
* ```html
|
|
349
|
+
* <ds-tooltip>
|
|
350
|
+
* <button slot="trigger">Hover for info</button>
|
|
351
|
+
* <ds-tooltip-content>Additional information here</ds-tooltip-content>
|
|
352
|
+
* </ds-tooltip>
|
|
353
|
+
* ```
|
|
354
|
+
*/
|
|
355
|
+
declare class DsTooltip extends DSElement {
|
|
356
|
+
/** Whether the tooltip is open */
|
|
357
|
+
open: boolean;
|
|
358
|
+
/** Placement relative to trigger */
|
|
359
|
+
placement: Placement;
|
|
360
|
+
/** Offset distance from trigger in pixels */
|
|
361
|
+
offset: number;
|
|
362
|
+
/** Delay before showing tooltip (ms) */
|
|
363
|
+
showDelay: number;
|
|
364
|
+
/** Delay before hiding tooltip (ms) */
|
|
365
|
+
hideDelay: number;
|
|
366
|
+
/** Whether to animate open/close transitions */
|
|
367
|
+
animated: boolean;
|
|
368
|
+
private anchorPosition;
|
|
369
|
+
private presence;
|
|
370
|
+
private showTimeout;
|
|
371
|
+
private hideTimeout;
|
|
372
|
+
private escapeHandler;
|
|
373
|
+
connectedCallback(): void;
|
|
374
|
+
disconnectedCallback(): void;
|
|
375
|
+
/**
|
|
376
|
+
* Shows the tooltip immediately.
|
|
377
|
+
*/
|
|
378
|
+
show(): void;
|
|
379
|
+
/**
|
|
380
|
+
* Hides the tooltip immediately.
|
|
381
|
+
*/
|
|
382
|
+
hide(): void;
|
|
383
|
+
private clearTimeouts;
|
|
384
|
+
private scheduleShow;
|
|
385
|
+
private scheduleHide;
|
|
386
|
+
private handleTriggerMouseEnter;
|
|
387
|
+
private handleTriggerMouseLeave;
|
|
388
|
+
private handleTriggerFocusIn;
|
|
389
|
+
private handleTriggerFocusOut;
|
|
390
|
+
private handleContentMouseEnter;
|
|
391
|
+
private handleContentMouseLeave;
|
|
392
|
+
private setupTriggerListeners;
|
|
393
|
+
private setupContentListeners;
|
|
394
|
+
private setupTriggerAccessibility;
|
|
395
|
+
private setupEscapeHandler;
|
|
396
|
+
private removeEscapeHandler;
|
|
397
|
+
private setupPositioning;
|
|
398
|
+
private cleanup;
|
|
399
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
400
|
+
render(): lit.TemplateResult<1>;
|
|
401
|
+
}
|
|
402
|
+
declare global {
|
|
403
|
+
interface HTMLElementTagNameMap {
|
|
404
|
+
"ds-tooltip": DsTooltip;
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
type MenuContentState = "open" | "closed";
|
|
409
|
+
/**
|
|
410
|
+
* Menu content container with role="menu".
|
|
411
|
+
*
|
|
412
|
+
* @element ds-menu-content
|
|
413
|
+
*
|
|
414
|
+
* @slot - Menu items (ds-menu-item elements)
|
|
415
|
+
*
|
|
416
|
+
* @attr {string} data-state - Animation state ("open" or "closed")
|
|
417
|
+
*
|
|
418
|
+
* @example
|
|
419
|
+
* ```html
|
|
420
|
+
* <ds-menu>
|
|
421
|
+
* <button slot="trigger">Actions</button>
|
|
422
|
+
* <ds-menu-content>
|
|
423
|
+
* <ds-menu-item>Edit</ds-menu-item>
|
|
424
|
+
* <ds-menu-item>Delete</ds-menu-item>
|
|
425
|
+
* </ds-menu-content>
|
|
426
|
+
* </ds-menu>
|
|
427
|
+
* ```
|
|
428
|
+
*/
|
|
429
|
+
declare class DsMenuContent extends DSElement {
|
|
430
|
+
/** Unique ID for ARIA association */
|
|
431
|
+
id: string;
|
|
432
|
+
/** Animation state (open or closed) - set by parent ds-menu */
|
|
433
|
+
dataState: MenuContentState;
|
|
434
|
+
connectedCallback(): void;
|
|
435
|
+
render(): lit.TemplateResult<1>;
|
|
436
|
+
}
|
|
437
|
+
declare global {
|
|
438
|
+
interface HTMLElementTagNameMap {
|
|
439
|
+
"ds-menu-content": DsMenuContent;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/**
|
|
444
|
+
* Menu item with role="menuitem".
|
|
445
|
+
*
|
|
446
|
+
* @element ds-menu-item
|
|
447
|
+
*
|
|
448
|
+
* @slot - Item content (text, icon, etc.)
|
|
449
|
+
*
|
|
450
|
+
* @fires ds:select - Fired when item is selected via click, Enter, or Space
|
|
451
|
+
*
|
|
452
|
+
* @example
|
|
453
|
+
* ```html
|
|
454
|
+
* <ds-menu-item value="edit">Edit</ds-menu-item>
|
|
455
|
+
* <ds-menu-item value="delete" disabled>Delete</ds-menu-item>
|
|
456
|
+
* ```
|
|
457
|
+
*/
|
|
458
|
+
declare class DsMenuItem extends DSElement {
|
|
459
|
+
/** Whether the item is disabled */
|
|
460
|
+
disabled: boolean;
|
|
461
|
+
/** Value associated with this item (used in ds:select event) */
|
|
462
|
+
value: string;
|
|
463
|
+
connectedCallback(): void;
|
|
464
|
+
disconnectedCallback(): void;
|
|
465
|
+
private updateAriaDisabled;
|
|
466
|
+
private handleClick;
|
|
467
|
+
private handleKeyDown;
|
|
468
|
+
/**
|
|
469
|
+
* Triggers selection of this item.
|
|
470
|
+
* Emits ds:select event and notifies parent menu to close.
|
|
471
|
+
*/
|
|
472
|
+
select(): void;
|
|
473
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
474
|
+
render(): lit.TemplateResult<1>;
|
|
475
|
+
}
|
|
476
|
+
declare global {
|
|
477
|
+
interface HTMLElementTagNameMap {
|
|
478
|
+
"ds-menu-item": DsMenuItem;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/**
|
|
483
|
+
* Menu component with roving focus and type-ahead.
|
|
484
|
+
*
|
|
485
|
+
* Implements WAI-ARIA Menu Button pattern with:
|
|
486
|
+
* - Arrow key navigation between items
|
|
487
|
+
* - Type-ahead search to jump to items
|
|
488
|
+
* - Enter/Space/Click to select items
|
|
489
|
+
* - Escape to close
|
|
490
|
+
*
|
|
491
|
+
* @element ds-menu
|
|
492
|
+
*
|
|
493
|
+
* @slot trigger - Button that opens the menu
|
|
494
|
+
* @slot - Menu content (ds-menu-content with ds-menu-item children)
|
|
495
|
+
*
|
|
496
|
+
* @fires ds:open - Fired when menu opens
|
|
497
|
+
* @fires ds:close - Fired when menu closes
|
|
498
|
+
* @fires ds:select - Fired when a menu item is selected (bubbles from ds-menu-item)
|
|
499
|
+
*
|
|
500
|
+
* @example
|
|
501
|
+
* ```html
|
|
502
|
+
* <ds-menu>
|
|
503
|
+
* <button slot="trigger">Actions</button>
|
|
504
|
+
* <ds-menu-content>
|
|
505
|
+
* <ds-menu-item value="edit">Edit</ds-menu-item>
|
|
506
|
+
* <ds-menu-item value="delete">Delete</ds-menu-item>
|
|
507
|
+
* </ds-menu-content>
|
|
508
|
+
* </ds-menu>
|
|
509
|
+
* ```
|
|
510
|
+
*/
|
|
511
|
+
declare class DsMenu extends DSElement {
|
|
512
|
+
/** Whether the menu is open */
|
|
513
|
+
open: boolean;
|
|
514
|
+
/** Placement relative to trigger */
|
|
515
|
+
placement: Placement;
|
|
516
|
+
/** Offset distance from trigger in pixels */
|
|
517
|
+
offset: number;
|
|
518
|
+
/** Whether to flip placement when near viewport edge */
|
|
519
|
+
flip: boolean;
|
|
520
|
+
/** Whether to animate open/close transitions */
|
|
521
|
+
animated: boolean;
|
|
522
|
+
private anchorPosition;
|
|
523
|
+
private dismissLayer;
|
|
524
|
+
private presence;
|
|
525
|
+
private rovingFocus;
|
|
526
|
+
private typeAhead;
|
|
527
|
+
private triggerElement;
|
|
528
|
+
private resizeObserver;
|
|
529
|
+
private scrollHandler;
|
|
530
|
+
private focusFirstOnOpen;
|
|
531
|
+
connectedCallback(): void;
|
|
532
|
+
disconnectedCallback(): void;
|
|
533
|
+
/**
|
|
534
|
+
* Opens the menu.
|
|
535
|
+
*/
|
|
536
|
+
show(): void;
|
|
537
|
+
/**
|
|
538
|
+
* Closes the menu.
|
|
539
|
+
*/
|
|
540
|
+
close(): void;
|
|
541
|
+
/**
|
|
542
|
+
* Completes the close after exit animation.
|
|
543
|
+
*/
|
|
544
|
+
private completeClose;
|
|
545
|
+
/**
|
|
546
|
+
* Toggles the menu open/closed state.
|
|
547
|
+
*/
|
|
548
|
+
toggle(): void;
|
|
549
|
+
private handleTriggerClick;
|
|
550
|
+
private handleTriggerKeyDown;
|
|
551
|
+
private handleItemSelect;
|
|
552
|
+
private handleDismiss;
|
|
553
|
+
private setupTriggerAccessibility;
|
|
554
|
+
private updateTriggerAria;
|
|
555
|
+
private setupPositioning;
|
|
556
|
+
private setupDismissLayer;
|
|
557
|
+
private setupRovingFocus;
|
|
558
|
+
private setupTypeAhead;
|
|
559
|
+
private handleTypeAheadKeyDown;
|
|
560
|
+
private focusInitialItem;
|
|
561
|
+
private cleanup;
|
|
562
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
563
|
+
render(): lit.TemplateResult<1>;
|
|
564
|
+
}
|
|
565
|
+
declare global {
|
|
566
|
+
interface HTMLElementTagNameMap {
|
|
567
|
+
"ds-menu": DsMenu;
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
type AlertDialogContentSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
572
|
+
declare class DsAlertDialogContent extends DSElement {
|
|
573
|
+
/** Size of the alert dialog content */
|
|
574
|
+
size: AlertDialogContentSize;
|
|
575
|
+
/** Data state for animations */
|
|
576
|
+
dataState: "open" | "closed";
|
|
577
|
+
connectedCallback(): void;
|
|
578
|
+
render(): lit.TemplateResult<1>;
|
|
579
|
+
}
|
|
580
|
+
declare global {
|
|
581
|
+
interface HTMLElementTagNameMap {
|
|
582
|
+
"ds-alert-dialog-content": DsAlertDialogContent;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
declare class DsAlertDialogHeader extends DSElement {
|
|
587
|
+
render(): lit.TemplateResult<1>;
|
|
588
|
+
}
|
|
589
|
+
declare global {
|
|
590
|
+
interface HTMLElementTagNameMap {
|
|
591
|
+
"ds-alert-dialog-header": DsAlertDialogHeader;
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
declare class DsAlertDialogFooter extends DSElement {
|
|
596
|
+
render(): lit.TemplateResult<1>;
|
|
597
|
+
}
|
|
598
|
+
declare global {
|
|
599
|
+
interface HTMLElementTagNameMap {
|
|
600
|
+
"ds-alert-dialog-footer": DsAlertDialogFooter;
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
declare class DsAlertDialogTitle extends DSElement {
|
|
605
|
+
connectedCallback(): void;
|
|
606
|
+
render(): lit.TemplateResult<1>;
|
|
607
|
+
}
|
|
608
|
+
declare global {
|
|
609
|
+
interface HTMLElementTagNameMap {
|
|
610
|
+
"ds-alert-dialog-title": DsAlertDialogTitle;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
declare class DsAlertDialogDescription extends DSElement {
|
|
615
|
+
connectedCallback(): void;
|
|
616
|
+
render(): lit.TemplateResult<1>;
|
|
617
|
+
}
|
|
618
|
+
declare global {
|
|
619
|
+
interface HTMLElementTagNameMap {
|
|
620
|
+
"ds-alert-dialog-description": DsAlertDialogDescription;
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
declare class DsAlertDialogAction extends DSElement {
|
|
625
|
+
connectedCallback(): void;
|
|
626
|
+
disconnectedCallback(): void;
|
|
627
|
+
private handleClick;
|
|
628
|
+
render(): lit.TemplateResult<1>;
|
|
629
|
+
}
|
|
630
|
+
declare global {
|
|
631
|
+
interface HTMLElementTagNameMap {
|
|
632
|
+
"ds-alert-dialog-action": DsAlertDialogAction;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
declare class DsAlertDialogCancel extends DSElement {
|
|
637
|
+
connectedCallback(): void;
|
|
638
|
+
disconnectedCallback(): void;
|
|
639
|
+
private handleClick;
|
|
640
|
+
render(): lit.TemplateResult<1>;
|
|
641
|
+
}
|
|
642
|
+
declare global {
|
|
643
|
+
interface HTMLElementTagNameMap {
|
|
644
|
+
"ds-alert-dialog-cancel": DsAlertDialogCancel;
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
declare class DsAlertDialog extends DSElement {
|
|
649
|
+
/** Whether the alert dialog is open */
|
|
650
|
+
open: boolean;
|
|
651
|
+
/** Whether to animate open/close transitions */
|
|
652
|
+
animated: boolean;
|
|
653
|
+
/** Whether the alert dialog is closing (for animation) */
|
|
654
|
+
private isClosing;
|
|
655
|
+
private dialogBehavior;
|
|
656
|
+
private presence;
|
|
657
|
+
connectedCallback(): void;
|
|
658
|
+
disconnectedCallback(): void;
|
|
659
|
+
/**
|
|
660
|
+
* Initializes the dialog behavior primitive.
|
|
661
|
+
* AlertDialog uses role="alertdialog" and disables dismiss on escape/outside click.
|
|
662
|
+
*/
|
|
663
|
+
private initDialogBehavior;
|
|
664
|
+
/**
|
|
665
|
+
* Opens the alert dialog.
|
|
666
|
+
*/
|
|
667
|
+
show(): void;
|
|
668
|
+
/**
|
|
669
|
+
* Closes the alert dialog.
|
|
670
|
+
*/
|
|
671
|
+
close(): void;
|
|
672
|
+
/**
|
|
673
|
+
* Completes the close after exit animation.
|
|
674
|
+
*/
|
|
675
|
+
private completeClose;
|
|
676
|
+
private handleTriggerClick;
|
|
677
|
+
private handleAction;
|
|
678
|
+
private handleCancel;
|
|
679
|
+
private cleanup;
|
|
680
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
681
|
+
/**
|
|
682
|
+
* Updates accessibility attributes on alert dialog content.
|
|
683
|
+
*/
|
|
684
|
+
private updateContentAccessibility;
|
|
685
|
+
render(): lit.TemplateResult<1>;
|
|
686
|
+
}
|
|
687
|
+
declare global {
|
|
688
|
+
interface HTMLElementTagNameMap {
|
|
689
|
+
"ds-alert-dialog": DsAlertDialog;
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
declare class DsAlertDialogTrigger extends DSElement {
|
|
694
|
+
connectedCallback(): void;
|
|
695
|
+
disconnectedCallback(): void;
|
|
696
|
+
private handleClick;
|
|
697
|
+
render(): lit.TemplateResult<1>;
|
|
698
|
+
}
|
|
699
|
+
declare global {
|
|
700
|
+
interface HTMLElementTagNameMap {
|
|
701
|
+
"ds-alert-dialog-trigger": DsAlertDialogTrigger;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
706
|
+
type SheetContentSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
707
|
+
declare class DsSheetContent extends DSElement {
|
|
708
|
+
/** Side of the screen the sheet appears from */
|
|
709
|
+
side: SheetSide;
|
|
710
|
+
/** Size of the sheet content */
|
|
711
|
+
size: SheetContentSize;
|
|
712
|
+
/** Data state for animations */
|
|
713
|
+
dataState: "open" | "closed";
|
|
714
|
+
connectedCallback(): void;
|
|
715
|
+
render(): lit.TemplateResult<1>;
|
|
716
|
+
}
|
|
717
|
+
declare global {
|
|
718
|
+
interface HTMLElementTagNameMap {
|
|
719
|
+
"ds-sheet-content": DsSheetContent;
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
declare class DsSheetOverlay extends DSElement {
|
|
724
|
+
render(): lit.TemplateResult<1>;
|
|
725
|
+
}
|
|
726
|
+
declare global {
|
|
727
|
+
interface HTMLElementTagNameMap {
|
|
728
|
+
"ds-sheet-overlay": DsSheetOverlay;
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
declare class DsSheetHeader extends DSElement {
|
|
733
|
+
render(): lit.TemplateResult<1>;
|
|
734
|
+
}
|
|
735
|
+
declare global {
|
|
736
|
+
interface HTMLElementTagNameMap {
|
|
737
|
+
"ds-sheet-header": DsSheetHeader;
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
declare class DsSheetFooter extends DSElement {
|
|
742
|
+
render(): lit.TemplateResult<1>;
|
|
743
|
+
}
|
|
744
|
+
declare global {
|
|
745
|
+
interface HTMLElementTagNameMap {
|
|
746
|
+
"ds-sheet-footer": DsSheetFooter;
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
declare class DsSheetTitle extends DSElement {
|
|
751
|
+
connectedCallback(): void;
|
|
752
|
+
render(): lit.TemplateResult<1>;
|
|
753
|
+
}
|
|
754
|
+
declare global {
|
|
755
|
+
interface HTMLElementTagNameMap {
|
|
756
|
+
"ds-sheet-title": DsSheetTitle;
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
declare class DsSheetDescription extends DSElement {
|
|
761
|
+
connectedCallback(): void;
|
|
762
|
+
render(): lit.TemplateResult<1>;
|
|
763
|
+
}
|
|
764
|
+
declare global {
|
|
765
|
+
interface HTMLElementTagNameMap {
|
|
766
|
+
"ds-sheet-description": DsSheetDescription;
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
declare class DsSheetClose extends DSElement {
|
|
771
|
+
connectedCallback(): void;
|
|
772
|
+
disconnectedCallback(): void;
|
|
773
|
+
private handleClick;
|
|
774
|
+
render(): lit.TemplateResult<1>;
|
|
775
|
+
}
|
|
776
|
+
declare global {
|
|
777
|
+
interface HTMLElementTagNameMap {
|
|
778
|
+
"ds-sheet-close": DsSheetClose;
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
declare class DsSheet extends DSElement {
|
|
783
|
+
/** Whether the sheet is open */
|
|
784
|
+
open: boolean;
|
|
785
|
+
/** Whether Escape key closes the sheet */
|
|
786
|
+
closeOnEscape: boolean;
|
|
787
|
+
/** Whether clicking the overlay closes the sheet */
|
|
788
|
+
closeOnOverlay: boolean;
|
|
789
|
+
/** Whether to animate open/close transitions */
|
|
790
|
+
animated: boolean;
|
|
791
|
+
/** Whether the sheet is closing (for animation) */
|
|
792
|
+
private isClosing;
|
|
793
|
+
private dialogBehavior;
|
|
794
|
+
private presence;
|
|
795
|
+
connectedCallback(): void;
|
|
796
|
+
disconnectedCallback(): void;
|
|
797
|
+
/**
|
|
798
|
+
* Initializes the dialog behavior primitive.
|
|
799
|
+
*/
|
|
800
|
+
private initDialogBehavior;
|
|
801
|
+
/**
|
|
802
|
+
* Handles close triggered by the behavior (escape/outside click).
|
|
803
|
+
*/
|
|
804
|
+
private handleBehaviorClose;
|
|
805
|
+
/**
|
|
806
|
+
* Opens the sheet.
|
|
807
|
+
*/
|
|
808
|
+
show(): void;
|
|
809
|
+
/**
|
|
810
|
+
* Closes the sheet.
|
|
811
|
+
*/
|
|
812
|
+
close(): void;
|
|
813
|
+
/**
|
|
814
|
+
* Completes the close after exit animation.
|
|
815
|
+
*/
|
|
816
|
+
private completeClose;
|
|
817
|
+
private handleTriggerClick;
|
|
818
|
+
private handleCloseRequest;
|
|
819
|
+
private cleanup;
|
|
820
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
821
|
+
/**
|
|
822
|
+
* Updates accessibility attributes on sheet content.
|
|
823
|
+
*/
|
|
824
|
+
private updateContentAccessibility;
|
|
825
|
+
render(): lit.TemplateResult<1>;
|
|
826
|
+
}
|
|
827
|
+
declare global {
|
|
828
|
+
interface HTMLElementTagNameMap {
|
|
829
|
+
"ds-sheet": DsSheet;
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
declare class DsDrawerContent extends DSElement {
|
|
834
|
+
/** Side of the screen the drawer appears from (set by parent) */
|
|
835
|
+
side: DrawerSide;
|
|
836
|
+
/** Data state for animations */
|
|
837
|
+
dataState: "open" | "closed";
|
|
838
|
+
/** Whether swipe-to-dismiss is enabled (set by parent) */
|
|
839
|
+
swipeDismiss: boolean;
|
|
840
|
+
/** Current swipe offset during drag */
|
|
841
|
+
private swipeOffset;
|
|
842
|
+
/** Whether currently dragging */
|
|
843
|
+
private isDragging;
|
|
844
|
+
private startY;
|
|
845
|
+
private startX;
|
|
846
|
+
connectedCallback(): void;
|
|
847
|
+
disconnectedCallback(): void;
|
|
848
|
+
private handleTouchStart;
|
|
849
|
+
private handleTouchMove;
|
|
850
|
+
private handleTouchEnd;
|
|
851
|
+
private updateSwipeTransform;
|
|
852
|
+
render(): lit.TemplateResult<1>;
|
|
853
|
+
}
|
|
854
|
+
declare global {
|
|
855
|
+
interface HTMLElementTagNameMap {
|
|
856
|
+
"ds-drawer-content": DsDrawerContent;
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
declare class DsDrawerHeader extends DSElement {
|
|
861
|
+
render(): lit.TemplateResult<1>;
|
|
862
|
+
}
|
|
863
|
+
declare global {
|
|
864
|
+
interface HTMLElementTagNameMap {
|
|
865
|
+
"ds-drawer-header": DsDrawerHeader;
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
declare class DsDrawerFooter extends DSElement {
|
|
870
|
+
render(): lit.TemplateResult<1>;
|
|
871
|
+
}
|
|
872
|
+
declare global {
|
|
873
|
+
interface HTMLElementTagNameMap {
|
|
874
|
+
"ds-drawer-footer": DsDrawerFooter;
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
declare class DsDrawerTitle extends DSElement {
|
|
879
|
+
connectedCallback(): void;
|
|
880
|
+
render(): lit.TemplateResult<1>;
|
|
881
|
+
}
|
|
882
|
+
declare global {
|
|
883
|
+
interface HTMLElementTagNameMap {
|
|
884
|
+
"ds-drawer-title": DsDrawerTitle;
|
|
885
|
+
}
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
declare class DsDrawerDescription extends DSElement {
|
|
889
|
+
connectedCallback(): void;
|
|
890
|
+
render(): lit.TemplateResult<1>;
|
|
891
|
+
}
|
|
892
|
+
declare global {
|
|
893
|
+
interface HTMLElementTagNameMap {
|
|
894
|
+
"ds-drawer-description": DsDrawerDescription;
|
|
895
|
+
}
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
type DrawerSide = "top" | "right" | "bottom" | "left";
|
|
899
|
+
declare class DsDrawer extends DSElement {
|
|
900
|
+
/** Whether the drawer is open */
|
|
901
|
+
open: boolean;
|
|
902
|
+
/** Side of the screen the drawer appears from */
|
|
903
|
+
side: DrawerSide;
|
|
904
|
+
/** Whether swipe-to-dismiss is enabled */
|
|
905
|
+
swipeDismiss: boolean;
|
|
906
|
+
/** Whether Escape key closes the drawer */
|
|
907
|
+
closeOnEscape: boolean;
|
|
908
|
+
/** Whether clicking the overlay closes the drawer */
|
|
909
|
+
closeOnOverlay: boolean;
|
|
910
|
+
/** Whether to animate open/close transitions */
|
|
911
|
+
animated: boolean;
|
|
912
|
+
/** Whether the drawer is closing (for animation) */
|
|
913
|
+
private isClosing;
|
|
914
|
+
private dialogBehavior;
|
|
915
|
+
private presence;
|
|
916
|
+
connectedCallback(): void;
|
|
917
|
+
disconnectedCallback(): void;
|
|
918
|
+
/**
|
|
919
|
+
* Initializes the dialog behavior primitive.
|
|
920
|
+
*/
|
|
921
|
+
private initDialogBehavior;
|
|
922
|
+
/**
|
|
923
|
+
* Handles close triggered by the behavior (escape/outside click).
|
|
924
|
+
*/
|
|
925
|
+
private handleBehaviorClose;
|
|
926
|
+
/**
|
|
927
|
+
* Opens the drawer.
|
|
928
|
+
*/
|
|
929
|
+
show(): void;
|
|
930
|
+
/**
|
|
931
|
+
* Closes the drawer.
|
|
932
|
+
*/
|
|
933
|
+
close(): void;
|
|
934
|
+
/**
|
|
935
|
+
* Completes the close after exit animation.
|
|
936
|
+
*/
|
|
937
|
+
private completeClose;
|
|
938
|
+
private handleTriggerClick;
|
|
939
|
+
private handleCloseRequest;
|
|
940
|
+
private handleOverlayClick;
|
|
941
|
+
private cleanup;
|
|
942
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
943
|
+
/**
|
|
944
|
+
* Updates accessibility attributes on drawer content.
|
|
945
|
+
*/
|
|
946
|
+
private updateContentAccessibility;
|
|
947
|
+
render(): lit.TemplateResult<1>;
|
|
948
|
+
}
|
|
949
|
+
declare global {
|
|
950
|
+
interface HTMLElementTagNameMap {
|
|
951
|
+
"ds-drawer": DsDrawer;
|
|
952
|
+
}
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
declare class DsDropdownMenuContent extends DSElement {
|
|
956
|
+
/** Data state for animations */
|
|
957
|
+
dataState: "open" | "closed";
|
|
958
|
+
connectedCallback(): void;
|
|
959
|
+
render(): lit.TemplateResult<1>;
|
|
960
|
+
}
|
|
961
|
+
declare global {
|
|
962
|
+
interface HTMLElementTagNameMap {
|
|
963
|
+
"ds-dropdown-menu-content": DsDropdownMenuContent;
|
|
964
|
+
}
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
type DropdownMenuItemVariant = "default" | "destructive";
|
|
968
|
+
declare class DsDropdownMenuItem extends DSElement {
|
|
969
|
+
/** Value for selection events */
|
|
970
|
+
value: string;
|
|
971
|
+
/** Visual variant */
|
|
972
|
+
variant: DropdownMenuItemVariant;
|
|
973
|
+
/** Disabled state */
|
|
974
|
+
disabled: boolean;
|
|
975
|
+
connectedCallback(): void;
|
|
976
|
+
disconnectedCallback(): void;
|
|
977
|
+
private handleSelect;
|
|
978
|
+
private handleKeyDown;
|
|
979
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
980
|
+
render(): lit.TemplateResult<1>;
|
|
981
|
+
}
|
|
982
|
+
declare global {
|
|
983
|
+
interface HTMLElementTagNameMap {
|
|
984
|
+
"ds-dropdown-menu-item": DsDropdownMenuItem;
|
|
985
|
+
}
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
declare class DsDropdownMenuSeparator extends DSElement {
|
|
989
|
+
connectedCallback(): void;
|
|
990
|
+
render(): lit.TemplateResult<1>;
|
|
991
|
+
}
|
|
992
|
+
declare global {
|
|
993
|
+
interface HTMLElementTagNameMap {
|
|
994
|
+
"ds-dropdown-menu-separator": DsDropdownMenuSeparator;
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
declare class DsDropdownMenuLabel extends DSElement {
|
|
999
|
+
connectedCallback(): void;
|
|
1000
|
+
render(): lit.TemplateResult<1>;
|
|
1001
|
+
}
|
|
1002
|
+
declare global {
|
|
1003
|
+
interface HTMLElementTagNameMap {
|
|
1004
|
+
"ds-dropdown-menu-label": DsDropdownMenuLabel;
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
declare class DsDropdownMenuCheckboxItem extends DSElement {
|
|
1009
|
+
/** Whether the checkbox is checked */
|
|
1010
|
+
checked: boolean;
|
|
1011
|
+
/** Disabled state */
|
|
1012
|
+
disabled: boolean;
|
|
1013
|
+
connectedCallback(): void;
|
|
1014
|
+
disconnectedCallback(): void;
|
|
1015
|
+
private handleToggle;
|
|
1016
|
+
private handleKeyDown;
|
|
1017
|
+
private updateAriaChecked;
|
|
1018
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
1019
|
+
render(): lit.TemplateResult<1>;
|
|
1020
|
+
}
|
|
1021
|
+
declare global {
|
|
1022
|
+
interface HTMLElementTagNameMap {
|
|
1023
|
+
"ds-dropdown-menu-checkbox-item": DsDropdownMenuCheckboxItem;
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
declare class DsDropdownMenuRadioGroup extends DSElement {
|
|
1028
|
+
/** Currently selected value */
|
|
1029
|
+
value: string;
|
|
1030
|
+
connectedCallback(): void;
|
|
1031
|
+
disconnectedCallback(): void;
|
|
1032
|
+
private handleRadioSelect;
|
|
1033
|
+
private updateRadioItems;
|
|
1034
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
1035
|
+
render(): lit.TemplateResult<1>;
|
|
1036
|
+
}
|
|
1037
|
+
declare global {
|
|
1038
|
+
interface HTMLElementTagNameMap {
|
|
1039
|
+
"ds-dropdown-menu-radio-group": DsDropdownMenuRadioGroup;
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
declare class DsDropdownMenuRadioItem extends DSElement {
|
|
1044
|
+
/** Value for selection */
|
|
1045
|
+
value: string;
|
|
1046
|
+
/** Whether the radio is selected */
|
|
1047
|
+
checked: boolean;
|
|
1048
|
+
/** Disabled state */
|
|
1049
|
+
disabled: boolean;
|
|
1050
|
+
connectedCallback(): void;
|
|
1051
|
+
disconnectedCallback(): void;
|
|
1052
|
+
private handleSelect;
|
|
1053
|
+
private handleKeyDown;
|
|
1054
|
+
private updateAriaChecked;
|
|
1055
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
1056
|
+
render(): lit.TemplateResult<1>;
|
|
1057
|
+
}
|
|
1058
|
+
declare global {
|
|
1059
|
+
interface HTMLElementTagNameMap {
|
|
1060
|
+
"ds-dropdown-menu-radio-item": DsDropdownMenuRadioItem;
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
declare class DsDropdownMenu extends DSElement {
|
|
1065
|
+
/** Whether the menu is open */
|
|
1066
|
+
open: boolean;
|
|
1067
|
+
/** Placement relative to trigger */
|
|
1068
|
+
placement: Placement;
|
|
1069
|
+
/** Offset distance from trigger in pixels */
|
|
1070
|
+
offset: number;
|
|
1071
|
+
/** Whether to flip placement when near viewport edge */
|
|
1072
|
+
flip: boolean;
|
|
1073
|
+
/** Whether to animate open/close transitions */
|
|
1074
|
+
animated: boolean;
|
|
1075
|
+
/** Modal behavior - blocks interaction outside menu */
|
|
1076
|
+
modal: boolean;
|
|
1077
|
+
private menuBehavior;
|
|
1078
|
+
private presence;
|
|
1079
|
+
private focusFirstOnOpen;
|
|
1080
|
+
connectedCallback(): void;
|
|
1081
|
+
disconnectedCallback(): void;
|
|
1082
|
+
/**
|
|
1083
|
+
* Initializes the menu behavior primitive.
|
|
1084
|
+
*/
|
|
1085
|
+
private initMenuBehavior;
|
|
1086
|
+
/**
|
|
1087
|
+
* Handles close triggered by the behavior (escape/outside click).
|
|
1088
|
+
*/
|
|
1089
|
+
private handleBehaviorClose;
|
|
1090
|
+
/**
|
|
1091
|
+
* Opens the menu.
|
|
1092
|
+
*/
|
|
1093
|
+
show(): void;
|
|
1094
|
+
/**
|
|
1095
|
+
* Closes the menu.
|
|
1096
|
+
*/
|
|
1097
|
+
close(): void;
|
|
1098
|
+
private completeClose;
|
|
1099
|
+
toggle(): void;
|
|
1100
|
+
private handleTriggerClick;
|
|
1101
|
+
private handleTriggerKeyDown;
|
|
1102
|
+
private handleItemSelect;
|
|
1103
|
+
private setupTriggerAccessibility;
|
|
1104
|
+
private updateTriggerAria;
|
|
1105
|
+
private registerMenuItems;
|
|
1106
|
+
private cleanup;
|
|
1107
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
1108
|
+
render(): lit.TemplateResult<1>;
|
|
1109
|
+
}
|
|
1110
|
+
declare global {
|
|
1111
|
+
interface HTMLElementTagNameMap {
|
|
1112
|
+
"ds-dropdown-menu": DsDropdownMenu;
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
declare class DsContextMenuContent extends DSElement {
|
|
1117
|
+
/** Data state for animations */
|
|
1118
|
+
dataState: "open" | "closed";
|
|
1119
|
+
connectedCallback(): void;
|
|
1120
|
+
render(): lit.TemplateResult<1>;
|
|
1121
|
+
}
|
|
1122
|
+
declare global {
|
|
1123
|
+
interface HTMLElementTagNameMap {
|
|
1124
|
+
"ds-context-menu-content": DsContextMenuContent;
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
type ContextMenuItemVariant = "default" | "destructive";
|
|
1129
|
+
declare class DsContextMenuItem extends DSElement {
|
|
1130
|
+
/** Value for selection events */
|
|
1131
|
+
value: string;
|
|
1132
|
+
/** Visual variant */
|
|
1133
|
+
variant: ContextMenuItemVariant;
|
|
1134
|
+
/** Disabled state */
|
|
1135
|
+
disabled: boolean;
|
|
1136
|
+
connectedCallback(): void;
|
|
1137
|
+
disconnectedCallback(): void;
|
|
1138
|
+
private handleSelect;
|
|
1139
|
+
private handleKeyDown;
|
|
1140
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
1141
|
+
render(): lit.TemplateResult<1>;
|
|
1142
|
+
}
|
|
1143
|
+
declare global {
|
|
1144
|
+
interface HTMLElementTagNameMap {
|
|
1145
|
+
"ds-context-menu-item": DsContextMenuItem;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
declare class DsContextMenuSeparator extends DSElement {
|
|
1150
|
+
connectedCallback(): void;
|
|
1151
|
+
render(): lit.TemplateResult<1>;
|
|
1152
|
+
}
|
|
1153
|
+
declare global {
|
|
1154
|
+
interface HTMLElementTagNameMap {
|
|
1155
|
+
"ds-context-menu-separator": DsContextMenuSeparator;
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
declare class DsContextMenuLabel extends DSElement {
|
|
1160
|
+
connectedCallback(): void;
|
|
1161
|
+
render(): lit.TemplateResult<1>;
|
|
1162
|
+
}
|
|
1163
|
+
declare global {
|
|
1164
|
+
interface HTMLElementTagNameMap {
|
|
1165
|
+
"ds-context-menu-label": DsContextMenuLabel;
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
declare class DsContextMenu extends DSElement {
|
|
1170
|
+
/** Whether the menu is open */
|
|
1171
|
+
open: boolean;
|
|
1172
|
+
/** Whether to animate open/close transitions */
|
|
1173
|
+
animated: boolean;
|
|
1174
|
+
/** Position X for menu */
|
|
1175
|
+
private pointerX;
|
|
1176
|
+
/** Position Y for menu */
|
|
1177
|
+
private pointerY;
|
|
1178
|
+
private menuBehavior;
|
|
1179
|
+
private presence;
|
|
1180
|
+
private longPressTimer;
|
|
1181
|
+
connectedCallback(): void;
|
|
1182
|
+
disconnectedCallback(): void;
|
|
1183
|
+
/**
|
|
1184
|
+
* Initializes the menu behavior primitive.
|
|
1185
|
+
*/
|
|
1186
|
+
private initMenuBehavior;
|
|
1187
|
+
/**
|
|
1188
|
+
* Handles close triggered by the behavior (escape/outside click).
|
|
1189
|
+
*/
|
|
1190
|
+
private handleBehaviorClose;
|
|
1191
|
+
/**
|
|
1192
|
+
* Opens the menu at the specified position.
|
|
1193
|
+
*/
|
|
1194
|
+
show(x: number, y: number): void;
|
|
1195
|
+
/**
|
|
1196
|
+
* Closes the menu.
|
|
1197
|
+
*/
|
|
1198
|
+
close(): void;
|
|
1199
|
+
private completeClose;
|
|
1200
|
+
private handleContextMenu;
|
|
1201
|
+
private handleTouchStart;
|
|
1202
|
+
private handleTouchEnd;
|
|
1203
|
+
private handleTouchMove;
|
|
1204
|
+
private handleItemSelect;
|
|
1205
|
+
private positionContent;
|
|
1206
|
+
private registerMenuItems;
|
|
1207
|
+
private cleanup;
|
|
1208
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
1209
|
+
render(): lit.TemplateResult<1>;
|
|
1210
|
+
}
|
|
1211
|
+
declare global {
|
|
1212
|
+
interface HTMLElementTagNameMap {
|
|
1213
|
+
"ds-context-menu": DsContextMenu;
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
type HoverCardContentState = "open" | "closed";
|
|
1218
|
+
declare class DsHoverCardContent extends DSElement {
|
|
1219
|
+
/** Unique ID for ARIA association */
|
|
1220
|
+
id: string;
|
|
1221
|
+
/** Animation state (open or closed) - set by parent */
|
|
1222
|
+
dataState: HoverCardContentState;
|
|
1223
|
+
connectedCallback(): void;
|
|
1224
|
+
render(): lit.TemplateResult<1>;
|
|
1225
|
+
}
|
|
1226
|
+
declare global {
|
|
1227
|
+
interface HTMLElementTagNameMap {
|
|
1228
|
+
"ds-hover-card-content": DsHoverCardContent;
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
declare class DsHoverCard extends DSElement {
|
|
1233
|
+
/** Whether the hover card is open */
|
|
1234
|
+
open: boolean;
|
|
1235
|
+
/** Placement relative to trigger */
|
|
1236
|
+
placement: Placement;
|
|
1237
|
+
/** Offset distance from trigger in pixels */
|
|
1238
|
+
offset: number;
|
|
1239
|
+
/** Whether to flip placement when near viewport edge */
|
|
1240
|
+
flip: boolean;
|
|
1241
|
+
/** Delay in ms before showing on hover */
|
|
1242
|
+
openDelay: number;
|
|
1243
|
+
/** Delay in ms before hiding after hover leaves */
|
|
1244
|
+
closeDelay: number;
|
|
1245
|
+
/** Whether to animate open/close transitions */
|
|
1246
|
+
animated: boolean;
|
|
1247
|
+
private anchorPosition;
|
|
1248
|
+
private dismissLayer;
|
|
1249
|
+
private presence;
|
|
1250
|
+
private resizeObserver;
|
|
1251
|
+
private scrollHandler;
|
|
1252
|
+
private openTimer;
|
|
1253
|
+
private closeTimer;
|
|
1254
|
+
private isHoveringTrigger;
|
|
1255
|
+
private isHoveringContent;
|
|
1256
|
+
connectedCallback(): void;
|
|
1257
|
+
disconnectedCallback(): void;
|
|
1258
|
+
/**
|
|
1259
|
+
* Opens the hover card.
|
|
1260
|
+
*/
|
|
1261
|
+
show(): void;
|
|
1262
|
+
/**
|
|
1263
|
+
* Closes the hover card.
|
|
1264
|
+
*/
|
|
1265
|
+
close(): void;
|
|
1266
|
+
private completeClose;
|
|
1267
|
+
private clearTimers;
|
|
1268
|
+
private handleTriggerMouseEnter;
|
|
1269
|
+
private handleTriggerMouseLeave;
|
|
1270
|
+
private handleFocusIn;
|
|
1271
|
+
private handleFocusOut;
|
|
1272
|
+
private scheduleOpen;
|
|
1273
|
+
private scheduleClose;
|
|
1274
|
+
private cancelOpen;
|
|
1275
|
+
private cancelClose;
|
|
1276
|
+
private handleDismiss;
|
|
1277
|
+
private setupTriggerAccessibility;
|
|
1278
|
+
private updateTriggerAria;
|
|
1279
|
+
private setupPositioning;
|
|
1280
|
+
private setupDismissLayer;
|
|
1281
|
+
private cleanup;
|
|
1282
|
+
updated(changedProperties: Map<string, unknown>): Promise<void>;
|
|
1283
|
+
render(): lit.TemplateResult<1>;
|
|
1284
|
+
}
|
|
1285
|
+
declare global {
|
|
1286
|
+
interface HTMLElementTagNameMap {
|
|
1287
|
+
"ds-hover-card": DsHoverCard;
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
export { type AlertDialogContentSize, type ContextMenuItemVariant, type DialogContentSize, type DialogRole, type DrawerSide, type DropdownMenuItemVariant, DsAlertDialog, DsAlertDialogAction, DsAlertDialogCancel, DsAlertDialogContent, DsAlertDialogDescription, DsAlertDialogFooter, DsAlertDialogHeader, DsAlertDialogTitle, DsAlertDialogTrigger, DsContextMenu, DsContextMenuContent, DsContextMenuItem, DsContextMenuLabel, DsContextMenuSeparator, DsDialog, DsDialogContent, DsDialogDescription, DsDialogTitle, DsDrawer, DsDrawerContent, DsDrawerDescription, DsDrawerFooter, DsDrawerHeader, DsDrawerTitle, DsDropdownMenu, DsDropdownMenuCheckboxItem, DsDropdownMenuContent, DsDropdownMenuItem, DsDropdownMenuLabel, DsDropdownMenuRadioGroup, DsDropdownMenuRadioItem, DsDropdownMenuSeparator, DsHoverCard, DsHoverCardContent, DsMenu, DsMenuContent, DsMenuItem, DsPopover, DsPopoverContent, DsSheet, DsSheetClose, DsSheetContent, DsSheetDescription, DsSheetFooter, DsSheetHeader, DsSheetOverlay, DsSheetTitle, DsTooltip, DsTooltipContent, type HoverCardContentState, type SheetContentSize, type SheetSide };
|