luxen-ui 0.22.0 → 0.22.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/cdn/custom-elements.json +556 -556
- package/cdn/elements/dropdown/dropdown.d.ts +8 -0
- package/cdn/elements/dropdown/dropdown.d.ts.map +1 -1
- package/cdn/elements/dropdown/dropdown.js +2 -2
- package/cdn/elements/dropdown/dropdown.js.map +1 -1
- package/dist/custom-elements.json +556 -556
- package/dist/elements/dropdown/dropdown.d.ts +8 -0
- package/dist/elements/dropdown/dropdown.d.ts.map +1 -1
- package/dist/elements/dropdown/dropdown.js +33 -8
- package/dist/metadata/index.json +1 -1
- package/package.json +1 -1
package/cdn/custom-elements.json
CHANGED
|
@@ -4,144 +4,447 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/html/elements/alert/alert.ts",
|
|
7
|
+
"path": "src/html/elements/alert-dialog/alert-dialog.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "",
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "Fired when the user accepts an alert dialog (the confirm action). Cancelable —\ncall `event.preventDefault()` to keep the dialog open (e.g. to await an async\ntask); close it yourself afterwards by setting `open = false`.\n\nDoes not bubble and is not composed: listen on the element itself.",
|
|
12
|
+
"name": "ConfirmEvent",
|
|
13
|
+
"superclass": {
|
|
14
|
+
"name": "Event",
|
|
15
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "class",
|
|
20
|
+
"description": "Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\nclose request). Cancelable — call `event.preventDefault()` to keep it open.\n\nDoes not bubble and is not composed: listen on the element itself.",
|
|
21
|
+
"name": "CancelEvent",
|
|
22
|
+
"superclass": {
|
|
23
|
+
"name": "Event",
|
|
24
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"kind": "class",
|
|
29
|
+
"description": "An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\ncancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\nconsequential action (delete, publish, discard) — not for generic content.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). The dialog closes automatically when the user picks an\naction, unless the matching `confirm` / `cancel` event is canceled.",
|
|
30
|
+
"name": "AlertDialog",
|
|
13
31
|
"cssProperties": [
|
|
14
32
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--
|
|
17
|
-
"default": "
|
|
33
|
+
"description": "Dialog width.",
|
|
34
|
+
"name": "--width",
|
|
35
|
+
"default": "31rem",
|
|
36
|
+
"inheritedFrom": {
|
|
37
|
+
"name": "Dialog",
|
|
38
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
39
|
+
}
|
|
18
40
|
},
|
|
19
41
|
{
|
|
20
|
-
"description": "
|
|
42
|
+
"description": "Dialog border radius.",
|
|
43
|
+
"name": "--border-radius",
|
|
44
|
+
"default": "6px",
|
|
45
|
+
"inheritedFrom": {
|
|
46
|
+
"name": "Dialog",
|
|
47
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"description": "Padding applied to the header, footer, and inline-padding of the body.",
|
|
21
52
|
"name": "--padding",
|
|
22
|
-
"default": "
|
|
53
|
+
"default": "1.5rem",
|
|
54
|
+
"inheritedFrom": {
|
|
55
|
+
"name": "Dialog",
|
|
56
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
57
|
+
}
|
|
23
58
|
},
|
|
24
59
|
{
|
|
25
|
-
"description": "
|
|
26
|
-
"name": "--
|
|
27
|
-
"default": "
|
|
60
|
+
"description": "Open transition duration.",
|
|
61
|
+
"name": "--show-duration",
|
|
62
|
+
"default": "200ms",
|
|
63
|
+
"inheritedFrom": {
|
|
64
|
+
"name": "Dialog",
|
|
65
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"description": "Close transition duration.",
|
|
70
|
+
"name": "--hide-duration",
|
|
71
|
+
"default": "200ms",
|
|
72
|
+
"inheritedFrom": {
|
|
73
|
+
"name": "Dialog",
|
|
74
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"description": "Timing function of the open and close transitions, backdrop included.",
|
|
79
|
+
"name": "--easing",
|
|
80
|
+
"default": "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
81
|
+
"inheritedFrom": {
|
|
82
|
+
"name": "Dialog",
|
|
83
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"description": "Backdrop color.",
|
|
88
|
+
"name": "--backdrop",
|
|
89
|
+
"inheritedFrom": {
|
|
90
|
+
"name": "Dialog",
|
|
91
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"description": "Backdrop blur amount (any CSS length).",
|
|
96
|
+
"name": "--backdrop-blur",
|
|
97
|
+
"default": "0",
|
|
98
|
+
"inheritedFrom": {
|
|
99
|
+
"name": "Dialog",
|
|
100
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"cssParts": [
|
|
105
|
+
{
|
|
106
|
+
"description": "The native `<dialog>` element.",
|
|
107
|
+
"name": "dialog",
|
|
108
|
+
"inheritedFrom": {
|
|
109
|
+
"name": "Dialog",
|
|
110
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"description": "The header wrapper containing the title.",
|
|
115
|
+
"name": "header",
|
|
116
|
+
"inheritedFrom": {
|
|
117
|
+
"name": "Dialog",
|
|
118
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"description": "The dialog title heading.",
|
|
123
|
+
"name": "title",
|
|
124
|
+
"inheritedFrom": {
|
|
125
|
+
"name": "Dialog",
|
|
126
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"description": "The body wrapper around the description.",
|
|
131
|
+
"name": "body",
|
|
132
|
+
"inheritedFrom": {
|
|
133
|
+
"name": "Dialog",
|
|
134
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"description": "The footer wrapper around the actions.",
|
|
139
|
+
"name": "footer",
|
|
140
|
+
"inheritedFrom": {
|
|
141
|
+
"name": "Dialog",
|
|
142
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"description": "Both built-in action buttons.",
|
|
147
|
+
"name": "button"
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"description": "The built-in cancel button.",
|
|
151
|
+
"name": "cancel"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"description": "The built-in confirm button.",
|
|
155
|
+
"name": "confirm"
|
|
156
|
+
}
|
|
157
|
+
],
|
|
158
|
+
"slots": [
|
|
159
|
+
{
|
|
160
|
+
"description": "Description text. Provides the dialog's accessible description.",
|
|
161
|
+
"name": "",
|
|
162
|
+
"inheritedFrom": {
|
|
163
|
+
"name": "Dialog",
|
|
164
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.",
|
|
169
|
+
"name": "title",
|
|
170
|
+
"inheritedFrom": {
|
|
171
|
+
"name": "Dialog",
|
|
172
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"description": "Replaces the built-in cancel action (e.g. a link). Keep it focusable.",
|
|
177
|
+
"name": "cancel"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"description": "Replaces the built-in confirm action.",
|
|
181
|
+
"name": "confirm"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"description": "Close button (typically `<button class=\"l-close\">`).",
|
|
185
|
+
"name": "close",
|
|
186
|
+
"inheritedFrom": {
|
|
187
|
+
"name": "Dialog",
|
|
188
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"description": "Footer actions.",
|
|
193
|
+
"name": "footer",
|
|
194
|
+
"inheritedFrom": {
|
|
195
|
+
"name": "Dialog",
|
|
196
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
197
|
+
}
|
|
28
198
|
}
|
|
29
199
|
],
|
|
30
200
|
"members": [
|
|
31
201
|
{
|
|
32
202
|
"kind": "field",
|
|
33
|
-
"name": "
|
|
203
|
+
"name": "confirmText",
|
|
34
204
|
"type": {
|
|
35
|
-
"text": "
|
|
205
|
+
"text": "string"
|
|
36
206
|
},
|
|
37
|
-
"
|
|
38
|
-
"
|
|
207
|
+
"default": "'Confirm'",
|
|
208
|
+
"description": "Label for the confirm action.",
|
|
209
|
+
"attribute": "confirm-text"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"kind": "field",
|
|
213
|
+
"name": "cancelText",
|
|
214
|
+
"type": {
|
|
215
|
+
"text": "string"
|
|
216
|
+
},
|
|
217
|
+
"default": "'Cancel'",
|
|
218
|
+
"description": "Label for the cancel action.",
|
|
219
|
+
"attribute": "cancel-text"
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"kind": "field",
|
|
223
|
+
"name": "tone",
|
|
224
|
+
"type": {
|
|
225
|
+
"text": "'danger' | undefined"
|
|
226
|
+
},
|
|
227
|
+
"description": "Visual tone. `danger` renders the confirm action as destructive.",
|
|
228
|
+
"attribute": "tone",
|
|
39
229
|
"reflects": true
|
|
40
230
|
},
|
|
41
231
|
{
|
|
42
232
|
"kind": "field",
|
|
43
|
-
"name": "
|
|
233
|
+
"name": "loading",
|
|
234
|
+
"type": {
|
|
235
|
+
"text": "boolean"
|
|
236
|
+
},
|
|
237
|
+
"default": "false",
|
|
238
|
+
"description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
|
|
239
|
+
"attribute": "loading",
|
|
240
|
+
"reflects": true
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "field",
|
|
244
|
+
"name": "title",
|
|
245
|
+
"type": {
|
|
246
|
+
"text": "string"
|
|
247
|
+
},
|
|
248
|
+
"default": "''",
|
|
249
|
+
"description": "Dialog title rendered in the header and used as the dialog's accessible name.",
|
|
250
|
+
"attribute": "title",
|
|
251
|
+
"inheritedFrom": {
|
|
252
|
+
"name": "Dialog",
|
|
253
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"kind": "field",
|
|
258
|
+
"name": "open",
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "boolean"
|
|
261
|
+
},
|
|
262
|
+
"default": "false",
|
|
263
|
+
"description": "Whether the dialog is open.",
|
|
264
|
+
"attribute": "open",
|
|
265
|
+
"reflects": true,
|
|
266
|
+
"inheritedFrom": {
|
|
267
|
+
"name": "Dialog",
|
|
268
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"kind": "field",
|
|
273
|
+
"name": "lightDismiss",
|
|
274
|
+
"type": {
|
|
275
|
+
"text": "boolean"
|
|
276
|
+
},
|
|
277
|
+
"default": "false",
|
|
278
|
+
"description": "Close when the backdrop is clicked.",
|
|
279
|
+
"attribute": "light-dismiss",
|
|
280
|
+
"reflects": true,
|
|
281
|
+
"inheritedFrom": {
|
|
282
|
+
"name": "Dialog",
|
|
283
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"kind": "field",
|
|
288
|
+
"name": "withoutHeader",
|
|
289
|
+
"type": {
|
|
290
|
+
"text": "boolean"
|
|
291
|
+
},
|
|
292
|
+
"default": "false",
|
|
293
|
+
"description": "Hide the header entirely (title and close slot).",
|
|
294
|
+
"attribute": "without-header",
|
|
295
|
+
"reflects": true,
|
|
296
|
+
"inheritedFrom": {
|
|
297
|
+
"name": "Dialog",
|
|
298
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"kind": "field",
|
|
303
|
+
"name": "dialog",
|
|
304
|
+
"type": {
|
|
305
|
+
"text": "HTMLDialogElement"
|
|
306
|
+
},
|
|
307
|
+
"inheritedFrom": {
|
|
308
|
+
"name": "Dialog",
|
|
309
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
],
|
|
313
|
+
"events": [
|
|
314
|
+
{
|
|
315
|
+
"name": "confirm",
|
|
316
|
+
"description": "Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.",
|
|
317
|
+
"cancelable": true
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"name": "cancel",
|
|
321
|
+
"description": "Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.",
|
|
322
|
+
"cancelable": true
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "show",
|
|
326
|
+
"description": "Fired when the dialog is about to open. Cancelable.",
|
|
327
|
+
"cancelable": true
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"name": "hide",
|
|
331
|
+
"description": "Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)",
|
|
332
|
+
"cancelable": true
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"name": "after-show",
|
|
336
|
+
"description": "Fired after the open animation completes. Not cancelable.",
|
|
337
|
+
"cancelable": false
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"name": "after-hide",
|
|
341
|
+
"description": "Fired after the close animation completes. Not cancelable.",
|
|
342
|
+
"cancelable": false
|
|
343
|
+
}
|
|
344
|
+
],
|
|
345
|
+
"attributes": [
|
|
346
|
+
{
|
|
347
|
+
"name": "confirm-text",
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "string"
|
|
350
|
+
},
|
|
351
|
+
"default": "'Confirm'",
|
|
352
|
+
"description": "Label for the confirm action.",
|
|
353
|
+
"fieldName": "confirmText"
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"name": "cancel-text",
|
|
44
357
|
"type": {
|
|
45
|
-
"text": "string
|
|
358
|
+
"text": "string"
|
|
46
359
|
},
|
|
47
|
-
"
|
|
48
|
-
"
|
|
360
|
+
"default": "'Cancel'",
|
|
361
|
+
"description": "Label for the cancel action.",
|
|
362
|
+
"fieldName": "cancelText"
|
|
49
363
|
},
|
|
50
364
|
{
|
|
51
|
-
"
|
|
52
|
-
"name": "withoutIcon",
|
|
365
|
+
"name": "tone",
|
|
53
366
|
"type": {
|
|
54
|
-
"text": "
|
|
367
|
+
"text": "'danger' | undefined"
|
|
55
368
|
},
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"attribute": "without-icon"
|
|
369
|
+
"description": "Visual tone. `danger` renders the confirm action as destructive.",
|
|
370
|
+
"fieldName": "tone"
|
|
59
371
|
},
|
|
60
372
|
{
|
|
61
|
-
"
|
|
62
|
-
"name": "dismissible",
|
|
373
|
+
"name": "loading",
|
|
63
374
|
"type": {
|
|
64
375
|
"text": "boolean"
|
|
65
376
|
},
|
|
66
377
|
"default": "false",
|
|
67
|
-
"description": "Show a
|
|
68
|
-
"
|
|
69
|
-
"reflects": true
|
|
70
|
-
}
|
|
71
|
-
],
|
|
72
|
-
"events": [
|
|
73
|
-
{
|
|
74
|
-
"name": "hide",
|
|
75
|
-
"description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
|
|
76
|
-
"cancelable": true
|
|
378
|
+
"description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
|
|
379
|
+
"fieldName": "loading"
|
|
77
380
|
},
|
|
78
381
|
{
|
|
79
|
-
"name": "
|
|
80
|
-
"description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
|
|
81
|
-
"cancelable": false
|
|
82
|
-
}
|
|
83
|
-
],
|
|
84
|
-
"attributes": [
|
|
85
|
-
{
|
|
86
|
-
"name": "variant",
|
|
382
|
+
"name": "title",
|
|
87
383
|
"type": {
|
|
88
|
-
"text": "
|
|
384
|
+
"text": "string"
|
|
89
385
|
},
|
|
90
|
-
"
|
|
91
|
-
"
|
|
386
|
+
"default": "''",
|
|
387
|
+
"description": "Dialog title rendered in the header and used as the dialog's accessible name.",
|
|
388
|
+
"fieldName": "title",
|
|
389
|
+
"inheritedFrom": {
|
|
390
|
+
"name": "Dialog",
|
|
391
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
392
|
+
}
|
|
92
393
|
},
|
|
93
394
|
{
|
|
94
|
-
"name": "
|
|
395
|
+
"name": "open",
|
|
95
396
|
"type": {
|
|
96
|
-
"text": "
|
|
397
|
+
"text": "boolean"
|
|
97
398
|
},
|
|
98
|
-
"
|
|
99
|
-
"
|
|
399
|
+
"default": "false",
|
|
400
|
+
"description": "Whether the dialog is open.",
|
|
401
|
+
"fieldName": "open",
|
|
402
|
+
"inheritedFrom": {
|
|
403
|
+
"name": "Dialog",
|
|
404
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
405
|
+
}
|
|
100
406
|
},
|
|
101
407
|
{
|
|
102
|
-
"name": "
|
|
408
|
+
"name": "light-dismiss",
|
|
103
409
|
"type": {
|
|
104
410
|
"text": "boolean"
|
|
105
411
|
},
|
|
106
412
|
"default": "false",
|
|
107
|
-
"description": "
|
|
108
|
-
"fieldName": "
|
|
413
|
+
"description": "Close when the backdrop is clicked.",
|
|
414
|
+
"fieldName": "lightDismiss",
|
|
415
|
+
"inheritedFrom": {
|
|
416
|
+
"name": "Dialog",
|
|
417
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
418
|
+
}
|
|
109
419
|
},
|
|
110
420
|
{
|
|
111
|
-
"name": "
|
|
421
|
+
"name": "without-header",
|
|
112
422
|
"type": {
|
|
113
423
|
"text": "boolean"
|
|
114
424
|
},
|
|
115
425
|
"default": "false",
|
|
116
|
-
"description": "
|
|
117
|
-
"fieldName": "
|
|
426
|
+
"description": "Hide the header entirely (title and close slot).",
|
|
427
|
+
"fieldName": "withoutHeader",
|
|
428
|
+
"inheritedFrom": {
|
|
429
|
+
"name": "Dialog",
|
|
430
|
+
"module": "src/html/elements/dialog/dialog.ts"
|
|
431
|
+
}
|
|
118
432
|
}
|
|
119
433
|
],
|
|
120
434
|
"superclass": {
|
|
121
|
-
"name": "
|
|
122
|
-
"module": "/src/html/
|
|
435
|
+
"name": "Dialog",
|
|
436
|
+
"module": "/src/html/elements/dialog/dialog.js"
|
|
123
437
|
},
|
|
124
|
-
"tagName": "l-alert",
|
|
438
|
+
"tagName": "l-alert-dialog",
|
|
125
439
|
"customElement": true,
|
|
126
|
-
"
|
|
127
|
-
"examples": [
|
|
128
|
-
{
|
|
129
|
-
"language": "html",
|
|
130
|
-
"code": "<l-alert variant=\"warning\" dismissible>\n <span class=\"l-alert-title\">Heads up</span>\n This action cannot be undone.\n</l-alert>"
|
|
131
|
-
}
|
|
132
|
-
],
|
|
133
|
-
"_cssClasses": [
|
|
134
|
-
{
|
|
135
|
-
"name": ".l-alert-icon",
|
|
136
|
-
"description": "The leading icon, colored by variant (auto-injected)."
|
|
137
|
-
},
|
|
440
|
+
"commands": [
|
|
138
441
|
{
|
|
139
|
-
"name": "
|
|
140
|
-
"description": "
|
|
442
|
+
"name": "--show",
|
|
443
|
+
"description": "Sets `open = true`."
|
|
141
444
|
},
|
|
142
445
|
{
|
|
143
|
-
"name": "
|
|
144
|
-
"description": "
|
|
446
|
+
"name": "--hide",
|
|
447
|
+
"description": "Sets `open = false`."
|
|
145
448
|
}
|
|
146
449
|
]
|
|
147
450
|
}
|
|
@@ -149,17 +452,33 @@
|
|
|
149
452
|
"exports": [
|
|
150
453
|
{
|
|
151
454
|
"kind": "js",
|
|
152
|
-
"name": "
|
|
455
|
+
"name": "ConfirmEvent",
|
|
153
456
|
"declaration": {
|
|
154
|
-
"name": "
|
|
155
|
-
"module": "src/html/elements/alert/alert.ts"
|
|
457
|
+
"name": "ConfirmEvent",
|
|
458
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
459
|
+
}
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
"kind": "js",
|
|
463
|
+
"name": "CancelEvent",
|
|
464
|
+
"declaration": {
|
|
465
|
+
"name": "CancelEvent",
|
|
466
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
467
|
+
}
|
|
468
|
+
},
|
|
469
|
+
{
|
|
470
|
+
"kind": "js",
|
|
471
|
+
"name": "AlertDialog",
|
|
472
|
+
"declaration": {
|
|
473
|
+
"name": "AlertDialog",
|
|
474
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
156
475
|
}
|
|
157
476
|
}
|
|
158
477
|
]
|
|
159
478
|
},
|
|
160
479
|
{
|
|
161
480
|
"kind": "javascript-module",
|
|
162
|
-
"path": "src/html/elements/alert/index.ts",
|
|
481
|
+
"path": "src/html/elements/alert-dialog/index.ts",
|
|
163
482
|
"declarations": [],
|
|
164
483
|
"exports": [
|
|
165
484
|
{
|
|
@@ -167,156 +486,151 @@
|
|
|
167
486
|
"name": "*",
|
|
168
487
|
"declaration": {
|
|
169
488
|
"name": "*",
|
|
170
|
-
"module": "src/html/elements/alert/alert.js"
|
|
489
|
+
"module": "src/html/elements/alert-dialog/alert-dialog.js"
|
|
171
490
|
}
|
|
172
491
|
}
|
|
173
492
|
]
|
|
174
493
|
},
|
|
175
494
|
{
|
|
176
495
|
"kind": "javascript-module",
|
|
177
|
-
"path": "src/html/elements/
|
|
496
|
+
"path": "src/html/elements/alert/alert.ts",
|
|
178
497
|
"declarations": [
|
|
179
498
|
{
|
|
180
499
|
"kind": "class",
|
|
181
500
|
"description": "",
|
|
182
|
-
"name": "
|
|
501
|
+
"name": "Alert",
|
|
183
502
|
"cssProperties": [
|
|
184
503
|
{
|
|
185
|
-
"description": "
|
|
186
|
-
"name": "--
|
|
187
|
-
"default": "
|
|
188
|
-
},
|
|
189
|
-
{
|
|
190
|
-
"description": "Background fill color for initials and the default icon.",
|
|
191
|
-
"name": "--color"
|
|
504
|
+
"description": "Gap between the icon, content, and close button.",
|
|
505
|
+
"name": "--gap",
|
|
506
|
+
"default": "0.75rem"
|
|
192
507
|
},
|
|
193
508
|
{
|
|
194
|
-
"description": "
|
|
195
|
-
"name": "--
|
|
509
|
+
"description": "Inner padding.",
|
|
510
|
+
"name": "--padding",
|
|
511
|
+
"default": "1rem"
|
|
196
512
|
},
|
|
197
513
|
{
|
|
198
|
-
"description": "
|
|
199
|
-
"name": "--
|
|
200
|
-
|
|
201
|
-
],
|
|
202
|
-
"cssParts": [
|
|
203
|
-
{
|
|
204
|
-
"description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
|
|
205
|
-
"name": "base"
|
|
514
|
+
"description": "Corner radius.",
|
|
515
|
+
"name": "--border-radius",
|
|
516
|
+
"default": "8px"
|
|
206
517
|
}
|
|
207
518
|
],
|
|
208
519
|
"members": [
|
|
209
520
|
{
|
|
210
521
|
"kind": "field",
|
|
211
|
-
"name": "
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "string"
|
|
214
|
-
},
|
|
215
|
-
"default": "''",
|
|
216
|
-
"description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
|
|
217
|
-
"attribute": "src"
|
|
218
|
-
},
|
|
219
|
-
{
|
|
220
|
-
"kind": "field",
|
|
221
|
-
"name": "name",
|
|
522
|
+
"name": "variant",
|
|
222
523
|
"type": {
|
|
223
|
-
"text": "
|
|
524
|
+
"text": "AlertVariant | undefined"
|
|
224
525
|
},
|
|
225
|
-
"
|
|
226
|
-
"
|
|
227
|
-
"
|
|
526
|
+
"description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
|
|
527
|
+
"attribute": "variant",
|
|
528
|
+
"reflects": true
|
|
228
529
|
},
|
|
229
530
|
{
|
|
230
531
|
"kind": "field",
|
|
231
|
-
"name": "
|
|
532
|
+
"name": "icon",
|
|
232
533
|
"type": {
|
|
233
|
-
"text": "string"
|
|
534
|
+
"text": "string | undefined"
|
|
234
535
|
},
|
|
235
|
-
"
|
|
236
|
-
"
|
|
237
|
-
"attribute": "size",
|
|
238
|
-
"reflects": true
|
|
536
|
+
"description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
|
|
537
|
+
"attribute": "icon"
|
|
239
538
|
},
|
|
240
539
|
{
|
|
241
540
|
"kind": "field",
|
|
242
|
-
"name": "
|
|
541
|
+
"name": "withoutIcon",
|
|
243
542
|
"type": {
|
|
244
|
-
"text": "
|
|
543
|
+
"text": "boolean"
|
|
245
544
|
},
|
|
246
|
-
"default": "
|
|
247
|
-
"description": "
|
|
248
|
-
"attribute": "
|
|
545
|
+
"default": "false",
|
|
546
|
+
"description": "Hide the leading icon entirely.",
|
|
547
|
+
"attribute": "without-icon"
|
|
249
548
|
},
|
|
250
549
|
{
|
|
251
550
|
"kind": "field",
|
|
252
|
-
"name": "
|
|
551
|
+
"name": "dismissible",
|
|
253
552
|
"type": {
|
|
254
553
|
"text": "boolean"
|
|
255
554
|
},
|
|
256
555
|
"default": "false",
|
|
257
|
-
"description": "
|
|
258
|
-
"attribute": "
|
|
556
|
+
"description": "Show a close button that dismisses the alert when clicked.",
|
|
557
|
+
"attribute": "dismissible",
|
|
259
558
|
"reflects": true
|
|
260
559
|
}
|
|
261
560
|
],
|
|
262
|
-
"
|
|
561
|
+
"events": [
|
|
263
562
|
{
|
|
264
|
-
"name": "
|
|
265
|
-
"
|
|
266
|
-
|
|
267
|
-
},
|
|
268
|
-
"default": "''",
|
|
269
|
-
"description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
|
|
270
|
-
"fieldName": "src"
|
|
563
|
+
"name": "hide",
|
|
564
|
+
"description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
|
|
565
|
+
"cancelable": true
|
|
271
566
|
},
|
|
272
567
|
{
|
|
273
|
-
"name": "
|
|
568
|
+
"name": "after-hide",
|
|
569
|
+
"description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
|
|
570
|
+
"cancelable": false
|
|
571
|
+
}
|
|
572
|
+
],
|
|
573
|
+
"attributes": [
|
|
574
|
+
{
|
|
575
|
+
"name": "variant",
|
|
274
576
|
"type": {
|
|
275
|
-
"text": "
|
|
577
|
+
"text": "AlertVariant | undefined"
|
|
276
578
|
},
|
|
277
|
-
"
|
|
278
|
-
"
|
|
279
|
-
"fieldName": "name"
|
|
579
|
+
"description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral.",
|
|
580
|
+
"fieldName": "variant"
|
|
280
581
|
},
|
|
281
582
|
{
|
|
282
|
-
"name": "
|
|
583
|
+
"name": "icon",
|
|
283
584
|
"type": {
|
|
284
|
-
"text": "string"
|
|
585
|
+
"text": "string | undefined"
|
|
285
586
|
},
|
|
286
|
-
"
|
|
287
|
-
"
|
|
288
|
-
"fieldName": "size"
|
|
587
|
+
"description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon.",
|
|
588
|
+
"fieldName": "icon"
|
|
289
589
|
},
|
|
290
590
|
{
|
|
291
|
-
"name": "
|
|
591
|
+
"name": "without-icon",
|
|
292
592
|
"type": {
|
|
293
|
-
"text": "
|
|
593
|
+
"text": "boolean"
|
|
294
594
|
},
|
|
295
|
-
"default": "
|
|
296
|
-
"description": "
|
|
297
|
-
"fieldName": "
|
|
595
|
+
"default": "false",
|
|
596
|
+
"description": "Hide the leading icon entirely.",
|
|
597
|
+
"fieldName": "withoutIcon"
|
|
298
598
|
},
|
|
299
599
|
{
|
|
300
|
-
"name": "
|
|
600
|
+
"name": "dismissible",
|
|
301
601
|
"type": {
|
|
302
602
|
"text": "boolean"
|
|
303
603
|
},
|
|
304
604
|
"default": "false",
|
|
305
|
-
"description": "
|
|
306
|
-
"fieldName": "
|
|
605
|
+
"description": "Show a close button that dismisses the alert when clicked.",
|
|
606
|
+
"fieldName": "dismissible"
|
|
307
607
|
}
|
|
308
608
|
],
|
|
309
609
|
"superclass": {
|
|
310
610
|
"name": "LuxenElement",
|
|
311
611
|
"module": "/src/html/shared/luxen-element.js"
|
|
312
612
|
},
|
|
313
|
-
"tagName": "l-
|
|
613
|
+
"tagName": "l-alert",
|
|
314
614
|
"customElement": true,
|
|
315
|
-
"summary": "
|
|
615
|
+
"summary": "A callout box that highlights contextual information with a semantic color and a leading icon.",
|
|
616
|
+
"examples": [
|
|
617
|
+
{
|
|
618
|
+
"language": "html",
|
|
619
|
+
"code": "<l-alert variant=\"warning\" dismissible>\n <span class=\"l-alert-title\">Heads up</span>\n This action cannot be undone.\n</l-alert>"
|
|
620
|
+
}
|
|
621
|
+
],
|
|
316
622
|
"_cssClasses": [
|
|
317
623
|
{
|
|
318
|
-
"name": ".l-
|
|
319
|
-
"description": "
|
|
624
|
+
"name": ".l-alert-icon",
|
|
625
|
+
"description": "The leading icon, colored by variant (auto-injected)."
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"name": ".l-alert-content",
|
|
629
|
+
"description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
|
|
630
|
+
},
|
|
631
|
+
{
|
|
632
|
+
"name": ".l-alert-title",
|
|
633
|
+
"description": "Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation."
|
|
320
634
|
}
|
|
321
635
|
]
|
|
322
636
|
}
|
|
@@ -324,17 +638,17 @@
|
|
|
324
638
|
"exports": [
|
|
325
639
|
{
|
|
326
640
|
"kind": "js",
|
|
327
|
-
"name": "
|
|
641
|
+
"name": "Alert",
|
|
328
642
|
"declaration": {
|
|
329
|
-
"name": "
|
|
330
|
-
"module": "src/html/elements/
|
|
643
|
+
"name": "Alert",
|
|
644
|
+
"module": "src/html/elements/alert/alert.ts"
|
|
331
645
|
}
|
|
332
646
|
}
|
|
333
647
|
]
|
|
334
648
|
},
|
|
335
649
|
{
|
|
336
650
|
"kind": "javascript-module",
|
|
337
|
-
"path": "src/html/elements/
|
|
651
|
+
"path": "src/html/elements/alert/index.ts",
|
|
338
652
|
"declarations": [],
|
|
339
653
|
"exports": [
|
|
340
654
|
{
|
|
@@ -342,454 +656,156 @@
|
|
|
342
656
|
"name": "*",
|
|
343
657
|
"declaration": {
|
|
344
658
|
"name": "*",
|
|
345
|
-
"module": "src/html/elements/
|
|
659
|
+
"module": "src/html/elements/alert/alert.js"
|
|
346
660
|
}
|
|
347
661
|
}
|
|
348
662
|
]
|
|
349
663
|
},
|
|
350
664
|
{
|
|
351
665
|
"kind": "javascript-module",
|
|
352
|
-
"path": "src/html/elements/
|
|
666
|
+
"path": "src/html/elements/avatar/avatar.ts",
|
|
353
667
|
"declarations": [
|
|
354
668
|
{
|
|
355
669
|
"kind": "class",
|
|
356
|
-
"description": "
|
|
357
|
-
"name": "
|
|
358
|
-
"superclass": {
|
|
359
|
-
"name": "Event",
|
|
360
|
-
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
361
|
-
}
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
"kind": "class",
|
|
365
|
-
"description": "Fired when the user dismisses an alert dialog (the cancel action, Escape, or a\nclose request). Cancelable — call `event.preventDefault()` to keep it open.\n\nDoes not bubble and is not composed: listen on the element itself.",
|
|
366
|
-
"name": "CancelEvent",
|
|
367
|
-
"superclass": {
|
|
368
|
-
"name": "Event",
|
|
369
|
-
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
370
|
-
}
|
|
371
|
-
},
|
|
372
|
-
{
|
|
373
|
-
"kind": "class",
|
|
374
|
-
"description": "An interruptive confirmation dialog built on `<l-dialog>`. Renders its own\ncancel/confirm actions and exposes `role=\"alertdialog\"`. Use it to confirm a\nconsequential action (delete, publish, discard) — not for generic content.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). The dialog closes automatically when the user picks an\naction, unless the matching `confirm` / `cancel` event is canceled.",
|
|
375
|
-
"name": "AlertDialog",
|
|
670
|
+
"description": "",
|
|
671
|
+
"name": "Avatar",
|
|
376
672
|
"cssProperties": [
|
|
377
673
|
{
|
|
378
|
-
"description": "
|
|
379
|
-
"name": "--
|
|
380
|
-
"default": "
|
|
381
|
-
"inheritedFrom": {
|
|
382
|
-
"name": "Dialog",
|
|
383
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
384
|
-
}
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"description": "Dialog border radius.",
|
|
388
|
-
"name": "--border-radius",
|
|
389
|
-
"default": "6px",
|
|
390
|
-
"inheritedFrom": {
|
|
391
|
-
"name": "Dialog",
|
|
392
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
393
|
-
}
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"description": "Padding applied to the header, footer, and inline-padding of the body.",
|
|
397
|
-
"name": "--padding",
|
|
398
|
-
"default": "1.5rem",
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "Dialog",
|
|
401
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
402
|
-
}
|
|
403
|
-
},
|
|
404
|
-
{
|
|
405
|
-
"description": "Open transition duration.",
|
|
406
|
-
"name": "--show-duration",
|
|
407
|
-
"default": "200ms",
|
|
408
|
-
"inheritedFrom": {
|
|
409
|
-
"name": "Dialog",
|
|
410
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
411
|
-
}
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
"description": "Close transition duration.",
|
|
415
|
-
"name": "--hide-duration",
|
|
416
|
-
"default": "200ms",
|
|
417
|
-
"inheritedFrom": {
|
|
418
|
-
"name": "Dialog",
|
|
419
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
420
|
-
}
|
|
421
|
-
},
|
|
422
|
-
{
|
|
423
|
-
"description": "Timing function of the open and close transitions, backdrop included.",
|
|
424
|
-
"name": "--easing",
|
|
425
|
-
"default": "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
426
|
-
"inheritedFrom": {
|
|
427
|
-
"name": "Dialog",
|
|
428
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
429
|
-
}
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"description": "Backdrop color.",
|
|
433
|
-
"name": "--backdrop",
|
|
434
|
-
"inheritedFrom": {
|
|
435
|
-
"name": "Dialog",
|
|
436
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
437
|
-
}
|
|
438
|
-
},
|
|
439
|
-
{
|
|
440
|
-
"description": "Backdrop blur amount (any CSS length).",
|
|
441
|
-
"name": "--backdrop-blur",
|
|
442
|
-
"default": "0",
|
|
443
|
-
"inheritedFrom": {
|
|
444
|
-
"name": "Dialog",
|
|
445
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
],
|
|
449
|
-
"cssParts": [
|
|
450
|
-
{
|
|
451
|
-
"description": "The native `<dialog>` element.",
|
|
452
|
-
"name": "dialog",
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "Dialog",
|
|
455
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"description": "The header wrapper containing the title.",
|
|
460
|
-
"name": "header",
|
|
461
|
-
"inheritedFrom": {
|
|
462
|
-
"name": "Dialog",
|
|
463
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
464
|
-
}
|
|
465
|
-
},
|
|
466
|
-
{
|
|
467
|
-
"description": "The dialog title heading.",
|
|
468
|
-
"name": "title",
|
|
469
|
-
"inheritedFrom": {
|
|
470
|
-
"name": "Dialog",
|
|
471
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
472
|
-
}
|
|
473
|
-
},
|
|
474
|
-
{
|
|
475
|
-
"description": "The body wrapper around the description.",
|
|
476
|
-
"name": "body",
|
|
477
|
-
"inheritedFrom": {
|
|
478
|
-
"name": "Dialog",
|
|
479
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
480
|
-
}
|
|
481
|
-
},
|
|
482
|
-
{
|
|
483
|
-
"description": "The footer wrapper around the actions.",
|
|
484
|
-
"name": "footer",
|
|
485
|
-
"inheritedFrom": {
|
|
486
|
-
"name": "Dialog",
|
|
487
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
488
|
-
}
|
|
489
|
-
},
|
|
490
|
-
{
|
|
491
|
-
"description": "Both built-in action buttons.",
|
|
492
|
-
"name": "button"
|
|
493
|
-
},
|
|
494
|
-
{
|
|
495
|
-
"description": "The built-in cancel button.",
|
|
496
|
-
"name": "cancel"
|
|
497
|
-
},
|
|
498
|
-
{
|
|
499
|
-
"description": "The built-in confirm button.",
|
|
500
|
-
"name": "confirm"
|
|
501
|
-
}
|
|
502
|
-
],
|
|
503
|
-
"slots": [
|
|
504
|
-
{
|
|
505
|
-
"description": "Description text. Provides the dialog's accessible description.",
|
|
506
|
-
"name": "",
|
|
507
|
-
"inheritedFrom": {
|
|
508
|
-
"name": "Dialog",
|
|
509
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
510
|
-
}
|
|
511
|
-
},
|
|
512
|
-
{
|
|
513
|
-
"description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.",
|
|
514
|
-
"name": "title",
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "Dialog",
|
|
517
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
518
|
-
}
|
|
519
|
-
},
|
|
520
|
-
{
|
|
521
|
-
"description": "Replaces the built-in cancel action (e.g. a link). Keep it focusable.",
|
|
522
|
-
"name": "cancel"
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"description": "Replaces the built-in confirm action.",
|
|
526
|
-
"name": "confirm"
|
|
527
|
-
},
|
|
528
|
-
{
|
|
529
|
-
"description": "Close button (typically `<button class=\"l-close\">`).",
|
|
530
|
-
"name": "close",
|
|
531
|
-
"inheritedFrom": {
|
|
532
|
-
"name": "Dialog",
|
|
533
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
534
|
-
}
|
|
535
|
-
},
|
|
536
|
-
{
|
|
537
|
-
"description": "Footer actions.",
|
|
538
|
-
"name": "footer",
|
|
539
|
-
"inheritedFrom": {
|
|
540
|
-
"name": "Dialog",
|
|
541
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
],
|
|
545
|
-
"members": [
|
|
546
|
-
{
|
|
547
|
-
"kind": "field",
|
|
548
|
-
"name": "confirmText",
|
|
549
|
-
"type": {
|
|
550
|
-
"text": "string"
|
|
551
|
-
},
|
|
552
|
-
"default": "'Confirm'",
|
|
553
|
-
"description": "Label for the confirm action.",
|
|
554
|
-
"attribute": "confirm-text"
|
|
674
|
+
"description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
|
|
675
|
+
"name": "--size",
|
|
676
|
+
"default": "40px"
|
|
555
677
|
},
|
|
556
678
|
{
|
|
557
|
-
"
|
|
558
|
-
"name": "
|
|
559
|
-
"type": {
|
|
560
|
-
"text": "string"
|
|
561
|
-
},
|
|
562
|
-
"default": "'Cancel'",
|
|
563
|
-
"description": "Label for the cancel action.",
|
|
564
|
-
"attribute": "cancel-text"
|
|
679
|
+
"description": "Background fill color for initials and the default icon.",
|
|
680
|
+
"name": "--color"
|
|
565
681
|
},
|
|
566
682
|
{
|
|
567
|
-
"
|
|
568
|
-
"name": "
|
|
569
|
-
"type": {
|
|
570
|
-
"text": "'danger' | undefined"
|
|
571
|
-
},
|
|
572
|
-
"description": "Visual tone. `danger` renders the confirm action as destructive.",
|
|
573
|
-
"attribute": "tone",
|
|
574
|
-
"reflects": true
|
|
683
|
+
"description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
|
|
684
|
+
"name": "--text-color"
|
|
575
685
|
},
|
|
686
|
+
{
|
|
687
|
+
"description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
|
|
688
|
+
"name": "--appearance"
|
|
689
|
+
}
|
|
690
|
+
],
|
|
691
|
+
"cssParts": [
|
|
692
|
+
{
|
|
693
|
+
"description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
|
|
694
|
+
"name": "base"
|
|
695
|
+
}
|
|
696
|
+
],
|
|
697
|
+
"members": [
|
|
576
698
|
{
|
|
577
699
|
"kind": "field",
|
|
578
|
-
"name": "
|
|
700
|
+
"name": "src",
|
|
579
701
|
"type": {
|
|
580
|
-
"text": "
|
|
702
|
+
"text": "string"
|
|
581
703
|
},
|
|
582
|
-
"default": "
|
|
583
|
-
"description": "
|
|
584
|
-
"attribute": "
|
|
585
|
-
"reflects": true
|
|
704
|
+
"default": "''",
|
|
705
|
+
"description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
|
|
706
|
+
"attribute": "src"
|
|
586
707
|
},
|
|
587
708
|
{
|
|
588
709
|
"kind": "field",
|
|
589
|
-
"name": "
|
|
710
|
+
"name": "name",
|
|
590
711
|
"type": {
|
|
591
712
|
"text": "string"
|
|
592
713
|
},
|
|
593
714
|
"default": "''",
|
|
594
|
-
"description": "
|
|
595
|
-
"attribute": "
|
|
596
|
-
"inheritedFrom": {
|
|
597
|
-
"name": "Dialog",
|
|
598
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
599
|
-
}
|
|
715
|
+
"description": "Name used as the accessible label and to derive the initials fallback.",
|
|
716
|
+
"attribute": "name"
|
|
600
717
|
},
|
|
601
718
|
{
|
|
602
719
|
"kind": "field",
|
|
603
|
-
"name": "
|
|
720
|
+
"name": "size",
|
|
604
721
|
"type": {
|
|
605
|
-
"text": "
|
|
722
|
+
"text": "string"
|
|
606
723
|
},
|
|
607
|
-
"default": "
|
|
608
|
-
"description": "
|
|
609
|
-
"attribute": "
|
|
610
|
-
"reflects": true
|
|
611
|
-
"inheritedFrom": {
|
|
612
|
-
"name": "Dialog",
|
|
613
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
614
|
-
}
|
|
724
|
+
"default": "'md'",
|
|
725
|
+
"description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
|
|
726
|
+
"attribute": "size",
|
|
727
|
+
"reflects": true
|
|
615
728
|
},
|
|
616
729
|
{
|
|
617
730
|
"kind": "field",
|
|
618
|
-
"name": "
|
|
731
|
+
"name": "badge",
|
|
619
732
|
"type": {
|
|
620
|
-
"text": "
|
|
733
|
+
"text": "number"
|
|
621
734
|
},
|
|
622
|
-
"default": "
|
|
623
|
-
"description": "
|
|
624
|
-
"attribute": "
|
|
625
|
-
"reflects": true,
|
|
626
|
-
"inheritedFrom": {
|
|
627
|
-
"name": "Dialog",
|
|
628
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
629
|
-
}
|
|
735
|
+
"default": "0",
|
|
736
|
+
"description": "Count shown in the corner badge. `0` hides the badge.",
|
|
737
|
+
"attribute": "badge"
|
|
630
738
|
},
|
|
631
739
|
{
|
|
632
740
|
"kind": "field",
|
|
633
|
-
"name": "
|
|
741
|
+
"name": "interactive",
|
|
634
742
|
"type": {
|
|
635
743
|
"text": "boolean"
|
|
636
744
|
},
|
|
637
745
|
"default": "false",
|
|
638
|
-
"description": "
|
|
639
|
-
"attribute": "
|
|
640
|
-
"reflects": true
|
|
641
|
-
"inheritedFrom": {
|
|
642
|
-
"name": "Dialog",
|
|
643
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
644
|
-
}
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"kind": "field",
|
|
648
|
-
"name": "dialog",
|
|
649
|
-
"type": {
|
|
650
|
-
"text": "HTMLDialogElement"
|
|
651
|
-
},
|
|
652
|
-
"inheritedFrom": {
|
|
653
|
-
"name": "Dialog",
|
|
654
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
655
|
-
}
|
|
656
|
-
}
|
|
657
|
-
],
|
|
658
|
-
"events": [
|
|
659
|
-
{
|
|
660
|
-
"name": "confirm",
|
|
661
|
-
"description": "Fired when the user accepts. Cancelable — `preventDefault()` keeps it open for async work.",
|
|
662
|
-
"cancelable": true
|
|
663
|
-
},
|
|
664
|
-
{
|
|
665
|
-
"name": "cancel",
|
|
666
|
-
"description": "Fired when the user dismisses (cancel action, Escape). Cancelable — `preventDefault()` keeps it open.",
|
|
667
|
-
"cancelable": true
|
|
668
|
-
},
|
|
669
|
-
{
|
|
670
|
-
"name": "show",
|
|
671
|
-
"description": "Fired when the dialog is about to open. Cancelable.",
|
|
672
|
-
"cancelable": true
|
|
673
|
-
},
|
|
674
|
-
{
|
|
675
|
-
"name": "hide",
|
|
676
|
-
"description": "Fired when the dialog is about to close via the `open` property. Cancelable. (The confirm, cancel, and Escape paths close natively and emit `confirm`/`cancel` instead of `hide`.)",
|
|
677
|
-
"cancelable": true
|
|
678
|
-
},
|
|
679
|
-
{
|
|
680
|
-
"name": "after-show",
|
|
681
|
-
"description": "Fired after the open animation completes. Not cancelable.",
|
|
682
|
-
"cancelable": false
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
"name": "after-hide",
|
|
686
|
-
"description": "Fired after the close animation completes. Not cancelable.",
|
|
687
|
-
"cancelable": false
|
|
746
|
+
"description": "Render as a `<button>` with focus ring and hover states.",
|
|
747
|
+
"attribute": "interactive",
|
|
748
|
+
"reflects": true
|
|
688
749
|
}
|
|
689
750
|
],
|
|
690
751
|
"attributes": [
|
|
691
752
|
{
|
|
692
|
-
"name": "
|
|
693
|
-
"type": {
|
|
694
|
-
"text": "string"
|
|
695
|
-
},
|
|
696
|
-
"default": "'Confirm'",
|
|
697
|
-
"description": "Label for the confirm action.",
|
|
698
|
-
"fieldName": "confirmText"
|
|
699
|
-
},
|
|
700
|
-
{
|
|
701
|
-
"name": "cancel-text",
|
|
753
|
+
"name": "src",
|
|
702
754
|
"type": {
|
|
703
755
|
"text": "string"
|
|
704
756
|
},
|
|
705
|
-
"default": "'
|
|
706
|
-
"description": "
|
|
707
|
-
"fieldName": "
|
|
708
|
-
},
|
|
709
|
-
{
|
|
710
|
-
"name": "tone",
|
|
711
|
-
"type": {
|
|
712
|
-
"text": "'danger' | undefined"
|
|
713
|
-
},
|
|
714
|
-
"description": "Visual tone. `danger` renders the confirm action as destructive.",
|
|
715
|
-
"fieldName": "tone"
|
|
716
|
-
},
|
|
717
|
-
{
|
|
718
|
-
"name": "loading",
|
|
719
|
-
"type": {
|
|
720
|
-
"text": "boolean"
|
|
721
|
-
},
|
|
722
|
-
"default": "false",
|
|
723
|
-
"description": "Show a busy state on the confirm action (spinner + `aria-disabled`); the\ncancel action stays operable as an escape hatch.",
|
|
724
|
-
"fieldName": "loading"
|
|
757
|
+
"default": "''",
|
|
758
|
+
"description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
|
|
759
|
+
"fieldName": "src"
|
|
725
760
|
},
|
|
726
761
|
{
|
|
727
|
-
"name": "
|
|
762
|
+
"name": "name",
|
|
728
763
|
"type": {
|
|
729
764
|
"text": "string"
|
|
730
765
|
},
|
|
731
766
|
"default": "''",
|
|
732
|
-
"description": "
|
|
733
|
-
"fieldName": "
|
|
734
|
-
"inheritedFrom": {
|
|
735
|
-
"name": "Dialog",
|
|
736
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
737
|
-
}
|
|
767
|
+
"description": "Name used as the accessible label and to derive the initials fallback.",
|
|
768
|
+
"fieldName": "name"
|
|
738
769
|
},
|
|
739
770
|
{
|
|
740
|
-
"name": "
|
|
771
|
+
"name": "size",
|
|
741
772
|
"type": {
|
|
742
|
-
"text": "
|
|
773
|
+
"text": "string"
|
|
743
774
|
},
|
|
744
|
-
"default": "
|
|
745
|
-
"description": "
|
|
746
|
-
"fieldName": "
|
|
747
|
-
"inheritedFrom": {
|
|
748
|
-
"name": "Dialog",
|
|
749
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
750
|
-
}
|
|
775
|
+
"default": "'md'",
|
|
776
|
+
"description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
|
|
777
|
+
"fieldName": "size"
|
|
751
778
|
},
|
|
752
779
|
{
|
|
753
|
-
"name": "
|
|
780
|
+
"name": "badge",
|
|
754
781
|
"type": {
|
|
755
|
-
"text": "
|
|
782
|
+
"text": "number"
|
|
756
783
|
},
|
|
757
|
-
"default": "
|
|
758
|
-
"description": "
|
|
759
|
-
"fieldName": "
|
|
760
|
-
"inheritedFrom": {
|
|
761
|
-
"name": "Dialog",
|
|
762
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
763
|
-
}
|
|
784
|
+
"default": "0",
|
|
785
|
+
"description": "Count shown in the corner badge. `0` hides the badge.",
|
|
786
|
+
"fieldName": "badge"
|
|
764
787
|
},
|
|
765
788
|
{
|
|
766
|
-
"name": "
|
|
789
|
+
"name": "interactive",
|
|
767
790
|
"type": {
|
|
768
791
|
"text": "boolean"
|
|
769
792
|
},
|
|
770
793
|
"default": "false",
|
|
771
|
-
"description": "
|
|
772
|
-
"fieldName": "
|
|
773
|
-
"inheritedFrom": {
|
|
774
|
-
"name": "Dialog",
|
|
775
|
-
"module": "src/html/elements/dialog/dialog.ts"
|
|
776
|
-
}
|
|
794
|
+
"description": "Render as a `<button>` with focus ring and hover states.",
|
|
795
|
+
"fieldName": "interactive"
|
|
777
796
|
}
|
|
778
797
|
],
|
|
779
798
|
"superclass": {
|
|
780
|
-
"name": "
|
|
781
|
-
"module": "/src/html/
|
|
799
|
+
"name": "LuxenElement",
|
|
800
|
+
"module": "/src/html/shared/luxen-element.js"
|
|
782
801
|
},
|
|
783
|
-
"tagName": "l-
|
|
802
|
+
"tagName": "l-avatar",
|
|
784
803
|
"customElement": true,
|
|
785
|
-
"
|
|
786
|
-
|
|
787
|
-
"name": "--show",
|
|
788
|
-
"description": "Sets `open = true`."
|
|
789
|
-
},
|
|
804
|
+
"summary": "An avatar component for displaying user images, initials, or a default icon.",
|
|
805
|
+
"_cssClasses": [
|
|
790
806
|
{
|
|
791
|
-
"name": "
|
|
792
|
-
"description": "
|
|
807
|
+
"name": ".l-avatar-group",
|
|
808
|
+
"description": "Flex wrapper that overlaps a row of stacked avatars."
|
|
793
809
|
}
|
|
794
810
|
]
|
|
795
811
|
}
|
|
@@ -797,33 +813,17 @@
|
|
|
797
813
|
"exports": [
|
|
798
814
|
{
|
|
799
815
|
"kind": "js",
|
|
800
|
-
"name": "
|
|
801
|
-
"declaration": {
|
|
802
|
-
"name": "ConfirmEvent",
|
|
803
|
-
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
804
|
-
}
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"kind": "js",
|
|
808
|
-
"name": "CancelEvent",
|
|
809
|
-
"declaration": {
|
|
810
|
-
"name": "CancelEvent",
|
|
811
|
-
"module": "src/html/elements/alert-dialog/alert-dialog.ts"
|
|
812
|
-
}
|
|
813
|
-
},
|
|
814
|
-
{
|
|
815
|
-
"kind": "js",
|
|
816
|
-
"name": "AlertDialog",
|
|
816
|
+
"name": "Avatar",
|
|
817
817
|
"declaration": {
|
|
818
|
-
"name": "
|
|
819
|
-
"module": "src/html/elements/
|
|
818
|
+
"name": "Avatar",
|
|
819
|
+
"module": "src/html/elements/avatar/avatar.ts"
|
|
820
820
|
}
|
|
821
821
|
}
|
|
822
822
|
]
|
|
823
823
|
},
|
|
824
824
|
{
|
|
825
825
|
"kind": "javascript-module",
|
|
826
|
-
"path": "src/html/elements/
|
|
826
|
+
"path": "src/html/elements/avatar/index.ts",
|
|
827
827
|
"declarations": [],
|
|
828
828
|
"exports": [
|
|
829
829
|
{
|
|
@@ -831,7 +831,7 @@
|
|
|
831
831
|
"name": "*",
|
|
832
832
|
"declaration": {
|
|
833
833
|
"name": "*",
|
|
834
|
-
"module": "src/html/elements/
|
|
834
|
+
"module": "src/html/elements/avatar/avatar.js"
|
|
835
835
|
}
|
|
836
836
|
}
|
|
837
837
|
]
|