@sky.ui/core 0.0.44 → 0.0.46

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.
Files changed (2) hide show
  1. package/dist/custom-elements.json +1496 -1496
  2. package/package.json +1 -1
@@ -4,58 +4,34 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "src/sky-alert/sky-alert.ts",
7
+ "path": "src/sky-badge/sky-badge.ts",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
11
  "description": "",
12
- "name": "SkyAlert",
12
+ "name": "SkyBadge",
13
13
  "cssParts": [
14
14
  {
15
- "description": "The outer alert container.",
16
- "name": "alert"
17
- },
18
- {
19
- "description": "The optional leading icon.",
20
- "name": "icon"
21
- },
22
- {
23
- "description": "The content container (title + message/slot).",
24
- "name": "content"
25
- },
26
- {
27
- "description": "The title text element.",
28
- "name": "title"
29
- },
30
- {
31
- "description": "The message text element (when `message` is provided).",
32
- "name": "message"
33
- },
34
- {
35
- "description": "The trailing actions container.",
36
- "name": "actions"
37
- },
38
- {
39
- "description": "The dismiss button (when `removable`).",
40
- "name": "close-button"
15
+ "description": "Wrapper around the slotted content and the badge.",
16
+ "name": "container"
41
17
  },
42
18
  {
43
- "description": "Overlay shown when `loading` is true.",
44
- "name": "loading-overlay"
19
+ "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
20
+ "name": "badge"
45
21
  },
46
22
  {
47
- "description": "Spinner element shown inside the loading overlay.",
48
- "name": "loading-spinner"
23
+ "description": "The icon element when `isIcon` is true.",
24
+ "name": "icon"
49
25
  }
50
26
  ],
51
27
  "slots": [
52
28
  {
53
- "description": "Custom message content (used when `message` is empty).",
29
+ "description": "The content the badge attaches to.",
54
30
  "name": ""
55
31
  },
56
32
  {
57
- "description": "Action buttons or links displayed on the trailing side.",
58
- "name": "actions"
33
+ "description": "Optional slot to override the badge content entirely.",
34
+ "name": "badge"
59
35
  }
60
36
  ],
61
37
  "members": [
@@ -70,156 +46,212 @@
70
46
  },
71
47
  {
72
48
  "kind": "field",
73
- "name": "title",
49
+ "name": "statusColor",
50
+ "type": {
51
+ "text": "string"
52
+ },
53
+ "default": "\"success\"",
54
+ "description": "Badge background token or CSS color.",
55
+ "attribute": "statusColor",
56
+ "reflects": true
57
+ },
58
+ {
59
+ "kind": "field",
60
+ "name": "textColor",
61
+ "type": {
62
+ "text": "string"
63
+ },
64
+ "default": "\"default\"",
65
+ "description": "Text color token or CSS color.",
66
+ "attribute": "textColor",
67
+ "reflects": true
68
+ },
69
+ {
70
+ "kind": "field",
71
+ "name": "iconColor",
74
72
  "type": {
75
73
  "text": "string"
76
74
  },
77
75
  "default": "\"\"",
78
- "description": "Title text shown above the message.",
79
- "attribute": "title"
76
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
77
+ "attribute": "iconColor",
78
+ "reflects": true
80
79
  },
81
80
  {
82
81
  "kind": "field",
83
- "name": "message",
82
+ "name": "position",
83
+ "type": {
84
+ "text": "SkyBadgePosition"
85
+ },
86
+ "default": "\"default\"",
87
+ "description": "Layout mode: `default | floating | inline`.",
88
+ "attribute": "position",
89
+ "reflects": true
90
+ },
91
+ {
92
+ "kind": "field",
93
+ "name": "value",
84
94
  "type": {
85
95
  "text": "string"
86
96
  },
87
97
  "default": "\"\"",
88
- "description": "Message text rendered inside the alert.",
89
- "attribute": "message"
98
+ "description": "Badge text/count or icon name in icon mode.",
99
+ "attribute": "value"
90
100
  },
91
101
  {
92
102
  "kind": "field",
93
- "name": "removable",
103
+ "name": "isIcon",
94
104
  "type": {
95
105
  "text": "boolean"
96
106
  },
97
107
  "default": "false",
98
- "description": "Shows a dismiss button when enabled.",
99
- "attribute": "removable"
108
+ "description": "Renders icon mode when true.",
109
+ "attribute": "isIcon",
110
+ "reflects": true
100
111
  },
101
112
  {
102
113
  "kind": "field",
103
- "name": "color",
114
+ "name": "size",
104
115
  "type": {
105
116
  "text": "string"
106
117
  },
107
- "default": "\"primary\"",
108
- "description": "Base color token or CSS color used by the alert.",
109
- "attribute": "color"
118
+ "default": "\"\"",
119
+ "description": "Badge and icon size CSS length.",
120
+ "attribute": "size",
121
+ "reflects": true
110
122
  },
111
123
  {
112
124
  "kind": "field",
113
- "name": "size",
125
+ "name": "shape",
114
126
  "type": {
115
- "text": "string"
127
+ "text": "SkyBadgeShape"
116
128
  },
117
- "default": "\"md\"",
118
- "description": "Preset size token (`xs | sm | md | lg | xl`) or CSS length.",
119
- "attribute": "size"
129
+ "default": "\"custom\"",
130
+ "description": "Badge shape: `circle | pill | custom`.",
131
+ "attribute": "shape",
132
+ "reflects": true
120
133
  },
121
134
  {
122
135
  "kind": "field",
123
- "name": "radius",
136
+ "name": "max",
124
137
  "type": {
125
- "text": "string"
138
+ "text": "number"
126
139
  },
127
- "default": "\"md\"",
128
- "description": "Radius token or CSS length.",
129
- "attribute": "radius"
140
+ "default": "99",
141
+ "description": "Maximum numeric count before rendering overflow label.",
142
+ "attribute": "max"
130
143
  },
131
144
  {
132
145
  "kind": "field",
133
- "name": "icon",
146
+ "name": "hideWhenZero",
134
147
  "type": {
135
- "text": "string | null"
148
+ "text": "boolean"
136
149
  },
137
- "default": "null",
138
- "description": "Optional leading icon name for `<sky-icon>`.",
139
- "attribute": "icon"
150
+ "default": "false",
151
+ "description": "Hides badge when value resolves to numeric zero.",
152
+ "attribute": "hideWhenZero"
140
153
  },
141
154
  {
142
155
  "kind": "field",
143
- "name": "strip",
156
+ "name": "show",
144
157
  "type": {
145
- "text": "SkyAlertStrip"
158
+ "text": "boolean"
146
159
  },
147
- "default": "\"none\"",
148
- "description": "Strip accent placement.",
149
- "attribute": "strip",
160
+ "default": "true",
161
+ "description": "Forces badge visibility independent of value.",
162
+ "attribute": "show",
150
163
  "reflects": true
151
164
  },
152
165
  {
153
166
  "kind": "field",
154
- "name": "stripColor",
167
+ "name": "offsetX",
155
168
  "type": {
156
169
  "text": "string"
157
170
  },
158
- "default": "\"currentColor\"",
159
- "description": "Strip accent color token or CSS color.",
160
- "attribute": "stripColor"
171
+ "default": "\"0px\"",
172
+ "description": "Horizontal offset CSS length.",
173
+ "attribute": "offsetX"
161
174
  },
162
175
  {
163
176
  "kind": "field",
164
- "name": "variant",
177
+ "name": "offsetY",
165
178
  "type": {
166
- "text": "SkyAlertVariant"
179
+ "text": "string"
167
180
  },
168
- "default": "\"solid\"",
169
- "description": "Visual style variant.",
170
- "attribute": "variant",
171
- "reflects": true
181
+ "default": "\"0px\"",
182
+ "description": "Vertical offset CSS length.",
183
+ "attribute": "offsetY"
172
184
  },
173
185
  {
174
186
  "kind": "field",
175
- "name": "loading",
187
+ "name": "ring",
176
188
  "type": {
177
189
  "text": "boolean"
178
190
  },
179
191
  "default": "false",
180
- "description": "Shows a loading overlay.",
181
- "attribute": "loading"
192
+ "description": "Enables visual ring around the badge.",
193
+ "attribute": "ring"
182
194
  },
183
195
  {
184
196
  "kind": "field",
185
- "name": "roleType",
197
+ "name": "ringColor",
186
198
  "type": {
187
- "text": "SkyAlertRoleType"
199
+ "text": "string"
188
200
  },
189
- "default": "\"alert\"",
190
- "description": "ARIA role for the alert container.",
191
- "attribute": "roleType",
192
- "reflects": true
201
+ "default": "\"primary\"",
202
+ "description": "Ring color token or CSS color.",
203
+ "attribute": "ringColor"
193
204
  },
194
205
  {
195
206
  "kind": "field",
196
- "name": "_styleVars",
207
+ "name": "ringOffset",
197
208
  "type": {
198
- "text": "Record<string, string>"
209
+ "text": "string"
199
210
  },
200
- "privacy": "private",
201
- "default": "{}",
202
- "description": "Internal style variables"
211
+ "default": "\"1px\"",
212
+ "description": "Ring offset CSS length.",
213
+ "attribute": "ringOffset"
203
214
  },
204
215
  {
205
216
  "kind": "field",
206
- "name": "_sizeCache",
217
+ "name": "badgeLabel",
207
218
  "type": {
208
- "text": "{ size: string; result: SkyAlertResolvedSize } | null"
219
+ "text": "string | null"
209
220
  },
210
- "privacy": "private",
211
221
  "default": "null",
212
- "description": "Cached result of _resolveSize for the last `size` value (avoids recomputing when only color/variant change)."
222
+ "description": "ARIA label override.",
223
+ "attribute": "badgeLabel"
213
224
  },
214
225
  {
215
226
  "kind": "field",
216
- "name": "_hasActionsSlotContent",
227
+ "name": "badgeAriaHidden",
217
228
  "type": {
218
229
  "text": "boolean"
219
230
  },
220
- "privacy": "private",
221
231
  "default": "false",
222
- "description": "True when the actions slot has assigned content (used to show separator only when needed)."
232
+ "description": "Hides badge from assistive technology when true.",
233
+ "attribute": "badgeAriaHidden"
234
+ },
235
+ {
236
+ "kind": "field",
237
+ "name": "interactive",
238
+ "type": {
239
+ "text": "boolean"
240
+ },
241
+ "default": "false",
242
+ "description": "Enables focus/activation and `badge-click` emission.",
243
+ "attribute": "interactive"
244
+ },
245
+ {
246
+ "kind": "field",
247
+ "name": "placement",
248
+ "type": {
249
+ "text": "SkyBadgePlacement"
250
+ },
251
+ "default": "\"custom\"",
252
+ "description": "Anchor placement preset for badge positioning.",
253
+ "attribute": "placement",
254
+ "reflects": true
223
255
  },
224
256
  {
225
257
  "kind": "field",
@@ -238,253 +270,360 @@
238
270
  "privacy": "private",
239
271
  "default": "new PresetController(this)"
240
272
  },
241
- {
242
- "kind": "method",
243
- "name": "_resolveSize",
244
- "privacy": "private",
245
- "return": {
246
- "type": {
247
- "text": "SkyAlertResolvedSize"
248
- }
249
- },
250
- "parameters": [
251
- {
252
- "name": "input",
253
- "type": {
254
- "text": "string"
255
- }
256
- }
257
- ],
258
- "description": "Resolves size to get padding, font sizes, and other metrics.\r\nResult is memoized by `size` to avoid recomputing when only color/variant/radius change."
259
- },
260
273
  {
261
274
  "kind": "field",
262
- "name": "_lastPresetRevision",
275
+ "name": "_badgeEl",
263
276
  "type": {
264
- "text": "number"
277
+ "text": "HTMLSpanElement"
265
278
  },
266
- "privacy": "private",
267
- "default": "-1"
279
+ "privacy": "private"
280
+ },
281
+ {
282
+ "kind": "field",
283
+ "name": "badgeRef",
284
+ "privacy": "public",
285
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
286
+ },
287
+ {
288
+ "kind": "field",
289
+ "name": "shadowRootOptions",
290
+ "type": {
291
+ "text": "ShadowRootInit"
292
+ },
293
+ "static": true,
294
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
268
295
  },
269
296
  {
270
297
  "kind": "method",
271
- "name": "_updateStyleVars",
272
- "privacy": "private",
298
+ "name": "showBadge",
299
+ "privacy": "public",
273
300
  "return": {
274
301
  "type": {
275
302
  "text": "void"
276
303
  }
277
304
  },
278
- "description": "Computes CSS custom properties from current variant, size, and color inputs."
305
+ "description": "Forces badge visibility on."
279
306
  },
280
307
  {
281
308
  "kind": "method",
282
- "name": "close",
309
+ "name": "hideBadge",
283
310
  "privacy": "public",
284
311
  "return": {
285
312
  "type": {
286
313
  "text": "void"
287
314
  }
288
315
  },
289
- "description": "Dispatches `alert-closed` and removes the alert from the DOM."
316
+ "description": "Forces badge visibility off."
290
317
  },
291
318
  {
292
319
  "kind": "method",
293
- "name": "getAriaRole",
294
- "privacy": "private",
320
+ "name": "setValue",
321
+ "privacy": "public",
295
322
  "return": {
296
323
  "type": {
297
- "text": "SkyAlertRoleType"
324
+ "text": "void"
298
325
  }
299
326
  },
300
- "description": "Returns the ARIA role applied to the alert container."
327
+ "parameters": [
328
+ {
329
+ "name": "value",
330
+ "type": {
331
+ "text": "string"
332
+ },
333
+ "description": "Badge value or icon name."
334
+ }
335
+ ],
336
+ "description": "Updates badge value for text/count or icon modes."
337
+ },
338
+ {
339
+ "kind": "field",
340
+ "name": "_onActivate",
341
+ "privacy": "private",
342
+ "description": "Emits `badge-click` for interactive activation."
343
+ },
344
+ {
345
+ "kind": "field",
346
+ "name": "_onKeydown",
347
+ "privacy": "private",
348
+ "description": "Handles keyboard activation with Enter and Space."
301
349
  },
302
350
  {
303
351
  "kind": "method",
304
- "name": "_checkActionsSlot",
352
+ "name": "_computeAriaLabel",
305
353
  "privacy": "private",
306
354
  "return": {
307
355
  "type": {
308
- "text": "void"
356
+ "text": "string | null"
309
357
  }
310
358
  },
311
- "description": "Checks whether the actions slot currently has meaningful assigned content."
359
+ "parameters": [
360
+ {
361
+ "name": "displayValue",
362
+ "type": {
363
+ "text": "string | null"
364
+ }
365
+ }
366
+ ],
367
+ "description": "Computes accessible badge label from current render state."
312
368
  },
313
369
  {
314
370
  "kind": "method",
315
- "name": "_onActionsSlotChange",
371
+ "name": "_computeAnchors",
316
372
  "privacy": "private",
317
373
  "return": {
318
374
  "type": {
319
- "text": "void"
375
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
320
376
  }
321
377
  },
322
378
  "parameters": [
323
379
  {
324
- "name": "e",
380
+ "name": "placement",
325
381
  "type": {
326
- "text": "Event"
382
+ "text": "SkyBadgePlacement"
327
383
  }
328
384
  }
329
385
  ],
330
- "description": "Updates action-slot state when the slot assignment changes."
386
+ "description": "Resolves anchor edges from placement preset."
387
+ },
388
+ {
389
+ "kind": "method",
390
+ "name": "_resolveBadgeSurface",
391
+ "privacy": "private",
392
+ "return": {
393
+ "type": {
394
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
395
+ }
396
+ },
397
+ "description": "Maps semantic status tokens to soft badge surface colors."
331
398
  }
332
399
  ],
333
400
  "events": [
334
401
  {
335
402
  "type": {
336
- "text": "CustomEvent<SkyAlertClosedEventDetail>"
403
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
337
404
  },
338
- "description": "Fired when the alert is dismissed via the close button; bubbles and is composed.",
339
- "name": "alert-closed"
405
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
406
+ "name": "badge-click"
340
407
  }
341
408
  ],
342
409
  "attributes": [
343
410
  {
344
- "name": "title",
411
+ "name": "statusColor",
345
412
  "type": {
346
413
  "text": "string"
347
414
  },
348
- "default": "\"\"",
349
- "description": "Title text shown above the message.",
350
- "fieldName": "title"
415
+ "default": "\"success\"",
416
+ "description": "Badge background token or CSS color.",
417
+ "fieldName": "statusColor"
351
418
  },
352
419
  {
353
- "name": "message",
420
+ "name": "textColor",
421
+ "type": {
422
+ "text": "string"
423
+ },
424
+ "default": "\"default\"",
425
+ "description": "Text color token or CSS color.",
426
+ "fieldName": "textColor"
427
+ },
428
+ {
429
+ "name": "iconColor",
354
430
  "type": {
355
431
  "text": "string"
356
432
  },
357
433
  "default": "\"\"",
358
- "description": "Message text rendered inside the alert.",
359
- "fieldName": "message"
434
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
435
+ "fieldName": "iconColor"
360
436
  },
361
437
  {
362
- "name": "removable",
438
+ "name": "position",
363
439
  "type": {
364
- "text": "boolean"
440
+ "text": "SkyBadgePosition"
365
441
  },
366
- "default": "false",
367
- "description": "Shows a dismiss button when enabled.",
368
- "fieldName": "removable"
442
+ "default": "\"default\"",
443
+ "description": "Layout mode: `default | floating | inline`.",
444
+ "fieldName": "position"
369
445
  },
370
446
  {
371
- "name": "color",
447
+ "name": "value",
372
448
  "type": {
373
449
  "text": "string"
374
450
  },
375
- "default": "\"primary\"",
376
- "description": "Base color token or CSS color used by the alert.",
377
- "fieldName": "color"
451
+ "default": "\"\"",
452
+ "description": "Badge text/count or icon name in icon mode.",
453
+ "fieldName": "value"
454
+ },
455
+ {
456
+ "name": "isIcon",
457
+ "type": {
458
+ "text": "boolean"
459
+ },
460
+ "default": "false",
461
+ "description": "Renders icon mode when true.",
462
+ "fieldName": "isIcon"
378
463
  },
379
464
  {
380
465
  "name": "size",
381
466
  "type": {
382
467
  "text": "string"
383
468
  },
384
- "default": "\"md\"",
385
- "description": "Preset size token (`xs | sm | md | lg | xl`) or CSS length.",
469
+ "default": "\"\"",
470
+ "description": "Badge and icon size CSS length.",
386
471
  "fieldName": "size"
387
472
  },
388
473
  {
389
- "name": "radius",
474
+ "name": "shape",
390
475
  "type": {
391
- "text": "string"
476
+ "text": "SkyBadgeShape"
392
477
  },
393
- "default": "\"md\"",
394
- "description": "Radius token or CSS length.",
395
- "fieldName": "radius"
478
+ "default": "\"custom\"",
479
+ "description": "Badge shape: `circle | pill | custom`.",
480
+ "fieldName": "shape"
396
481
  },
397
482
  {
398
- "name": "icon",
483
+ "name": "max",
399
484
  "type": {
400
- "text": "string | null"
485
+ "text": "number"
401
486
  },
402
- "default": "null",
403
- "description": "Optional leading icon name for `<sky-icon>`.",
404
- "fieldName": "icon"
487
+ "default": "99",
488
+ "description": "Maximum numeric count before rendering overflow label.",
489
+ "fieldName": "max"
405
490
  },
406
491
  {
407
- "name": "strip",
492
+ "name": "hideWhenZero",
408
493
  "type": {
409
- "text": "SkyAlertStrip"
494
+ "text": "boolean"
410
495
  },
411
- "default": "\"none\"",
412
- "description": "Strip accent placement.",
413
- "fieldName": "strip"
496
+ "default": "false",
497
+ "description": "Hides badge when value resolves to numeric zero.",
498
+ "fieldName": "hideWhenZero"
414
499
  },
415
500
  {
416
- "name": "stripColor",
501
+ "name": "show",
502
+ "type": {
503
+ "text": "boolean"
504
+ },
505
+ "default": "true",
506
+ "description": "Forces badge visibility independent of value.",
507
+ "fieldName": "show"
508
+ },
509
+ {
510
+ "name": "offsetX",
417
511
  "type": {
418
512
  "text": "string"
419
513
  },
420
- "default": "\"currentColor\"",
421
- "description": "Strip accent color token or CSS color.",
422
- "fieldName": "stripColor"
514
+ "default": "\"0px\"",
515
+ "description": "Horizontal offset CSS length.",
516
+ "fieldName": "offsetX"
423
517
  },
424
518
  {
425
- "name": "variant",
519
+ "name": "offsetY",
426
520
  "type": {
427
- "text": "SkyAlertVariant"
521
+ "text": "string"
428
522
  },
429
- "default": "\"solid\"",
430
- "description": "Visual style variant.",
431
- "fieldName": "variant"
523
+ "default": "\"0px\"",
524
+ "description": "Vertical offset CSS length.",
525
+ "fieldName": "offsetY"
432
526
  },
433
527
  {
434
- "name": "loading",
528
+ "name": "ring",
435
529
  "type": {
436
530
  "text": "boolean"
437
531
  },
438
532
  "default": "false",
439
- "description": "Shows a loading overlay.",
440
- "fieldName": "loading"
533
+ "description": "Enables visual ring around the badge.",
534
+ "fieldName": "ring"
441
535
  },
442
536
  {
443
- "name": "roleType",
537
+ "name": "ringColor",
444
538
  "type": {
445
- "text": "SkyAlertRoleType"
539
+ "text": "string"
446
540
  },
447
- "default": "\"alert\"",
448
- "description": "ARIA role for the alert container.",
449
- "fieldName": "roleType"
541
+ "default": "\"primary\"",
542
+ "description": "Ring color token or CSS color.",
543
+ "fieldName": "ringColor"
450
544
  },
451
545
  {
452
- "name": "preset",
546
+ "name": "ringOffset",
453
547
  "type": {
454
548
  "text": "string"
455
549
  },
456
- "default": "\"\"",
457
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
458
- "fieldName": "preset"
459
- }
460
- ],
461
- "superclass": {
462
- "name": "LitElement",
463
- "package": "lit"
464
- },
465
- "tagName": "sky-alert",
466
- "customElement": true,
467
- "summary": "Status alert banner with variants, optional icon, strip accents, actions, dismiss behavior, and loading state."
468
- }
469
- ],
470
- "exports": [
471
- {
472
- "kind": "js",
473
- "name": "SkyAlert",
474
- "declaration": {
475
- "name": "SkyAlert",
476
- "module": "src/sky-alert/sky-alert.ts"
477
- }
478
- },
479
- {
480
- "kind": "custom-element-definition",
481
- "name": "sky-alert",
482
- "declaration": {
483
- "name": "SkyAlert",
484
- "module": "src/sky-alert/sky-alert.ts"
485
- }
486
- }
487
- ]
550
+ "default": "\"1px\"",
551
+ "description": "Ring offset CSS length.",
552
+ "fieldName": "ringOffset"
553
+ },
554
+ {
555
+ "name": "badgeLabel",
556
+ "type": {
557
+ "text": "string | null"
558
+ },
559
+ "default": "null",
560
+ "description": "ARIA label override.",
561
+ "fieldName": "badgeLabel"
562
+ },
563
+ {
564
+ "name": "badgeAriaHidden",
565
+ "type": {
566
+ "text": "boolean"
567
+ },
568
+ "default": "false",
569
+ "description": "Hides badge from assistive technology when true.",
570
+ "fieldName": "badgeAriaHidden"
571
+ },
572
+ {
573
+ "name": "interactive",
574
+ "type": {
575
+ "text": "boolean"
576
+ },
577
+ "default": "false",
578
+ "description": "Enables focus/activation and `badge-click` emission.",
579
+ "fieldName": "interactive"
580
+ },
581
+ {
582
+ "name": "placement",
583
+ "type": {
584
+ "text": "SkyBadgePlacement"
585
+ },
586
+ "default": "\"custom\"",
587
+ "description": "Anchor placement preset for badge positioning.",
588
+ "fieldName": "placement"
589
+ },
590
+ {
591
+ "name": "preset",
592
+ "type": {
593
+ "text": "string"
594
+ },
595
+ "default": "\"\"",
596
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
597
+ "fieldName": "preset"
598
+ }
599
+ ],
600
+ "superclass": {
601
+ "name": "LitElement",
602
+ "package": "lit"
603
+ },
604
+ "tagName": "sky-badge",
605
+ "customElement": true,
606
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
607
+ }
608
+ ],
609
+ "exports": [
610
+ {
611
+ "kind": "js",
612
+ "name": "SkyBadge",
613
+ "declaration": {
614
+ "name": "SkyBadge",
615
+ "module": "src/sky-badge/sky-badge.ts"
616
+ }
617
+ },
618
+ {
619
+ "kind": "custom-element-definition",
620
+ "name": "sky-badge",
621
+ "declaration": {
622
+ "name": "SkyBadge",
623
+ "module": "src/sky-badge/sky-badge.ts"
624
+ }
625
+ }
626
+ ]
488
627
  },
489
628
  {
490
629
  "kind": "javascript-module",
@@ -746,588 +885,362 @@
746
885
  },
747
886
  {
748
887
  "kind": "javascript-module",
749
- "path": "src/sky-badge/sky-badge.ts",
888
+ "path": "src/sky-avatar/sky-avatar.ts",
750
889
  "declarations": [
751
890
  {
752
891
  "kind": "class",
753
892
  "description": "",
754
- "name": "SkyBadge",
893
+ "name": "SkyAvatar",
755
894
  "cssParts": [
756
895
  {
757
- "description": "Wrapper around the slotted content and the badge.",
758
- "name": "container"
896
+ "description": "The avatar container element.",
897
+ "name": "avatar"
759
898
  },
760
899
  {
761
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
762
- "name": "badge"
900
+ "description": "The loading overlay container (shown when `loading` is true).",
901
+ "name": "loading-overlay"
763
902
  },
764
903
  {
765
- "description": "The icon element when `isIcon` is true.",
766
- "name": "icon"
904
+ "description": "The spinner element shown when loading.",
905
+ "name": "spinner"
767
906
  }
768
907
  ],
769
908
  "slots": [
770
909
  {
771
- "description": "The content the badge attaches to.",
910
+ "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
772
911
  "name": ""
773
- },
774
- {
775
- "description": "Optional slot to override the badge content entirely.",
776
- "name": "badge"
777
912
  }
778
913
  ],
779
914
  "members": [
780
915
  {
781
916
  "kind": "field",
782
- "name": "dependencies",
783
- "type": {
784
- "text": "Record<string, CustomElementConstructor>"
785
- },
786
- "static": true,
787
- "default": "{ \"sky-icon\": SkyIcon, }"
788
- },
789
- {
790
- "kind": "field",
791
- "name": "statusColor",
917
+ "name": "size",
792
918
  "type": {
793
919
  "text": "string"
794
920
  },
795
- "default": "\"success\"",
796
- "description": "Badge background token or CSS color.",
797
- "attribute": "statusColor",
798
- "reflects": true
921
+ "default": "\"50px\"",
922
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
923
+ "attribute": "size"
799
924
  },
800
925
  {
801
926
  "kind": "field",
802
- "name": "textColor",
927
+ "name": "image",
803
928
  "type": {
804
929
  "text": "string"
805
930
  },
806
- "default": "\"default\"",
807
- "description": "Text color token or CSS color.",
808
- "attribute": "textColor",
809
- "reflects": true
931
+ "default": "\"\"",
932
+ "description": "Image URL; fallback slot is shown on load error.",
933
+ "attribute": "image"
810
934
  },
811
935
  {
812
936
  "kind": "field",
813
- "name": "iconColor",
937
+ "name": "fit",
814
938
  "type": {
815
- "text": "string"
939
+ "text": "SkyAvatarFit"
816
940
  },
817
- "default": "\"\"",
818
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
819
- "attribute": "iconColor",
941
+ "default": "\"cover\"",
942
+ "description": "Image fill mode: `cover` (default) or `contain`.",
943
+ "attribute": "fit",
820
944
  "reflects": true
821
945
  },
822
946
  {
823
947
  "kind": "field",
824
- "name": "position",
948
+ "name": "radius",
825
949
  "type": {
826
- "text": "SkyBadgePosition"
950
+ "text": "string"
827
951
  },
828
- "default": "\"default\"",
829
- "description": "Layout mode: `default | floating | inline`.",
830
- "attribute": "position",
831
- "reflects": true
952
+ "default": "\"md\"",
953
+ "description": "Border radius token or CSS value.",
954
+ "attribute": "radius"
832
955
  },
833
956
  {
834
957
  "kind": "field",
835
- "name": "value",
958
+ "name": "alt",
836
959
  "type": {
837
960
  "text": "string"
838
961
  },
839
962
  "default": "\"\"",
840
- "description": "Badge text/count or icon name in icon mode.",
841
- "attribute": "value"
963
+ "description": "Accessible name when image content conveys meaning.",
964
+ "attribute": "alt"
842
965
  },
843
966
  {
844
967
  "kind": "field",
845
- "name": "isIcon",
968
+ "name": "color",
846
969
  "type": {
847
- "text": "boolean"
970
+ "text": "string"
848
971
  },
849
- "default": "false",
850
- "description": "Renders icon mode when true.",
851
- "attribute": "isIcon",
852
- "reflects": true
972
+ "default": "\"dark\"",
973
+ "description": "Token or CSS color applied to fallback slot content.",
974
+ "attribute": "color"
853
975
  },
854
976
  {
855
977
  "kind": "field",
856
- "name": "size",
978
+ "name": "outline",
857
979
  "type": {
858
980
  "text": "string"
859
981
  },
860
982
  "default": "\"\"",
861
- "description": "Badge and icon size CSS length.",
862
- "attribute": "size",
863
- "reflects": true
864
- },
865
- {
866
- "kind": "field",
867
- "name": "shape",
868
- "type": {
869
- "text": "SkyBadgeShape"
870
- },
871
- "default": "\"custom\"",
872
- "description": "Badge shape: `circle | pill | custom`.",
873
- "attribute": "shape",
874
- "reflects": true
983
+ "description": "CSS `outline` value.",
984
+ "attribute": "outline"
875
985
  },
876
986
  {
877
987
  "kind": "field",
878
- "name": "max",
988
+ "name": "outlineOffset",
879
989
  "type": {
880
- "text": "number"
990
+ "text": "string"
881
991
  },
882
- "default": "99",
883
- "description": "Maximum numeric count before rendering overflow label.",
884
- "attribute": "max"
992
+ "default": "\"2px\"",
993
+ "description": "CSS `outline-offset` value.",
994
+ "attribute": "outlineOffset"
885
995
  },
886
996
  {
887
997
  "kind": "field",
888
- "name": "hideWhenZero",
998
+ "name": "loading",
889
999
  "type": {
890
1000
  "text": "boolean"
891
1001
  },
892
1002
  "default": "false",
893
- "description": "Hides badge when value resolves to numeric zero.",
894
- "attribute": "hideWhenZero"
1003
+ "description": "Shows loading overlay when true.",
1004
+ "attribute": "loading",
1005
+ "reflects": true
895
1006
  },
896
1007
  {
897
1008
  "kind": "field",
898
- "name": "show",
1009
+ "name": "disabled",
899
1010
  "type": {
900
1011
  "text": "boolean"
901
1012
  },
902
- "default": "true",
903
- "description": "Forces badge visibility independent of value.",
904
- "attribute": "show",
1013
+ "default": "false",
1014
+ "description": "Dims and disables pointer interactions.",
1015
+ "attribute": "disabled",
905
1016
  "reflects": true
906
1017
  },
907
1018
  {
908
1019
  "kind": "field",
909
- "name": "offsetX",
1020
+ "name": "interactive",
910
1021
  "type": {
911
- "text": "string"
1022
+ "text": "boolean"
912
1023
  },
913
- "default": "\"0px\"",
914
- "description": "Horizontal offset CSS length.",
915
- "attribute": "offsetX"
1024
+ "default": "false",
1025
+ "description": "Enables interactive behavior with keyboard/click activation.",
1026
+ "attribute": "interactive"
916
1027
  },
917
1028
  {
918
1029
  "kind": "field",
919
- "name": "offsetY",
1030
+ "name": "shadow",
920
1031
  "type": {
921
- "text": "string"
1032
+ "text": "boolean"
922
1033
  },
923
- "default": "\"0px\"",
924
- "description": "Vertical offset CSS length.",
925
- "attribute": "offsetY"
1034
+ "default": "false",
1035
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1036
+ "attribute": "shadow",
1037
+ "reflects": true
926
1038
  },
927
1039
  {
928
1040
  "kind": "field",
929
- "name": "ring",
1041
+ "name": "_imageError",
930
1042
  "type": {
931
1043
  "text": "boolean"
932
1044
  },
1045
+ "privacy": "private",
933
1046
  "default": "false",
934
- "description": "Enables visual ring around the badge.",
935
- "attribute": "ring"
1047
+ "description": "True when image failed to load; show slot instead."
936
1048
  },
937
1049
  {
938
1050
  "kind": "field",
939
- "name": "ringColor",
1051
+ "name": "preset",
940
1052
  "type": {
941
1053
  "text": "string"
942
1054
  },
943
- "default": "\"primary\"",
944
- "description": "Ring color token or CSS color.",
945
- "attribute": "ringColor"
1055
+ "default": "\"\"",
1056
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
1057
+ "attribute": "preset",
1058
+ "reflects": true
946
1059
  },
947
1060
  {
948
1061
  "kind": "field",
949
- "name": "ringOffset",
950
- "type": {
951
- "text": "string"
952
- },
953
- "default": "\"1px\"",
954
- "description": "Ring offset CSS length.",
955
- "attribute": "ringOffset"
1062
+ "name": "_presets",
1063
+ "privacy": "private",
1064
+ "default": "new PresetController(this)"
956
1065
  },
957
1066
  {
958
1067
  "kind": "field",
959
- "name": "badgeLabel",
960
- "type": {
961
- "text": "string | null"
962
- },
963
- "default": "null",
964
- "description": "ARIA label override.",
965
- "attribute": "badgeLabel"
966
- },
967
- {
968
- "kind": "field",
969
- "name": "badgeAriaHidden",
970
- "type": {
971
- "text": "boolean"
972
- },
973
- "default": "false",
974
- "description": "Hides badge from assistive technology when true.",
975
- "attribute": "badgeAriaHidden"
976
- },
977
- {
978
- "kind": "field",
979
- "name": "interactive",
980
- "type": {
981
- "text": "boolean"
982
- },
983
- "default": "false",
984
- "description": "Enables focus/activation and `badge-click` emission.",
985
- "attribute": "interactive"
986
- },
987
- {
988
- "kind": "field",
989
- "name": "placement",
990
- "type": {
991
- "text": "SkyBadgePlacement"
992
- },
993
- "default": "\"custom\"",
994
- "description": "Anchor placement preset for badge positioning.",
995
- "attribute": "placement",
996
- "reflects": true
997
- },
998
- {
999
- "kind": "field",
1000
- "name": "preset",
1001
- "type": {
1002
- "text": "string"
1003
- },
1004
- "default": "\"\"",
1005
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
1006
- "attribute": "preset",
1007
- "reflects": true
1008
- },
1009
- {
1010
- "kind": "field",
1011
- "name": "_presets",
1012
- "privacy": "private",
1013
- "default": "new PresetController(this)"
1014
- },
1015
- {
1016
- "kind": "field",
1017
- "name": "_badgeEl",
1018
- "type": {
1019
- "text": "HTMLSpanElement"
1020
- },
1021
- "privacy": "private"
1022
- },
1023
- {
1024
- "kind": "field",
1025
- "name": "badgeRef",
1026
- "privacy": "public",
1027
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1028
- },
1029
- {
1030
- "kind": "field",
1031
- "name": "shadowRootOptions",
1032
- "type": {
1033
- "text": "ShadowRootInit"
1034
- },
1035
- "static": true,
1036
- "default": "{ mode: \"open\", delegatesFocus: true, }"
1037
- },
1038
- {
1039
- "kind": "method",
1040
- "name": "showBadge",
1041
- "privacy": "public",
1042
- "return": {
1043
- "type": {
1044
- "text": "void"
1045
- }
1046
- },
1047
- "description": "Forces badge visibility on."
1048
- },
1049
- {
1050
- "kind": "method",
1051
- "name": "hideBadge",
1052
- "privacy": "public",
1053
- "return": {
1054
- "type": {
1055
- "text": "void"
1056
- }
1057
- },
1058
- "description": "Forces badge visibility off."
1059
- },
1060
- {
1061
- "kind": "method",
1062
- "name": "setValue",
1063
- "privacy": "public",
1064
- "return": {
1065
- "type": {
1066
- "text": "void"
1067
- }
1068
- },
1069
- "parameters": [
1070
- {
1071
- "name": "value",
1072
- "type": {
1073
- "text": "string"
1074
- },
1075
- "description": "Badge value or icon name."
1076
- }
1077
- ],
1078
- "description": "Updates badge value for text/count or icon modes."
1079
- },
1080
- {
1081
- "kind": "field",
1082
- "name": "_onActivate",
1068
+ "name": "_onImageLoad",
1083
1069
  "privacy": "private",
1084
- "description": "Emits `badge-click` for interactive activation."
1070
+ "description": "Marks image load success and keeps image rendering active."
1085
1071
  },
1086
1072
  {
1087
1073
  "kind": "field",
1088
- "name": "_onKeydown",
1074
+ "name": "_onImageError",
1089
1075
  "privacy": "private",
1090
- "description": "Handles keyboard activation with Enter and Space."
1076
+ "description": "Marks image load failure and enables fallback slot rendering."
1091
1077
  },
1092
1078
  {
1093
1079
  "kind": "method",
1094
- "name": "_computeAriaLabel",
1080
+ "name": "_handleInteractiveClick",
1095
1081
  "privacy": "private",
1096
1082
  "return": {
1097
1083
  "type": {
1098
- "text": "string | null"
1084
+ "text": "void"
1099
1085
  }
1100
1086
  },
1101
1087
  "parameters": [
1102
1088
  {
1103
- "name": "displayValue",
1089
+ "name": "e",
1104
1090
  "type": {
1105
- "text": "string | null"
1091
+ "text": "Event"
1106
1092
  }
1107
1093
  }
1108
1094
  ],
1109
- "description": "Computes accessible badge label from current render state."
1095
+ "description": "Re-dispatches click in interactive mode for host-level consumers."
1110
1096
  },
1111
1097
  {
1112
1098
  "kind": "method",
1113
- "name": "_computeAnchors",
1099
+ "name": "_handleInteractiveKeydown",
1114
1100
  "privacy": "private",
1115
1101
  "return": {
1116
1102
  "type": {
1117
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1103
+ "text": "void"
1118
1104
  }
1119
1105
  },
1120
1106
  "parameters": [
1121
1107
  {
1122
- "name": "placement",
1108
+ "name": "e",
1123
1109
  "type": {
1124
- "text": "SkyBadgePlacement"
1110
+ "text": "KeyboardEvent"
1125
1111
  }
1126
1112
  }
1127
1113
  ],
1128
- "description": "Resolves anchor edges from placement preset."
1114
+ "description": "Handles keyboard activation in interactive mode."
1129
1115
  },
1130
1116
  {
1131
1117
  "kind": "method",
1132
- "name": "_resolveBadgeSurface",
1118
+ "name": "adjustSpinnerSize",
1133
1119
  "privacy": "private",
1134
1120
  "return": {
1135
1121
  "type": {
1136
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1122
+ "text": "void"
1137
1123
  }
1138
1124
  },
1139
- "description": "Maps semantic status tokens to soft badge surface colors."
1125
+ "description": "Derives spinner dimensions from current avatar size."
1140
1126
  }
1141
1127
  ],
1142
1128
  "events": [
1143
1129
  {
1130
+ "name": "click",
1144
1131
  "type": {
1145
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
1146
- },
1147
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1148
- "name": "badge-click"
1132
+ "text": "Event"
1133
+ }
1149
1134
  }
1150
1135
  ],
1151
1136
  "attributes": [
1152
1137
  {
1153
- "name": "statusColor",
1138
+ "name": "size",
1154
1139
  "type": {
1155
1140
  "text": "string"
1156
1141
  },
1157
- "default": "\"success\"",
1158
- "description": "Badge background token or CSS color.",
1159
- "fieldName": "statusColor"
1142
+ "default": "\"50px\"",
1143
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1144
+ "fieldName": "size"
1160
1145
  },
1161
1146
  {
1162
- "name": "textColor",
1147
+ "name": "image",
1163
1148
  "type": {
1164
1149
  "text": "string"
1165
1150
  },
1166
- "default": "\"default\"",
1167
- "description": "Text color token or CSS color.",
1168
- "fieldName": "textColor"
1151
+ "default": "\"\"",
1152
+ "description": "Image URL; fallback slot is shown on load error.",
1153
+ "fieldName": "image"
1169
1154
  },
1170
1155
  {
1171
- "name": "iconColor",
1156
+ "name": "fit",
1172
1157
  "type": {
1173
- "text": "string"
1158
+ "text": "SkyAvatarFit"
1174
1159
  },
1175
- "default": "\"\"",
1176
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1177
- "fieldName": "iconColor"
1160
+ "default": "\"cover\"",
1161
+ "description": "Image fill mode: `cover` (default) or `contain`.",
1162
+ "fieldName": "fit"
1178
1163
  },
1179
1164
  {
1180
- "name": "position",
1165
+ "name": "radius",
1181
1166
  "type": {
1182
- "text": "SkyBadgePosition"
1167
+ "text": "string"
1183
1168
  },
1184
- "default": "\"default\"",
1185
- "description": "Layout mode: `default | floating | inline`.",
1186
- "fieldName": "position"
1169
+ "default": "\"md\"",
1170
+ "description": "Border radius token or CSS value.",
1171
+ "fieldName": "radius"
1187
1172
  },
1188
1173
  {
1189
- "name": "value",
1174
+ "name": "alt",
1190
1175
  "type": {
1191
1176
  "text": "string"
1192
1177
  },
1193
1178
  "default": "\"\"",
1194
- "description": "Badge text/count or icon name in icon mode.",
1195
- "fieldName": "value"
1179
+ "description": "Accessible name when image content conveys meaning.",
1180
+ "fieldName": "alt"
1196
1181
  },
1197
1182
  {
1198
- "name": "isIcon",
1183
+ "name": "color",
1199
1184
  "type": {
1200
- "text": "boolean"
1185
+ "text": "string"
1201
1186
  },
1202
- "default": "false",
1203
- "description": "Renders icon mode when true.",
1204
- "fieldName": "isIcon"
1187
+ "default": "\"dark\"",
1188
+ "description": "Token or CSS color applied to fallback slot content.",
1189
+ "fieldName": "color"
1205
1190
  },
1206
1191
  {
1207
- "name": "size",
1192
+ "name": "outline",
1208
1193
  "type": {
1209
1194
  "text": "string"
1210
1195
  },
1211
1196
  "default": "\"\"",
1212
- "description": "Badge and icon size CSS length.",
1213
- "fieldName": "size"
1197
+ "description": "CSS `outline` value.",
1198
+ "fieldName": "outline"
1214
1199
  },
1215
1200
  {
1216
- "name": "shape",
1201
+ "name": "outlineOffset",
1217
1202
  "type": {
1218
- "text": "SkyBadgeShape"
1203
+ "text": "string"
1219
1204
  },
1220
- "default": "\"custom\"",
1221
- "description": "Badge shape: `circle | pill | custom`.",
1222
- "fieldName": "shape"
1205
+ "default": "\"2px\"",
1206
+ "description": "CSS `outline-offset` value.",
1207
+ "fieldName": "outlineOffset"
1223
1208
  },
1224
1209
  {
1225
- "name": "max",
1210
+ "name": "loading",
1226
1211
  "type": {
1227
- "text": "number"
1212
+ "text": "boolean"
1228
1213
  },
1229
- "default": "99",
1230
- "description": "Maximum numeric count before rendering overflow label.",
1231
- "fieldName": "max"
1214
+ "default": "false",
1215
+ "description": "Shows loading overlay when true.",
1216
+ "fieldName": "loading"
1232
1217
  },
1233
1218
  {
1234
- "name": "hideWhenZero",
1219
+ "name": "disabled",
1235
1220
  "type": {
1236
1221
  "text": "boolean"
1237
1222
  },
1238
1223
  "default": "false",
1239
- "description": "Hides badge when value resolves to numeric zero.",
1240
- "fieldName": "hideWhenZero"
1224
+ "description": "Dims and disables pointer interactions.",
1225
+ "fieldName": "disabled"
1241
1226
  },
1242
1227
  {
1243
- "name": "show",
1228
+ "name": "interactive",
1244
1229
  "type": {
1245
1230
  "text": "boolean"
1246
1231
  },
1247
- "default": "true",
1248
- "description": "Forces badge visibility independent of value.",
1249
- "fieldName": "show"
1232
+ "default": "false",
1233
+ "description": "Enables interactive behavior with keyboard/click activation.",
1234
+ "fieldName": "interactive"
1250
1235
  },
1251
1236
  {
1252
- "name": "offsetX",
1253
- "type": {
1254
- "text": "string"
1255
- },
1256
- "default": "\"0px\"",
1257
- "description": "Horizontal offset CSS length.",
1258
- "fieldName": "offsetX"
1259
- },
1260
- {
1261
- "name": "offsetY",
1262
- "type": {
1263
- "text": "string"
1264
- },
1265
- "default": "\"0px\"",
1266
- "description": "Vertical offset CSS length.",
1267
- "fieldName": "offsetY"
1268
- },
1269
- {
1270
- "name": "ring",
1271
- "type": {
1272
- "text": "boolean"
1273
- },
1274
- "default": "false",
1275
- "description": "Enables visual ring around the badge.",
1276
- "fieldName": "ring"
1277
- },
1278
- {
1279
- "name": "ringColor",
1280
- "type": {
1281
- "text": "string"
1282
- },
1283
- "default": "\"primary\"",
1284
- "description": "Ring color token or CSS color.",
1285
- "fieldName": "ringColor"
1286
- },
1287
- {
1288
- "name": "ringOffset",
1289
- "type": {
1290
- "text": "string"
1291
- },
1292
- "default": "\"1px\"",
1293
- "description": "Ring offset CSS length.",
1294
- "fieldName": "ringOffset"
1295
- },
1296
- {
1297
- "name": "badgeLabel",
1298
- "type": {
1299
- "text": "string | null"
1300
- },
1301
- "default": "null",
1302
- "description": "ARIA label override.",
1303
- "fieldName": "badgeLabel"
1304
- },
1305
- {
1306
- "name": "badgeAriaHidden",
1307
- "type": {
1308
- "text": "boolean"
1309
- },
1310
- "default": "false",
1311
- "description": "Hides badge from assistive technology when true.",
1312
- "fieldName": "badgeAriaHidden"
1313
- },
1314
- {
1315
- "name": "interactive",
1237
+ "name": "shadow",
1316
1238
  "type": {
1317
1239
  "text": "boolean"
1318
1240
  },
1319
1241
  "default": "false",
1320
- "description": "Enables focus/activation and `badge-click` emission.",
1321
- "fieldName": "interactive"
1322
- },
1323
- {
1324
- "name": "placement",
1325
- "type": {
1326
- "text": "SkyBadgePlacement"
1327
- },
1328
- "default": "\"custom\"",
1329
- "description": "Anchor placement preset for badge positioning.",
1330
- "fieldName": "placement"
1242
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1243
+ "fieldName": "shadow"
1331
1244
  },
1332
1245
  {
1333
1246
  "name": "preset",
@@ -1343,60 +1256,84 @@
1343
1256
  "name": "LitElement",
1344
1257
  "package": "lit"
1345
1258
  },
1346
- "tagName": "sky-badge",
1259
+ "tagName": "sky-avatar",
1347
1260
  "customElement": true,
1348
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
1261
+ "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1349
1262
  }
1350
1263
  ],
1351
1264
  "exports": [
1352
1265
  {
1353
1266
  "kind": "js",
1354
- "name": "SkyBadge",
1267
+ "name": "SkyAvatar",
1355
1268
  "declaration": {
1356
- "name": "SkyBadge",
1357
- "module": "src/sky-badge/sky-badge.ts"
1269
+ "name": "SkyAvatar",
1270
+ "module": "src/sky-avatar/sky-avatar.ts"
1358
1271
  }
1359
1272
  },
1360
1273
  {
1361
1274
  "kind": "custom-element-definition",
1362
- "name": "sky-badge",
1275
+ "name": "sky-avatar",
1363
1276
  "declaration": {
1364
- "name": "SkyBadge",
1365
- "module": "src/sky-badge/sky-badge.ts"
1277
+ "name": "SkyAvatar",
1278
+ "module": "src/sky-avatar/sky-avatar.ts"
1366
1279
  }
1367
1280
  }
1368
1281
  ]
1369
1282
  },
1370
1283
  {
1371
1284
  "kind": "javascript-module",
1372
- "path": "src/sky-button/sky-button.ts",
1285
+ "path": "src/sky-alert/sky-alert.ts",
1373
1286
  "declarations": [
1374
1287
  {
1375
1288
  "kind": "class",
1376
1289
  "description": "",
1377
- "name": "SkyButton",
1290
+ "name": "SkyAlert",
1378
1291
  "cssParts": [
1379
1292
  {
1380
- "description": "The native `<button>` element.",
1381
- "name": "button"
1293
+ "description": "The outer alert container.",
1294
+ "name": "alert"
1382
1295
  },
1383
1296
  {
1384
- "description": "The optional left/right icons.",
1297
+ "description": "The optional leading icon.",
1385
1298
  "name": "icon"
1386
1299
  },
1387
1300
  {
1388
- "description": "Overlay displayed when loading.",
1301
+ "description": "The content container (title + message/slot).",
1302
+ "name": "content"
1303
+ },
1304
+ {
1305
+ "description": "The title text element.",
1306
+ "name": "title"
1307
+ },
1308
+ {
1309
+ "description": "The message text element (when `message` is provided).",
1310
+ "name": "message"
1311
+ },
1312
+ {
1313
+ "description": "The trailing actions container.",
1314
+ "name": "actions"
1315
+ },
1316
+ {
1317
+ "description": "The dismiss button (when `removable`).",
1318
+ "name": "close-button"
1319
+ },
1320
+ {
1321
+ "description": "Overlay shown when `loading` is true.",
1389
1322
  "name": "loading-overlay"
1390
1323
  },
1391
1324
  {
1392
- "description": "Spinner displayed when loading.",
1393
- "name": "spinner"
1325
+ "description": "Spinner element shown inside the loading overlay.",
1326
+ "name": "loading-spinner"
1394
1327
  }
1395
1328
  ],
1396
1329
  "slots": [
1397
1330
  {
1398
- "description": "Default slot for the button label (replaces `label` property if used).",
1331
+ "description": "Custom message content (used when `message` is empty).",
1399
1332
  "name": ""
1333
+ },
1334
+ {
1335
+ "description": "Action buttons or links displayed on the trailing side.",
1336
+ "name": "actions"
1400
1337
  }
1401
1338
  ],
1402
1339
  "members": [
@@ -1411,31 +1348,33 @@
1411
1348
  },
1412
1349
  {
1413
1350
  "kind": "field",
1414
- "name": "formAssociated",
1351
+ "name": "title",
1415
1352
  "type": {
1416
- "text": "boolean"
1353
+ "text": "string"
1417
1354
  },
1418
- "static": true,
1419
- "default": "true"
1355
+ "default": "\"\"",
1356
+ "description": "Title text shown above the message.",
1357
+ "attribute": "title"
1420
1358
  },
1421
1359
  {
1422
1360
  "kind": "field",
1423
- "name": "internals",
1361
+ "name": "message",
1424
1362
  "type": {
1425
- "text": "ElementInternals"
1363
+ "text": "string"
1426
1364
  },
1427
- "privacy": "private"
1365
+ "default": "\"\"",
1366
+ "description": "Message text rendered inside the alert.",
1367
+ "attribute": "message"
1428
1368
  },
1429
1369
  {
1430
1370
  "kind": "field",
1431
- "name": "variant",
1371
+ "name": "removable",
1432
1372
  "type": {
1433
- "text": "SkyButtonVariant"
1373
+ "text": "boolean"
1434
1374
  },
1435
- "default": "\"solid\"",
1436
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1437
- "attribute": "variant",
1438
- "reflects": true
1375
+ "default": "false",
1376
+ "description": "Shows a dismiss button when enabled.",
1377
+ "attribute": "removable"
1439
1378
  },
1440
1379
  {
1441
1380
  "kind": "field",
@@ -1444,68 +1383,69 @@
1444
1383
  "text": "string"
1445
1384
  },
1446
1385
  "default": "\"primary\"",
1447
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1386
+ "description": "Base color token or CSS color used by the alert.",
1448
1387
  "attribute": "color"
1449
1388
  },
1450
1389
  {
1451
1390
  "kind": "field",
1452
- "name": "type",
1391
+ "name": "size",
1453
1392
  "type": {
1454
- "text": "SkyButtonType"
1393
+ "text": "string"
1455
1394
  },
1456
- "default": "\"button\"",
1457
- "description": "Button type attribute. Default: `\"button\"`.",
1458
- "attribute": "type"
1395
+ "default": "\"md\"",
1396
+ "description": "Preset size token (`xs | sm | md | lg | xl`) or CSS length.",
1397
+ "attribute": "size"
1459
1398
  },
1460
1399
  {
1461
1400
  "kind": "field",
1462
- "name": "form",
1401
+ "name": "radius",
1463
1402
  "type": {
1464
1403
  "text": "string"
1465
1404
  },
1466
- "default": "\"\"",
1467
- "description": "Associated form ID for custom submit handling.",
1468
- "attribute": "form"
1405
+ "default": "\"md\"",
1406
+ "description": "Radius token or CSS length.",
1407
+ "attribute": "radius"
1469
1408
  },
1470
1409
  {
1471
1410
  "kind": "field",
1472
- "name": "size",
1411
+ "name": "icon",
1473
1412
  "type": {
1474
- "text": "string"
1413
+ "text": "string | null"
1475
1414
  },
1476
- "default": "\"md\"",
1477
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1478
- "attribute": "size"
1415
+ "default": "null",
1416
+ "description": "Optional leading icon name for `<sky-icon>`.",
1417
+ "attribute": "icon"
1479
1418
  },
1480
1419
  {
1481
1420
  "kind": "field",
1482
- "name": "radius",
1421
+ "name": "strip",
1483
1422
  "type": {
1484
- "text": "string"
1423
+ "text": "SkyAlertStrip"
1485
1424
  },
1486
- "default": "\"md\"",
1487
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1488
- "attribute": "radius"
1425
+ "default": "\"none\"",
1426
+ "description": "Strip accent placement.",
1427
+ "attribute": "strip",
1428
+ "reflects": true
1489
1429
  },
1490
1430
  {
1491
1431
  "kind": "field",
1492
- "name": "label",
1432
+ "name": "stripColor",
1493
1433
  "type": {
1494
1434
  "text": "string"
1495
1435
  },
1496
- "default": "\"Button\"",
1497
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1498
- "attribute": "label"
1436
+ "default": "\"currentColor\"",
1437
+ "description": "Strip accent color token or CSS color.",
1438
+ "attribute": "stripColor"
1499
1439
  },
1500
1440
  {
1501
1441
  "kind": "field",
1502
- "name": "disabled",
1442
+ "name": "variant",
1503
1443
  "type": {
1504
- "text": "boolean"
1444
+ "text": "SkyAlertVariant"
1505
1445
  },
1506
- "default": "false",
1507
- "description": "Whether the button is disabled. Default: `false`.",
1508
- "attribute": "disabled",
1446
+ "default": "\"solid\"",
1447
+ "description": "Visual style variant.",
1448
+ "attribute": "variant",
1509
1449
  "reflects": true
1510
1450
  },
1511
1451
  {
@@ -1515,61 +1455,49 @@
1515
1455
  "text": "boolean"
1516
1456
  },
1517
1457
  "default": "false",
1518
- "description": "Shows a loading overlay when true. Default: `false`.",
1519
- "attribute": "loading",
1458
+ "description": "Shows a loading overlay.",
1459
+ "attribute": "loading"
1460
+ },
1461
+ {
1462
+ "kind": "field",
1463
+ "name": "roleType",
1464
+ "type": {
1465
+ "text": "SkyAlertRoleType"
1466
+ },
1467
+ "default": "\"alert\"",
1468
+ "description": "ARIA role for the alert container.",
1469
+ "attribute": "roleType",
1520
1470
  "reflects": true
1521
1471
  },
1522
1472
  {
1523
1473
  "kind": "field",
1524
- "name": "iconL",
1474
+ "name": "_styleVars",
1525
1475
  "type": {
1526
- "text": "string"
1476
+ "text": "Record<string, string>"
1527
1477
  },
1528
- "default": "\"\"",
1529
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1530
- "attribute": "iconL"
1478
+ "privacy": "private",
1479
+ "default": "{}",
1480
+ "description": "Internal style variables"
1531
1481
  },
1532
1482
  {
1533
1483
  "kind": "field",
1534
- "name": "iconR",
1484
+ "name": "_sizeCache",
1535
1485
  "type": {
1536
- "text": "string"
1486
+ "text": "{ size: string; result: SkyAlertResolvedSize } | null"
1537
1487
  },
1538
- "default": "\"\"",
1539
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1540
- "attribute": "iconR"
1488
+ "privacy": "private",
1489
+ "default": "null",
1490
+ "description": "Cached result of _resolveSize for the last `size` value (avoids recomputing when only color/variant change)."
1541
1491
  },
1542
1492
  {
1543
1493
  "kind": "field",
1544
- "name": "iconOnly",
1494
+ "name": "_hasActionsSlotContent",
1545
1495
  "type": {
1546
1496
  "text": "boolean"
1547
1497
  },
1498
+ "privacy": "private",
1548
1499
  "default": "false",
1549
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1550
- "attribute": "iconOnly",
1551
- "reflects": true
1552
- },
1553
- {
1554
- "kind": "field",
1555
- "name": "colors",
1556
- "type": {
1557
- "text": "string"
1558
- },
1559
- "default": "\"\"",
1560
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1561
- "attribute": "colors"
1562
- },
1563
- {
1564
- "kind": "field",
1565
- "name": "animation",
1566
- "type": {
1567
- "text": "SkyButtonAnimation"
1568
- },
1569
- "default": "\"auto\"",
1570
- "description": "Transform animation style. Default: `\"auto\"`.",
1571
- "attribute": "animation",
1572
- "reflects": true
1500
+ "description": "True when the actions slot has assigned content (used to show separator only when needed)."
1573
1501
  },
1574
1502
  {
1575
1503
  "kind": "field",
@@ -1582,91 +1510,11 @@
1582
1510
  "attribute": "preset",
1583
1511
  "reflects": true
1584
1512
  },
1585
- {
1586
- "kind": "field",
1587
- "name": "_hasMeaningfulSlot",
1588
- "type": {
1589
- "text": "boolean"
1590
- },
1591
- "privacy": "private",
1592
- "default": "false"
1593
- },
1594
- {
1595
- "kind": "field",
1596
- "name": "_styleVars",
1597
- "type": {
1598
- "text": "Record<string, string>"
1599
- },
1600
- "privacy": "private",
1601
- "default": "{}",
1602
- "description": "Inline CSS variable cache."
1603
- },
1604
1513
  {
1605
1514
  "kind": "field",
1606
1515
  "name": "_presets",
1607
1516
  "privacy": "private",
1608
- "default": "new PresetController(this, { isPaused: () => this.inGroup, onChange: () => { this._styleDirty = true; }, })"
1609
- },
1610
- {
1611
- "kind": "field",
1612
- "name": "_lastPresetRevision",
1613
- "type": {
1614
- "text": "number"
1615
- },
1616
- "privacy": "private",
1617
- "default": "-1"
1618
- },
1619
- {
1620
- "kind": "field",
1621
- "name": "_styleDirty",
1622
- "type": {
1623
- "text": "boolean"
1624
- },
1625
- "privacy": "private",
1626
- "default": "true",
1627
- "description": "Set when presets change so `update()` rebuilds CSS vars after hostUpdate."
1628
- },
1629
- {
1630
- "kind": "method",
1631
- "name": "_slotHasMeaningfulContent",
1632
- "privacy": "private",
1633
- "return": {
1634
- "type": {
1635
- "text": "boolean"
1636
- }
1637
- },
1638
- "parameters": [
1639
- {
1640
- "name": "slotEl",
1641
- "type": {
1642
- "text": "HTMLSlotElement"
1643
- }
1644
- }
1645
- ]
1646
- },
1647
- {
1648
- "kind": "field",
1649
- "name": "_onSlotChange",
1650
- "privacy": "private"
1651
- },
1652
- {
1653
- "kind": "method",
1654
- "name": "_toSquarePadding",
1655
- "privacy": "private",
1656
- "return": {
1657
- "type": {
1658
- "text": "string"
1659
- }
1660
- },
1661
- "parameters": [
1662
- {
1663
- "name": "padding",
1664
- "type": {
1665
- "text": "string"
1666
- }
1667
- }
1668
- ],
1669
- "description": "Uses vertical padding for equal sides (icon-only square control)."
1517
+ "default": "new PresetController(this)"
1670
1518
  },
1671
1519
  {
1672
1520
  "kind": "method",
@@ -1674,7 +1522,7 @@
1674
1522
  "privacy": "private",
1675
1523
  "return": {
1676
1524
  "type": {
1677
- "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1525
+ "text": "SkyAlertResolvedSize"
1678
1526
  }
1679
1527
  },
1680
1528
  "parameters": [
@@ -1684,107 +1532,66 @@
1684
1532
  "text": "string"
1685
1533
  }
1686
1534
  }
1687
- ]
1688
- },
1689
- {
1690
- "kind": "method",
1691
- "name": "_isThemeBorderShorthand",
1692
- "privacy": "private",
1693
- "return": {
1694
- "type": {
1695
- "text": "boolean"
1696
- }
1697
- },
1698
- "parameters": [
1699
- {
1700
- "name": "border",
1701
- "type": {
1702
- "text": "string | undefined"
1703
- }
1704
- }
1705
1535
  ],
1706
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1536
+ "description": "Resolves size to get padding, font sizes, and other metrics.\r\nResult is memoized by `size` to avoid recomputing when only color/variant/radius change."
1707
1537
  },
1708
1538
  {
1709
- "kind": "method",
1710
- "name": "_borderColorFromShorthand",
1711
- "privacy": "private",
1712
- "return": {
1713
- "type": {
1714
- "text": "string"
1715
- }
1539
+ "kind": "field",
1540
+ "name": "_lastPresetRevision",
1541
+ "type": {
1542
+ "text": "number"
1716
1543
  },
1717
- "parameters": [
1718
- {
1719
- "name": "border",
1720
- "type": {
1721
- "text": "string | undefined"
1722
- }
1723
- }
1724
- ],
1725
- "description": "Extracts the color token from a `Npx solid …` border shorthand."
1544
+ "privacy": "private",
1545
+ "default": "-1"
1726
1546
  },
1727
1547
  {
1728
1548
  "kind": "method",
1729
- "name": "_rebuildStyleVars",
1549
+ "name": "_updateStyleVars",
1730
1550
  "privacy": "private",
1731
1551
  "return": {
1732
1552
  "type": {
1733
1553
  "text": "void"
1734
1554
  }
1735
1555
  },
1736
- "parameters": [
1737
- {
1738
- "name": "changedProperties",
1739
- "type": {
1740
- "text": "Map<string, unknown>"
1741
- }
1742
- }
1743
- ]
1556
+ "description": "Computes CSS custom properties from current variant, size, and color inputs."
1744
1557
  },
1745
1558
  {
1746
1559
  "kind": "method",
1747
- "name": "focusButton",
1560
+ "name": "close",
1748
1561
  "privacy": "public",
1749
1562
  "return": {
1750
1563
  "type": {
1751
1564
  "text": "void"
1752
1565
  }
1753
1566
  },
1754
- "description": "Focuses the internal native button."
1567
+ "description": "Dispatches `alert-closed` and removes the alert from the DOM."
1755
1568
  },
1756
1569
  {
1757
1570
  "kind": "method",
1758
- "name": "clickButton",
1759
- "privacy": "public",
1571
+ "name": "getAriaRole",
1572
+ "privacy": "private",
1760
1573
  "return": {
1761
1574
  "type": {
1762
- "text": "void"
1575
+ "text": "SkyAlertRoleType"
1763
1576
  }
1764
1577
  },
1765
- "description": "Triggers a click on the internal native button when enabled."
1578
+ "description": "Returns the ARIA role applied to the alert container."
1766
1579
  },
1767
1580
  {
1768
1581
  "kind": "method",
1769
- "name": "_createRipple",
1582
+ "name": "_checkActionsSlot",
1770
1583
  "privacy": "private",
1771
1584
  "return": {
1772
1585
  "type": {
1773
1586
  "text": "void"
1774
1587
  }
1775
1588
  },
1776
- "parameters": [
1777
- {
1778
- "name": "event",
1779
- "type": {
1780
- "text": "MouseEvent"
1781
- }
1782
- }
1783
- ]
1589
+ "description": "Checks whether the actions slot currently has meaningful assigned content."
1784
1590
  },
1785
1591
  {
1786
1592
  "kind": "method",
1787
- "name": "formDisabledCallback",
1593
+ "name": "_onActionsSlotChange",
1594
+ "privacy": "private",
1788
1595
  "return": {
1789
1596
  "type": {
1790
1597
  "text": "void"
@@ -1792,86 +1599,60 @@
1792
1599
  },
1793
1600
  "parameters": [
1794
1601
  {
1795
- "name": "disabled",
1602
+ "name": "e",
1796
1603
  "type": {
1797
- "text": "boolean"
1604
+ "text": "Event"
1798
1605
  }
1799
1606
  }
1800
- ]
1801
- },
1607
+ ],
1608
+ "description": "Updates action-slot state when the slot assignment changes."
1609
+ }
1610
+ ],
1611
+ "events": [
1802
1612
  {
1803
- "kind": "field",
1804
- "name": "formOwner",
1805
1613
  "type": {
1806
- "text": "HTMLFormElement | null"
1807
- },
1808
- "readonly": true
1809
- },
1810
- {
1811
- "kind": "method",
1812
- "name": "_handleClick",
1813
- "privacy": "private",
1814
- "return": {
1815
- "type": {
1816
- "text": "void"
1817
- }
1614
+ "text": "CustomEvent<SkyAlertClosedEventDetail>"
1818
1615
  },
1819
- "parameters": [
1820
- {
1821
- "name": "event",
1822
- "type": {
1823
- "text": "MouseEvent"
1824
- }
1825
- }
1826
- ]
1827
- },
1828
- {
1829
- "kind": "method",
1830
- "name": "_iconOnlyName",
1831
- "privacy": "private",
1832
- "return": {
1833
- "type": {
1834
- "text": "string"
1835
- }
1836
- }
1616
+ "description": "Fired when the alert is dismissed via the close button; bubbles and is composed.",
1617
+ "name": "alert-closed"
1837
1618
  }
1838
1619
  ],
1839
1620
  "attributes": [
1840
1621
  {
1841
- "name": "variant",
1622
+ "name": "title",
1842
1623
  "type": {
1843
- "text": "SkyButtonVariant"
1624
+ "text": "string"
1844
1625
  },
1845
- "default": "\"solid\"",
1846
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1847
- "fieldName": "variant"
1626
+ "default": "\"\"",
1627
+ "description": "Title text shown above the message.",
1628
+ "fieldName": "title"
1848
1629
  },
1849
1630
  {
1850
- "name": "color",
1631
+ "name": "message",
1851
1632
  "type": {
1852
1633
  "text": "string"
1853
1634
  },
1854
- "default": "\"primary\"",
1855
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1856
- "fieldName": "color"
1635
+ "default": "\"\"",
1636
+ "description": "Message text rendered inside the alert.",
1637
+ "fieldName": "message"
1857
1638
  },
1858
1639
  {
1859
- "name": "type",
1640
+ "name": "removable",
1860
1641
  "type": {
1861
- "text": "SkyButtonType"
1642
+ "text": "boolean"
1862
1643
  },
1863
- "default": "\"button\"",
1864
- "description": "Button type attribute. Default: `\"button\"`.",
1865
- "fieldName": "type"
1644
+ "default": "false",
1645
+ "description": "Shows a dismiss button when enabled.",
1646
+ "fieldName": "removable"
1866
1647
  },
1867
1648
  {
1868
- "name": "form",
1649
+ "name": "color",
1869
1650
  "type": {
1870
1651
  "text": "string"
1871
1652
  },
1872
- "default": "\"\"",
1873
- "description": "Associated form ID for custom submit handling.",
1874
- "fieldName": "form"
1653
+ "default": "\"primary\"",
1654
+ "description": "Base color token or CSS color used by the alert.",
1655
+ "fieldName": "color"
1875
1656
  },
1876
1657
  {
1877
1658
  "name": "size",
@@ -1879,7 +1660,7 @@
1879
1660
  "text": "string"
1880
1661
  },
1881
1662
  "default": "\"md\"",
1882
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1663
+ "description": "Preset size token (`xs | sm | md | lg | xl`) or CSS length.",
1883
1664
  "fieldName": "size"
1884
1665
  },
1885
1666
  {
@@ -1888,80 +1669,62 @@
1888
1669
  "text": "string"
1889
1670
  },
1890
1671
  "default": "\"md\"",
1891
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1672
+ "description": "Radius token or CSS length.",
1892
1673
  "fieldName": "radius"
1893
1674
  },
1894
1675
  {
1895
- "name": "label",
1896
- "type": {
1897
- "text": "string"
1898
- },
1899
- "default": "\"Button\"",
1900
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1901
- "fieldName": "label"
1902
- },
1903
- {
1904
- "name": "disabled",
1676
+ "name": "icon",
1905
1677
  "type": {
1906
- "text": "boolean"
1678
+ "text": "string | null"
1907
1679
  },
1908
- "default": "false",
1909
- "description": "Whether the button is disabled. Default: `false`.",
1910
- "fieldName": "disabled"
1680
+ "default": "null",
1681
+ "description": "Optional leading icon name for `<sky-icon>`.",
1682
+ "fieldName": "icon"
1911
1683
  },
1912
1684
  {
1913
- "name": "loading",
1685
+ "name": "strip",
1914
1686
  "type": {
1915
- "text": "boolean"
1687
+ "text": "SkyAlertStrip"
1916
1688
  },
1917
- "default": "false",
1918
- "description": "Shows a loading overlay when true. Default: `false`.",
1919
- "fieldName": "loading"
1689
+ "default": "\"none\"",
1690
+ "description": "Strip accent placement.",
1691
+ "fieldName": "strip"
1920
1692
  },
1921
1693
  {
1922
- "name": "iconL",
1694
+ "name": "stripColor",
1923
1695
  "type": {
1924
1696
  "text": "string"
1925
1697
  },
1926
- "default": "\"\"",
1927
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1928
- "fieldName": "iconL"
1698
+ "default": "\"currentColor\"",
1699
+ "description": "Strip accent color token or CSS color.",
1700
+ "fieldName": "stripColor"
1929
1701
  },
1930
1702
  {
1931
- "name": "iconR",
1703
+ "name": "variant",
1932
1704
  "type": {
1933
- "text": "string"
1705
+ "text": "SkyAlertVariant"
1934
1706
  },
1935
- "default": "\"\"",
1936
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1937
- "fieldName": "iconR"
1707
+ "default": "\"solid\"",
1708
+ "description": "Visual style variant.",
1709
+ "fieldName": "variant"
1938
1710
  },
1939
1711
  {
1940
- "name": "iconOnly",
1712
+ "name": "loading",
1941
1713
  "type": {
1942
1714
  "text": "boolean"
1943
1715
  },
1944
1716
  "default": "false",
1945
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1946
- "fieldName": "iconOnly"
1947
- },
1948
- {
1949
- "name": "colors",
1950
- "type": {
1951
- "text": "string"
1952
- },
1953
- "default": "\"\"",
1954
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1955
- "fieldName": "colors"
1717
+ "description": "Shows a loading overlay.",
1718
+ "fieldName": "loading"
1956
1719
  },
1957
1720
  {
1958
- "name": "animation",
1721
+ "name": "roleType",
1959
1722
  "type": {
1960
- "text": "SkyButtonAnimation"
1723
+ "text": "SkyAlertRoleType"
1961
1724
  },
1962
- "default": "\"auto\"",
1963
- "description": "Transform animation style. Default: `\"auto\"`.",
1964
- "fieldName": "animation"
1725
+ "default": "\"alert\"",
1726
+ "description": "ARIA role for the alert container.",
1727
+ "fieldName": "roleType"
1965
1728
  },
1966
1729
  {
1967
1730
  "name": "preset",
@@ -1977,192 +1740,233 @@
1977
1740
  "name": "LitElement",
1978
1741
  "package": "lit"
1979
1742
  },
1980
- "tagName": "sky-button",
1743
+ "tagName": "sky-alert",
1981
1744
  "customElement": true,
1982
- "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1745
+ "summary": "Status alert banner with variants, optional icon, strip accents, actions, dismiss behavior, and loading state."
1983
1746
  }
1984
1747
  ],
1985
1748
  "exports": [
1986
1749
  {
1987
1750
  "kind": "js",
1988
- "name": "SkyButton",
1751
+ "name": "SkyAlert",
1989
1752
  "declaration": {
1990
- "name": "SkyButton",
1991
- "module": "src/sky-button/sky-button.ts"
1753
+ "name": "SkyAlert",
1754
+ "module": "src/sky-alert/sky-alert.ts"
1992
1755
  }
1993
1756
  },
1994
1757
  {
1995
1758
  "kind": "custom-element-definition",
1996
- "name": "sky-button",
1759
+ "name": "sky-alert",
1997
1760
  "declaration": {
1998
- "name": "SkyButton",
1999
- "module": "src/sky-button/sky-button.ts"
1761
+ "name": "SkyAlert",
1762
+ "module": "src/sky-alert/sky-alert.ts"
2000
1763
  }
2001
1764
  }
2002
1765
  ]
2003
1766
  },
2004
1767
  {
2005
1768
  "kind": "javascript-module",
2006
- "path": "src/sky-avatar/sky-avatar.ts",
1769
+ "path": "src/sky-button/sky-button.ts",
2007
1770
  "declarations": [
2008
1771
  {
2009
1772
  "kind": "class",
2010
1773
  "description": "",
2011
- "name": "SkyAvatar",
1774
+ "name": "SkyButton",
2012
1775
  "cssParts": [
2013
1776
  {
2014
- "description": "The avatar container element.",
2015
- "name": "avatar"
1777
+ "description": "The native `<button>` element.",
1778
+ "name": "button"
2016
1779
  },
2017
1780
  {
2018
- "description": "The loading overlay container (shown when `loading` is true).",
1781
+ "description": "The optional left/right icons.",
1782
+ "name": "icon"
1783
+ },
1784
+ {
1785
+ "description": "Overlay displayed when loading.",
2019
1786
  "name": "loading-overlay"
2020
1787
  },
2021
1788
  {
2022
- "description": "The spinner element shown when loading.",
1789
+ "description": "Spinner displayed when loading.",
2023
1790
  "name": "spinner"
2024
1791
  }
2025
1792
  ],
2026
1793
  "slots": [
2027
1794
  {
2028
- "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
1795
+ "description": "Default slot for the button label (replaces `label` property if used).",
2029
1796
  "name": ""
2030
1797
  }
2031
1798
  ],
2032
1799
  "members": [
2033
1800
  {
2034
1801
  "kind": "field",
2035
- "name": "size",
1802
+ "name": "dependencies",
2036
1803
  "type": {
2037
- "text": "string"
1804
+ "text": "Record<string, CustomElementConstructor>"
2038
1805
  },
2039
- "default": "\"50px\"",
2040
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
2041
- "attribute": "size"
1806
+ "static": true,
1807
+ "default": "{ \"sky-icon\": SkyIcon, }"
2042
1808
  },
2043
1809
  {
2044
1810
  "kind": "field",
2045
- "name": "image",
1811
+ "name": "formAssociated",
2046
1812
  "type": {
2047
- "text": "string"
1813
+ "text": "boolean"
2048
1814
  },
2049
- "default": "\"\"",
2050
- "description": "Image URL; fallback slot is shown on load error.",
2051
- "attribute": "image"
1815
+ "static": true,
1816
+ "default": "true"
2052
1817
  },
2053
1818
  {
2054
1819
  "kind": "field",
2055
- "name": "fit",
1820
+ "name": "internals",
2056
1821
  "type": {
2057
- "text": "SkyAvatarFit"
1822
+ "text": "ElementInternals"
2058
1823
  },
2059
- "default": "\"cover\"",
2060
- "description": "Image fill mode: `cover` (default) or `contain`.",
2061
- "attribute": "fit",
1824
+ "privacy": "private"
1825
+ },
1826
+ {
1827
+ "kind": "field",
1828
+ "name": "variant",
1829
+ "type": {
1830
+ "text": "SkyButtonVariant"
1831
+ },
1832
+ "default": "\"solid\"",
1833
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1834
+ "attribute": "variant",
2062
1835
  "reflects": true
2063
1836
  },
2064
1837
  {
2065
1838
  "kind": "field",
2066
- "name": "radius",
1839
+ "name": "color",
2067
1840
  "type": {
2068
1841
  "text": "string"
2069
1842
  },
2070
- "default": "\"md\"",
2071
- "description": "Border radius token or CSS value.",
2072
- "attribute": "radius"
1843
+ "default": "\"primary\"",
1844
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1845
+ "attribute": "color"
2073
1846
  },
2074
1847
  {
2075
1848
  "kind": "field",
2076
- "name": "alt",
1849
+ "name": "type",
1850
+ "type": {
1851
+ "text": "SkyButtonType"
1852
+ },
1853
+ "default": "\"button\"",
1854
+ "description": "Button type attribute. Default: `\"button\"`.",
1855
+ "attribute": "type"
1856
+ },
1857
+ {
1858
+ "kind": "field",
1859
+ "name": "form",
2077
1860
  "type": {
2078
1861
  "text": "string"
2079
1862
  },
2080
1863
  "default": "\"\"",
2081
- "description": "Accessible name when image content conveys meaning.",
2082
- "attribute": "alt"
1864
+ "description": "Associated form ID for custom submit handling.",
1865
+ "attribute": "form"
2083
1866
  },
2084
1867
  {
2085
1868
  "kind": "field",
2086
- "name": "color",
1869
+ "name": "size",
2087
1870
  "type": {
2088
1871
  "text": "string"
2089
1872
  },
2090
- "default": "\"dark\"",
2091
- "description": "Token or CSS color applied to fallback slot content.",
2092
- "attribute": "color"
1873
+ "default": "\"md\"",
1874
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1875
+ "attribute": "size"
2093
1876
  },
2094
1877
  {
2095
1878
  "kind": "field",
2096
- "name": "outline",
1879
+ "name": "radius",
2097
1880
  "type": {
2098
1881
  "text": "string"
2099
1882
  },
2100
- "default": "\"\"",
2101
- "description": "CSS `outline` value.",
2102
- "attribute": "outline"
1883
+ "default": "\"md\"",
1884
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1885
+ "attribute": "radius"
2103
1886
  },
2104
1887
  {
2105
1888
  "kind": "field",
2106
- "name": "outlineOffset",
1889
+ "name": "label",
2107
1890
  "type": {
2108
1891
  "text": "string"
2109
1892
  },
2110
- "default": "\"2px\"",
2111
- "description": "CSS `outline-offset` value.",
2112
- "attribute": "outlineOffset"
1893
+ "default": "\"Button\"",
1894
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1895
+ "attribute": "label"
2113
1896
  },
2114
1897
  {
2115
1898
  "kind": "field",
2116
- "name": "loading",
1899
+ "name": "disabled",
2117
1900
  "type": {
2118
1901
  "text": "boolean"
2119
1902
  },
2120
1903
  "default": "false",
2121
- "description": "Shows loading overlay when true.",
2122
- "attribute": "loading",
1904
+ "description": "Whether the button is disabled. Default: `false`.",
1905
+ "attribute": "disabled",
2123
1906
  "reflects": true
2124
1907
  },
2125
1908
  {
2126
1909
  "kind": "field",
2127
- "name": "disabled",
1910
+ "name": "loading",
2128
1911
  "type": {
2129
1912
  "text": "boolean"
2130
1913
  },
2131
1914
  "default": "false",
2132
- "description": "Dims and disables pointer interactions.",
2133
- "attribute": "disabled",
1915
+ "description": "Shows a loading overlay when true. Default: `false`.",
1916
+ "attribute": "loading",
2134
1917
  "reflects": true
2135
1918
  },
2136
1919
  {
2137
1920
  "kind": "field",
2138
- "name": "interactive",
1921
+ "name": "iconL",
2139
1922
  "type": {
2140
- "text": "boolean"
1923
+ "text": "string"
2141
1924
  },
2142
- "default": "false",
2143
- "description": "Enables interactive behavior with keyboard/click activation.",
2144
- "attribute": "interactive"
1925
+ "default": "\"\"",
1926
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1927
+ "attribute": "iconL"
2145
1928
  },
2146
1929
  {
2147
1930
  "kind": "field",
2148
- "name": "shadow",
1931
+ "name": "iconR",
1932
+ "type": {
1933
+ "text": "string"
1934
+ },
1935
+ "default": "\"\"",
1936
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1937
+ "attribute": "iconR"
1938
+ },
1939
+ {
1940
+ "kind": "field",
1941
+ "name": "iconOnly",
2149
1942
  "type": {
2150
1943
  "text": "boolean"
2151
1944
  },
2152
1945
  "default": "false",
2153
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2154
- "attribute": "shadow",
1946
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1947
+ "attribute": "iconOnly",
2155
1948
  "reflects": true
2156
1949
  },
2157
1950
  {
2158
1951
  "kind": "field",
2159
- "name": "_imageError",
1952
+ "name": "colors",
2160
1953
  "type": {
2161
- "text": "boolean"
1954
+ "text": "string"
2162
1955
  },
2163
- "privacy": "private",
2164
- "default": "false",
2165
- "description": "True when image failed to load; show slot instead."
1956
+ "default": "\"\"",
1957
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1958
+ "attribute": "colors"
1959
+ },
1960
+ {
1961
+ "kind": "field",
1962
+ "name": "animation",
1963
+ "type": {
1964
+ "text": "SkyButtonAnimation"
1965
+ },
1966
+ "default": "\"auto\"",
1967
+ "description": "Transform animation style. Default: `\"auto\"`.",
1968
+ "attribute": "animation",
1969
+ "reflects": true
2166
1970
  },
2167
1971
  {
2168
1972
  "kind": "field",
@@ -2175,27 +1979,191 @@
2175
1979
  "attribute": "preset",
2176
1980
  "reflects": true
2177
1981
  },
1982
+ {
1983
+ "kind": "field",
1984
+ "name": "_hasMeaningfulSlot",
1985
+ "type": {
1986
+ "text": "boolean"
1987
+ },
1988
+ "privacy": "private",
1989
+ "default": "false"
1990
+ },
1991
+ {
1992
+ "kind": "field",
1993
+ "name": "_styleVars",
1994
+ "type": {
1995
+ "text": "Record<string, string>"
1996
+ },
1997
+ "privacy": "private",
1998
+ "default": "{}",
1999
+ "description": "Inline CSS variable cache."
2000
+ },
2178
2001
  {
2179
2002
  "kind": "field",
2180
2003
  "name": "_presets",
2181
2004
  "privacy": "private",
2182
- "default": "new PresetController(this)"
2005
+ "default": "new PresetController(this, { isPaused: () => this.inGroup, onChange: () => { this._styleDirty = true; }, })"
2183
2006
  },
2184
2007
  {
2185
2008
  "kind": "field",
2186
- "name": "_onImageLoad",
2009
+ "name": "_lastPresetRevision",
2010
+ "type": {
2011
+ "text": "number"
2012
+ },
2187
2013
  "privacy": "private",
2188
- "description": "Marks image load success and keeps image rendering active."
2014
+ "default": "-1"
2015
+ },
2016
+ {
2017
+ "kind": "field",
2018
+ "name": "_styleDirty",
2019
+ "type": {
2020
+ "text": "boolean"
2021
+ },
2022
+ "privacy": "private",
2023
+ "default": "true",
2024
+ "description": "Set when presets change so `update()` rebuilds CSS vars after hostUpdate."
2025
+ },
2026
+ {
2027
+ "kind": "method",
2028
+ "name": "_slotHasMeaningfulContent",
2029
+ "privacy": "private",
2030
+ "return": {
2031
+ "type": {
2032
+ "text": "boolean"
2033
+ }
2034
+ },
2035
+ "parameters": [
2036
+ {
2037
+ "name": "slotEl",
2038
+ "type": {
2039
+ "text": "HTMLSlotElement"
2040
+ }
2041
+ }
2042
+ ]
2043
+ },
2044
+ {
2045
+ "kind": "field",
2046
+ "name": "_onSlotChange",
2047
+ "privacy": "private"
2048
+ },
2049
+ {
2050
+ "kind": "method",
2051
+ "name": "_toSquarePadding",
2052
+ "privacy": "private",
2053
+ "return": {
2054
+ "type": {
2055
+ "text": "string"
2056
+ }
2057
+ },
2058
+ "parameters": [
2059
+ {
2060
+ "name": "padding",
2061
+ "type": {
2062
+ "text": "string"
2063
+ }
2064
+ }
2065
+ ],
2066
+ "description": "Uses vertical padding for equal sides (icon-only square control)."
2067
+ },
2068
+ {
2069
+ "kind": "method",
2070
+ "name": "_resolveSize",
2071
+ "privacy": "private",
2072
+ "return": {
2073
+ "type": {
2074
+ "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
2075
+ }
2076
+ },
2077
+ "parameters": [
2078
+ {
2079
+ "name": "input",
2080
+ "type": {
2081
+ "text": "string"
2082
+ }
2083
+ }
2084
+ ]
2085
+ },
2086
+ {
2087
+ "kind": "method",
2088
+ "name": "_isThemeBorderShorthand",
2089
+ "privacy": "private",
2090
+ "return": {
2091
+ "type": {
2092
+ "text": "boolean"
2093
+ }
2094
+ },
2095
+ "parameters": [
2096
+ {
2097
+ "name": "border",
2098
+ "type": {
2099
+ "text": "string | undefined"
2100
+ }
2101
+ }
2102
+ ],
2103
+ "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
2104
+ },
2105
+ {
2106
+ "kind": "method",
2107
+ "name": "_borderColorFromShorthand",
2108
+ "privacy": "private",
2109
+ "return": {
2110
+ "type": {
2111
+ "text": "string"
2112
+ }
2113
+ },
2114
+ "parameters": [
2115
+ {
2116
+ "name": "border",
2117
+ "type": {
2118
+ "text": "string | undefined"
2119
+ }
2120
+ }
2121
+ ],
2122
+ "description": "Extracts the color token from a `Npx solid …` border shorthand."
2123
+ },
2124
+ {
2125
+ "kind": "method",
2126
+ "name": "_rebuildStyleVars",
2127
+ "privacy": "private",
2128
+ "return": {
2129
+ "type": {
2130
+ "text": "void"
2131
+ }
2132
+ },
2133
+ "parameters": [
2134
+ {
2135
+ "name": "changedProperties",
2136
+ "type": {
2137
+ "text": "Map<string, unknown>"
2138
+ }
2139
+ }
2140
+ ]
2141
+ },
2142
+ {
2143
+ "kind": "method",
2144
+ "name": "focusButton",
2145
+ "privacy": "public",
2146
+ "return": {
2147
+ "type": {
2148
+ "text": "void"
2149
+ }
2150
+ },
2151
+ "description": "Focuses the internal native button."
2189
2152
  },
2190
2153
  {
2191
- "kind": "field",
2192
- "name": "_onImageError",
2193
- "privacy": "private",
2194
- "description": "Marks image load failure and enables fallback slot rendering."
2154
+ "kind": "method",
2155
+ "name": "clickButton",
2156
+ "privacy": "public",
2157
+ "return": {
2158
+ "type": {
2159
+ "text": "void"
2160
+ }
2161
+ },
2162
+ "description": "Triggers a click on the internal native button when enabled."
2195
2163
  },
2196
2164
  {
2197
2165
  "kind": "method",
2198
- "name": "_handleInteractiveClick",
2166
+ "name": "_createRipple",
2199
2167
  "privacy": "private",
2200
2168
  "return": {
2201
2169
  "type": {
@@ -2204,18 +2172,16 @@
2204
2172
  },
2205
2173
  "parameters": [
2206
2174
  {
2207
- "name": "e",
2175
+ "name": "event",
2208
2176
  "type": {
2209
- "text": "Event"
2177
+ "text": "MouseEvent"
2210
2178
  }
2211
2179
  }
2212
- ],
2213
- "description": "Re-dispatches click in interactive mode for host-level consumers."
2180
+ ]
2214
2181
  },
2215
2182
  {
2216
2183
  "kind": "method",
2217
- "name": "_handleInteractiveKeydown",
2218
- "privacy": "private",
2184
+ "name": "formDisabledCallback",
2219
2185
  "return": {
2220
2186
  "type": {
2221
2187
  "text": "void"
@@ -2223,106 +2189,122 @@
2223
2189
  },
2224
2190
  "parameters": [
2225
2191
  {
2226
- "name": "e",
2192
+ "name": "disabled",
2227
2193
  "type": {
2228
- "text": "KeyboardEvent"
2194
+ "text": "boolean"
2229
2195
  }
2230
2196
  }
2231
- ],
2232
- "description": "Handles keyboard activation in interactive mode."
2197
+ ]
2198
+ },
2199
+ {
2200
+ "kind": "field",
2201
+ "name": "formOwner",
2202
+ "type": {
2203
+ "text": "HTMLFormElement | null"
2204
+ },
2205
+ "readonly": true
2233
2206
  },
2234
2207
  {
2235
2208
  "kind": "method",
2236
- "name": "adjustSpinnerSize",
2209
+ "name": "_handleClick",
2237
2210
  "privacy": "private",
2238
2211
  "return": {
2239
2212
  "type": {
2240
2213
  "text": "void"
2241
2214
  }
2242
2215
  },
2243
- "description": "Derives spinner dimensions from current avatar size."
2244
- }
2245
- ],
2246
- "events": [
2216
+ "parameters": [
2217
+ {
2218
+ "name": "event",
2219
+ "type": {
2220
+ "text": "MouseEvent"
2221
+ }
2222
+ }
2223
+ ]
2224
+ },
2247
2225
  {
2248
- "name": "click",
2249
- "type": {
2250
- "text": "Event"
2226
+ "kind": "method",
2227
+ "name": "_iconOnlyName",
2228
+ "privacy": "private",
2229
+ "return": {
2230
+ "type": {
2231
+ "text": "string"
2232
+ }
2251
2233
  }
2252
2234
  }
2253
2235
  ],
2254
2236
  "attributes": [
2255
2237
  {
2256
- "name": "size",
2238
+ "name": "variant",
2257
2239
  "type": {
2258
- "text": "string"
2240
+ "text": "SkyButtonVariant"
2259
2241
  },
2260
- "default": "\"50px\"",
2261
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
2262
- "fieldName": "size"
2242
+ "default": "\"solid\"",
2243
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
2244
+ "fieldName": "variant"
2263
2245
  },
2264
2246
  {
2265
- "name": "image",
2247
+ "name": "color",
2266
2248
  "type": {
2267
2249
  "text": "string"
2268
2250
  },
2269
- "default": "\"\"",
2270
- "description": "Image URL; fallback slot is shown on load error.",
2271
- "fieldName": "image"
2251
+ "default": "\"primary\"",
2252
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
2253
+ "fieldName": "color"
2272
2254
  },
2273
2255
  {
2274
- "name": "fit",
2256
+ "name": "type",
2275
2257
  "type": {
2276
- "text": "SkyAvatarFit"
2258
+ "text": "SkyButtonType"
2277
2259
  },
2278
- "default": "\"cover\"",
2279
- "description": "Image fill mode: `cover` (default) or `contain`.",
2280
- "fieldName": "fit"
2260
+ "default": "\"button\"",
2261
+ "description": "Button type attribute. Default: `\"button\"`.",
2262
+ "fieldName": "type"
2281
2263
  },
2282
2264
  {
2283
- "name": "radius",
2265
+ "name": "form",
2284
2266
  "type": {
2285
2267
  "text": "string"
2286
2268
  },
2287
- "default": "\"md\"",
2288
- "description": "Border radius token or CSS value.",
2289
- "fieldName": "radius"
2269
+ "default": "\"\"",
2270
+ "description": "Associated form ID for custom submit handling.",
2271
+ "fieldName": "form"
2290
2272
  },
2291
2273
  {
2292
- "name": "alt",
2274
+ "name": "size",
2293
2275
  "type": {
2294
2276
  "text": "string"
2295
2277
  },
2296
- "default": "\"\"",
2297
- "description": "Accessible name when image content conveys meaning.",
2298
- "fieldName": "alt"
2278
+ "default": "\"md\"",
2279
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
2280
+ "fieldName": "size"
2299
2281
  },
2300
2282
  {
2301
- "name": "color",
2283
+ "name": "radius",
2302
2284
  "type": {
2303
2285
  "text": "string"
2304
2286
  },
2305
- "default": "\"dark\"",
2306
- "description": "Token or CSS color applied to fallback slot content.",
2307
- "fieldName": "color"
2287
+ "default": "\"md\"",
2288
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
2289
+ "fieldName": "radius"
2308
2290
  },
2309
2291
  {
2310
- "name": "outline",
2292
+ "name": "label",
2311
2293
  "type": {
2312
2294
  "text": "string"
2313
2295
  },
2314
- "default": "\"\"",
2315
- "description": "CSS `outline` value.",
2316
- "fieldName": "outline"
2296
+ "default": "\"Button\"",
2297
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
2298
+ "fieldName": "label"
2317
2299
  },
2318
2300
  {
2319
- "name": "outlineOffset",
2301
+ "name": "disabled",
2320
2302
  "type": {
2321
- "text": "string"
2303
+ "text": "boolean"
2322
2304
  },
2323
- "default": "\"2px\"",
2324
- "description": "CSS `outline-offset` value.",
2325
- "fieldName": "outlineOffset"
2305
+ "default": "false",
2306
+ "description": "Whether the button is disabled. Default: `false`.",
2307
+ "fieldName": "disabled"
2326
2308
  },
2327
2309
  {
2328
2310
  "name": "loading",
@@ -2330,35 +2312,53 @@
2330
2312
  "text": "boolean"
2331
2313
  },
2332
2314
  "default": "false",
2333
- "description": "Shows loading overlay when true.",
2315
+ "description": "Shows a loading overlay when true. Default: `false`.",
2334
2316
  "fieldName": "loading"
2335
2317
  },
2336
2318
  {
2337
- "name": "disabled",
2319
+ "name": "iconL",
2338
2320
  "type": {
2339
- "text": "boolean"
2321
+ "text": "string"
2340
2322
  },
2341
- "default": "false",
2342
- "description": "Dims and disables pointer interactions.",
2343
- "fieldName": "disabled"
2323
+ "default": "\"\"",
2324
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
2325
+ "fieldName": "iconL"
2344
2326
  },
2345
2327
  {
2346
- "name": "interactive",
2328
+ "name": "iconR",
2347
2329
  "type": {
2348
- "text": "boolean"
2330
+ "text": "string"
2349
2331
  },
2350
- "default": "false",
2351
- "description": "Enables interactive behavior with keyboard/click activation.",
2352
- "fieldName": "interactive"
2332
+ "default": "\"\"",
2333
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
2334
+ "fieldName": "iconR"
2353
2335
  },
2354
2336
  {
2355
- "name": "shadow",
2337
+ "name": "iconOnly",
2356
2338
  "type": {
2357
2339
  "text": "boolean"
2358
2340
  },
2359
2341
  "default": "false",
2360
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2361
- "fieldName": "shadow"
2342
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
2343
+ "fieldName": "iconOnly"
2344
+ },
2345
+ {
2346
+ "name": "colors",
2347
+ "type": {
2348
+ "text": "string"
2349
+ },
2350
+ "default": "\"\"",
2351
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
2352
+ "fieldName": "colors"
2353
+ },
2354
+ {
2355
+ "name": "animation",
2356
+ "type": {
2357
+ "text": "SkyButtonAnimation"
2358
+ },
2359
+ "default": "\"auto\"",
2360
+ "description": "Transform animation style. Default: `\"auto\"`.",
2361
+ "fieldName": "animation"
2362
2362
  },
2363
2363
  {
2364
2364
  "name": "preset",
@@ -2374,26 +2374,26 @@
2374
2374
  "name": "LitElement",
2375
2375
  "package": "lit"
2376
2376
  },
2377
- "tagName": "sky-avatar",
2377
+ "tagName": "sky-button",
2378
2378
  "customElement": true,
2379
- "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
2379
+ "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
2380
2380
  }
2381
2381
  ],
2382
2382
  "exports": [
2383
2383
  {
2384
2384
  "kind": "js",
2385
- "name": "SkyAvatar",
2385
+ "name": "SkyButton",
2386
2386
  "declaration": {
2387
- "name": "SkyAvatar",
2388
- "module": "src/sky-avatar/sky-avatar.ts"
2387
+ "name": "SkyButton",
2388
+ "module": "src/sky-button/sky-button.ts"
2389
2389
  }
2390
2390
  },
2391
2391
  {
2392
2392
  "kind": "custom-element-definition",
2393
- "name": "sky-avatar",
2393
+ "name": "sky-button",
2394
2394
  "declaration": {
2395
- "name": "SkyAvatar",
2396
- "module": "src/sky-avatar/sky-avatar.ts"
2395
+ "name": "SkyButton",
2396
+ "module": "src/sky-button/sky-button.ts"
2397
2397
  }
2398
2398
  }
2399
2399
  ]
@@ -12077,97 +12077,110 @@
12077
12077
  },
12078
12078
  {
12079
12079
  "kind": "javascript-module",
12080
- "path": "src/sky-radio/sky-radio.ts",
12080
+ "path": "src/sky-list/sky-list.ts",
12081
12081
  "declarations": [
12082
12082
  {
12083
12083
  "kind": "class",
12084
12084
  "description": "",
12085
- "name": "SkyRadio",
12085
+ "name": "SkyList",
12086
12086
  "cssParts": [
12087
12087
  {
12088
- "description": "The circular radio control element.",
12089
- "name": "wrapper"
12090
- },
12091
- {
12092
- "description": "The native hidden radio input element.",
12093
- "name": "input"
12094
- },
12095
- {
12096
- "description": "The text label element.",
12097
- "name": "label"
12088
+ "description": "The main container wrapping slotted list items.",
12089
+ "name": "list-container"
12098
12090
  }
12099
12091
  ],
12100
12092
  "slots": [
12101
12093
  {
12102
- "description": "Content to display instead of the label property.",
12094
+ "description": "Default slot for `<sky-listitem>` children.",
12103
12095
  "name": ""
12104
12096
  }
12105
12097
  ],
12106
12098
  "members": [
12107
12099
  {
12108
12100
  "kind": "field",
12109
- "name": "label",
12101
+ "name": "preset",
12110
12102
  "type": {
12111
12103
  "text": "string"
12112
12104
  },
12113
12105
  "default": "\"\"",
12114
- "description": "Text label displayed beside the control.",
12115
- "attribute": "label"
12106
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12107
+ "attribute": "preset",
12108
+ "reflects": true
12116
12109
  },
12117
12110
  {
12118
12111
  "kind": "field",
12119
- "name": "value",
12112
+ "name": "_presets",
12113
+ "privacy": "private",
12114
+ "default": "new PresetController(this)"
12115
+ },
12116
+ {
12117
+ "kind": "field",
12118
+ "name": "selection",
12120
12119
  "type": {
12121
- "text": "string"
12120
+ "text": "SkyListSelectionMode"
12122
12121
  },
12123
- "default": "\"\"",
12124
- "description": "Option value used for selection and form value.",
12125
- "attribute": "value"
12122
+ "default": "\"none\"",
12123
+ "description": "Selection mode (`none`, `single`, `multiple`).",
12124
+ "attribute": "selection"
12126
12125
  },
12127
12126
  {
12128
12127
  "kind": "field",
12129
- "name": "checked",
12128
+ "name": "_selectedValues",
12130
12129
  "type": {
12131
- "text": "boolean"
12130
+ "text": "string[]"
12132
12131
  },
12133
- "default": "false",
12134
- "description": "Whether this option is selected.",
12135
- "attribute": "checked",
12136
- "reflects": true
12132
+ "privacy": "private",
12133
+ "default": "[]"
12134
+ },
12135
+ {
12136
+ "kind": "field",
12137
+ "name": "selectedValues",
12138
+ "type": {
12139
+ "text": "string[]"
12140
+ },
12141
+ "description": "Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.",
12142
+ "attribute": "selectedValues"
12137
12143
  },
12138
12144
  {
12139
12145
  "kind": "field",
12140
- "name": "color",
12146
+ "name": "items",
12141
12147
  "type": {
12142
- "text": "string"
12148
+ "text": "SkyListitem[]"
12143
12149
  },
12144
- "default": "\"primary\"",
12145
- "description": "Accent color used in checked state.",
12146
- "attribute": "color"
12150
+ "privacy": "private"
12147
12151
  },
12148
12152
  {
12149
12153
  "kind": "field",
12150
- "name": "compact",
12154
+ "name": "currentIndex",
12151
12155
  "type": {
12152
- "text": "boolean"
12156
+ "text": "number"
12153
12157
  },
12154
- "default": "false",
12155
- "description": "Compact control size.",
12156
- "attribute": "compact",
12157
- "reflects": true
12158
+ "privacy": "private",
12159
+ "default": "0"
12158
12160
  },
12159
12161
  {
12160
12162
  "kind": "field",
12161
- "name": "_hasMeaningfulSlot",
12163
+ "name": "_syncingSelectedValues",
12162
12164
  "type": {
12163
12165
  "text": "boolean"
12164
12166
  },
12165
12167
  "privacy": "private",
12166
- "default": "false"
12168
+ "default": "false",
12169
+ "description": "Avoid feedback when syncing selection from the `selectedValues` prop."
12170
+ },
12171
+ {
12172
+ "kind": "field",
12173
+ "name": "_onItemActivate",
12174
+ "privacy": "private"
12175
+ },
12176
+ {
12177
+ "kind": "field",
12178
+ "name": "_onSlotChange",
12179
+ "privacy": "private"
12167
12180
  },
12168
12181
  {
12169
12182
  "kind": "method",
12170
- "name": "syncStyleVars",
12183
+ "name": "syncAriaRole",
12171
12184
  "privacy": "private",
12172
12185
  "return": {
12173
12186
  "type": {
@@ -12177,98 +12190,83 @@
12177
12190
  },
12178
12191
  {
12179
12192
  "kind": "method",
12180
- "name": "check",
12181
- "privacy": "public",
12193
+ "name": "navigableItems",
12194
+ "privacy": "private",
12182
12195
  "return": {
12183
12196
  "type": {
12184
- "text": "void"
12197
+ "text": "SkyListitem[]"
12185
12198
  }
12186
12199
  }
12187
12200
  },
12188
12201
  {
12189
12202
  "kind": "method",
12190
- "name": "focusRadio",
12191
- "privacy": "public",
12203
+ "name": "isNavigableItem",
12204
+ "privacy": "private",
12192
12205
  "return": {
12193
12206
  "type": {
12194
- "text": "void"
12207
+ "text": "boolean"
12195
12208
  }
12196
- }
12197
- },
12198
- {
12199
- "kind": "field",
12200
- "name": "preset",
12201
- "type": {
12202
- "text": "string"
12203
12209
  },
12204
- "default": "\"\"",
12205
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12206
- "attribute": "preset",
12207
- "reflects": true
12210
+ "parameters": [
12211
+ {
12212
+ "name": "item",
12213
+ "type": {
12214
+ "text": "SkyListitem | undefined"
12215
+ }
12216
+ }
12217
+ ]
12208
12218
  },
12209
12219
  {
12210
- "kind": "field",
12211
- "name": "_presets",
12220
+ "kind": "method",
12221
+ "name": "itemIndex",
12212
12222
  "privacy": "private",
12213
- "default": "new PresetController(this)"
12214
- },
12215
- {
12216
- "kind": "field",
12217
- "name": "shadowRootOptions",
12218
- "type": {
12219
- "text": "object"
12223
+ "return": {
12224
+ "type": {
12225
+ "text": "number"
12226
+ }
12220
12227
  },
12221
- "static": true,
12222
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
12228
+ "parameters": [
12229
+ {
12230
+ "name": "item",
12231
+ "type": {
12232
+ "text": "SkyListitem"
12233
+ }
12234
+ }
12235
+ ]
12223
12236
  },
12224
12237
  {
12225
12238
  "kind": "method",
12226
- "name": "_slotHasMeaningfulContent",
12239
+ "name": "onItemActivate",
12227
12240
  "privacy": "private",
12228
12241
  "return": {
12229
12242
  "type": {
12230
- "text": "boolean"
12243
+ "text": "void"
12231
12244
  }
12232
12245
  },
12233
12246
  "parameters": [
12234
12247
  {
12235
- "name": "slotEl",
12248
+ "name": "e",
12236
12249
  "type": {
12237
- "text": "HTMLSlotElement"
12250
+ "text": "CustomEvent"
12238
12251
  }
12239
12252
  }
12240
12253
  ]
12241
12254
  },
12242
- {
12243
- "kind": "field",
12244
- "name": "_onSlotChange",
12245
- "privacy": "private"
12246
- },
12247
- {
12248
- "kind": "field",
12249
- "name": "onNativeChange",
12250
- "privacy": "private"
12251
- },
12252
- {
12253
- "kind": "field",
12254
- "name": "handleKeydown",
12255
- "privacy": "private"
12256
- },
12257
12255
  {
12258
12256
  "kind": "method",
12259
- "name": "getFormValue",
12260
- "privacy": "protected",
12257
+ "name": "_applySelectedValuesFromProp",
12258
+ "privacy": "private",
12261
12259
  "return": {
12262
12260
  "type": {
12263
- "text": "FormState"
12261
+ "text": "void"
12264
12262
  }
12265
12263
  },
12266
- "description": "Get the current value for form submission"
12264
+ "description": "Applies `selectedValues` from the host to child items."
12267
12265
  },
12268
12266
  {
12269
12267
  "kind": "method",
12270
- "name": "setValueFromFormState",
12271
- "privacy": "protected",
12268
+ "name": "onKeydown",
12269
+ "privacy": "private",
12272
12270
  "return": {
12273
12271
  "type": {
12274
12272
  "text": "void"
@@ -12276,51 +12274,45 @@
12276
12274
  },
12277
12275
  "parameters": [
12278
12276
  {
12279
- "name": "state",
12277
+ "name": "e",
12280
12278
  "type": {
12281
- "text": "FormState"
12279
+ "text": "KeyboardEvent"
12282
12280
  }
12283
12281
  }
12284
- ],
12285
- "description": "Set value from form state (e.g., form reset)"
12282
+ ]
12286
12283
  },
12287
12284
  {
12288
12285
  "kind": "method",
12289
- "name": "getValidityAnchor",
12290
- "privacy": "protected",
12286
+ "name": "focusStep",
12287
+ "privacy": "private",
12291
12288
  "return": {
12292
12289
  "type": {
12293
- "text": "HTMLElement | undefined"
12290
+ "text": "void"
12294
12291
  }
12295
12292
  },
12296
- "description": "Get the validity anchor (the hidden input)"
12297
- },
12298
- {
12299
- "kind": "method",
12300
- "name": "isEmpty",
12301
- "privacy": "protected",
12302
- "return": {
12303
- "type": {
12304
- "text": "boolean"
12293
+ "parameters": [
12294
+ {
12295
+ "name": "delta",
12296
+ "type": {
12297
+ "text": "number"
12298
+ }
12305
12299
  }
12306
- },
12307
- "description": "Check if empty (for required validation)"
12300
+ ]
12308
12301
  },
12309
12302
  {
12310
12303
  "kind": "method",
12311
- "name": "getNativeControl",
12312
- "privacy": "protected",
12304
+ "name": "_focusFirstNavigable",
12305
+ "privacy": "private",
12313
12306
  "return": {
12314
12307
  "type": {
12315
- "text": "HTMLElement | null"
12308
+ "text": "void"
12316
12309
  }
12317
- },
12318
- "description": "Get the native control (hidden radio input)"
12310
+ }
12319
12311
  },
12320
12312
  {
12321
12313
  "kind": "method",
12322
- "name": "onNativeValueMutated",
12323
- "privacy": "protected",
12314
+ "name": "focusItem",
12315
+ "privacy": "private",
12324
12316
  "return": {
12325
12317
  "type": {
12326
12318
  "text": "void"
@@ -12328,302 +12320,200 @@
12328
12320
  },
12329
12321
  "parameters": [
12330
12322
  {
12331
- "name": "_native",
12323
+ "name": "index",
12332
12324
  "type": {
12333
- "text": "any"
12325
+ "text": "number"
12334
12326
  }
12335
12327
  }
12336
- ],
12337
- "description": "Handle native value mutation"
12328
+ ]
12338
12329
  },
12339
12330
  {
12340
12331
  "kind": "method",
12341
- "name": "getCustomErrorMessage",
12342
- "privacy": "protected",
12332
+ "name": "focusListItem",
12333
+ "privacy": "public",
12343
12334
  "return": {
12344
12335
  "type": {
12345
- "text": "string"
12336
+ "text": "void"
12346
12337
  }
12347
12338
  },
12348
- "description": "Override to provide custom error messages"
12349
- },
12350
- {
12351
- "kind": "field",
12352
- "name": "validationErrors",
12353
- "type": {
12354
- "text": "string[]"
12355
- },
12356
- "description": "Get current validation errors",
12357
- "readonly": true
12358
- },
12359
- {
12360
- "type": {
12361
- "text": "string"
12362
- },
12363
- "description": "Radio name used for same-name exclusivity.",
12364
- "name": "name",
12365
- "kind": "field"
12366
- },
12367
- {
12368
- "type": {
12369
- "text": "boolean"
12370
- },
12371
- "description": "Disables user interaction.",
12372
- "name": "disabled",
12373
- "kind": "field"
12374
- },
12375
- {
12376
- "type": {
12377
- "text": "boolean"
12378
- },
12379
- "description": "Prevents selection changes while still allowing focus.",
12380
- "name": "readonly",
12381
- "kind": "field"
12382
- },
12383
- {
12384
- "type": {
12385
- "text": "boolean"
12386
- },
12387
- "description": "Enables required validation for standalone usage.",
12388
- "name": "required",
12389
- "kind": "field"
12390
- },
12391
- {
12392
- "type": {
12393
- "text": "string"
12394
- },
12395
- "description": "Error message for required validation failures.",
12396
- "name": "requiredMessage",
12397
- "kind": "field"
12398
- }
12399
- ],
12400
- "events": [
12401
- {
12402
- "type": {
12403
- "text": "CustomEvent<SkyRadioSelectDetail>"
12404
- },
12405
- "description": "Fired when the option becomes selected.",
12406
- "name": "radio-select"
12407
- },
12408
- {
12409
- "type": {
12410
- "text": "Event"
12411
- },
12412
- "description": "Native change event for form compatibility.",
12413
- "name": "change"
12414
- },
12415
- {
12416
- "type": {
12417
- "text": "Event"
12418
- },
12419
- "description": "Native input event for form compatibility.",
12420
- "name": "input"
12339
+ "parameters": [
12340
+ {
12341
+ "name": "index",
12342
+ "type": {
12343
+ "text": "number"
12344
+ }
12345
+ }
12346
+ ]
12421
12347
  },
12422
12348
  {
12423
- "type": {
12424
- "text": "CustomEvent<SkyRadioValidationErrorDetail>"
12425
- },
12426
- "description": "Fired when validation errors occur.",
12427
- "name": "validation-error"
12428
- },
12349
+ "kind": "method",
12350
+ "name": "getItems",
12351
+ "privacy": "public",
12352
+ "return": {
12353
+ "type": {
12354
+ "text": "SkyListitem[]"
12355
+ }
12356
+ }
12357
+ }
12358
+ ],
12359
+ "events": [
12429
12360
  {
12361
+ "name": "list-change",
12430
12362
  "type": {
12431
- "text": "CustomEvent<SkyRadioValueClearedDetail>"
12363
+ "text": "CustomEvent<SkyListChangeDetail>"
12432
12364
  },
12433
- "description": "Fired when selection is reset.",
12434
- "name": "value-cleared"
12365
+ "description": "Fired when selected items change."
12435
12366
  }
12436
12367
  ],
12437
12368
  "attributes": [
12438
12369
  {
12439
- "name": "label",
12440
- "type": {
12441
- "text": "string"
12442
- },
12443
- "default": "\"\"",
12444
- "description": "Text label displayed beside the control.",
12445
- "fieldName": "label"
12446
- },
12447
- {
12448
- "name": "value",
12370
+ "name": "preset",
12449
12371
  "type": {
12450
12372
  "text": "string"
12451
12373
  },
12452
12374
  "default": "\"\"",
12453
- "description": "Option value used for selection and form value.",
12454
- "fieldName": "value"
12455
- },
12456
- {
12457
- "name": "checked",
12458
- "type": {
12459
- "text": "boolean"
12460
- },
12461
- "default": "false",
12462
- "description": "Whether this option is selected.",
12463
- "fieldName": "checked"
12464
- },
12465
- {
12466
- "name": "color",
12467
- "type": {
12468
- "text": "string"
12469
- },
12470
- "default": "\"primary\"",
12471
- "description": "Accent color used in checked state.",
12472
- "fieldName": "color"
12375
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12376
+ "fieldName": "preset"
12473
12377
  },
12474
12378
  {
12475
- "name": "compact",
12379
+ "name": "selection",
12476
12380
  "type": {
12477
- "text": "boolean"
12381
+ "text": "SkyListSelectionMode"
12478
12382
  },
12479
- "default": "false",
12480
- "description": "Compact control size.",
12481
- "fieldName": "compact"
12383
+ "default": "\"none\"",
12384
+ "description": "Selection mode (`none`, `single`, `multiple`).",
12385
+ "fieldName": "selection"
12482
12386
  },
12483
12387
  {
12484
- "name": "preset",
12388
+ "name": "selectedValues",
12485
12389
  "type": {
12486
- "text": "string"
12390
+ "text": "string[]"
12487
12391
  },
12488
- "default": "\"\"",
12489
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12490
- "fieldName": "preset"
12392
+ "description": "Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.",
12393
+ "fieldName": "selectedValues"
12491
12394
  }
12492
12395
  ],
12493
12396
  "superclass": {
12494
- "name": "FormControlBase",
12495
- "module": "/src/helper/internals/form-control-base"
12397
+ "name": "LitElement",
12398
+ "package": "lit"
12496
12399
  },
12497
- "tagName": "sky-radio",
12400
+ "tagName": "sky-list",
12498
12401
  "customElement": true,
12499
- "summary": "Single radio option for grouped or standalone selection."
12402
+ "summary": "Styled list container for `sky-listitem` with selection modes and keyboard navigation."
12500
12403
  }
12501
12404
  ],
12502
12405
  "exports": [
12503
12406
  {
12504
12407
  "kind": "js",
12505
- "name": "SkyRadio",
12408
+ "name": "SkyList",
12506
12409
  "declaration": {
12507
- "name": "SkyRadio",
12508
- "module": "src/sky-radio/sky-radio.ts"
12410
+ "name": "SkyList",
12411
+ "module": "src/sky-list/sky-list.ts"
12509
12412
  }
12510
12413
  },
12511
12414
  {
12512
12415
  "kind": "custom-element-definition",
12513
- "name": "sky-radio",
12416
+ "name": "sky-list",
12514
12417
  "declaration": {
12515
- "name": "SkyRadio",
12516
- "module": "src/sky-radio/sky-radio.ts"
12418
+ "name": "SkyList",
12419
+ "module": "src/sky-list/sky-list.ts"
12517
12420
  }
12518
12421
  }
12519
12422
  ]
12520
12423
  },
12521
12424
  {
12522
12425
  "kind": "javascript-module",
12523
- "path": "src/sky-list/sky-list.ts",
12426
+ "path": "src/sky-radio/sky-radio.ts",
12524
12427
  "declarations": [
12525
12428
  {
12526
12429
  "kind": "class",
12527
12430
  "description": "",
12528
- "name": "SkyList",
12431
+ "name": "SkyRadio",
12529
12432
  "cssParts": [
12530
12433
  {
12531
- "description": "The main container wrapping slotted list items.",
12532
- "name": "list-container"
12434
+ "description": "The circular radio control element.",
12435
+ "name": "wrapper"
12436
+ },
12437
+ {
12438
+ "description": "The native hidden radio input element.",
12439
+ "name": "input"
12440
+ },
12441
+ {
12442
+ "description": "The text label element.",
12443
+ "name": "label"
12533
12444
  }
12534
12445
  ],
12535
12446
  "slots": [
12536
12447
  {
12537
- "description": "Default slot for `<sky-listitem>` children.",
12448
+ "description": "Content to display instead of the label property.",
12538
12449
  "name": ""
12539
12450
  }
12540
12451
  ],
12541
12452
  "members": [
12542
12453
  {
12543
12454
  "kind": "field",
12544
- "name": "preset",
12455
+ "name": "label",
12545
12456
  "type": {
12546
12457
  "text": "string"
12547
12458
  },
12548
12459
  "default": "\"\"",
12549
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12550
- "attribute": "preset",
12551
- "reflects": true
12552
- },
12553
- {
12554
- "kind": "field",
12555
- "name": "_presets",
12556
- "privacy": "private",
12557
- "default": "new PresetController(this)"
12558
- },
12559
- {
12560
- "kind": "field",
12561
- "name": "selection",
12562
- "type": {
12563
- "text": "SkyListSelectionMode"
12564
- },
12565
- "default": "\"none\"",
12566
- "description": "Selection mode (`none`, `single`, `multiple`).",
12567
- "attribute": "selection"
12460
+ "description": "Text label displayed beside the control.",
12461
+ "attribute": "label"
12568
12462
  },
12569
12463
  {
12570
12464
  "kind": "field",
12571
- "name": "_selectedValues",
12465
+ "name": "value",
12572
12466
  "type": {
12573
- "text": "string[]"
12467
+ "text": "string"
12574
12468
  },
12575
- "privacy": "private",
12576
- "default": "[]"
12469
+ "default": "\"\"",
12470
+ "description": "Option value used for selection and form value.",
12471
+ "attribute": "value"
12577
12472
  },
12578
12473
  {
12579
12474
  "kind": "field",
12580
- "name": "selectedValues",
12475
+ "name": "checked",
12581
12476
  "type": {
12582
- "text": "string[]"
12477
+ "text": "boolean"
12583
12478
  },
12584
- "description": "Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.",
12585
- "attribute": "selectedValues"
12479
+ "default": "false",
12480
+ "description": "Whether this option is selected.",
12481
+ "attribute": "checked",
12482
+ "reflects": true
12586
12483
  },
12587
12484
  {
12588
12485
  "kind": "field",
12589
- "name": "items",
12486
+ "name": "color",
12590
12487
  "type": {
12591
- "text": "SkyListitem[]"
12488
+ "text": "string"
12592
12489
  },
12593
- "privacy": "private"
12490
+ "default": "\"primary\"",
12491
+ "description": "Accent color used in checked state.",
12492
+ "attribute": "color"
12594
12493
  },
12595
12494
  {
12596
12495
  "kind": "field",
12597
- "name": "currentIndex",
12496
+ "name": "compact",
12598
12497
  "type": {
12599
- "text": "number"
12498
+ "text": "boolean"
12600
12499
  },
12601
- "privacy": "private",
12602
- "default": "0"
12500
+ "default": "false",
12501
+ "description": "Compact control size.",
12502
+ "attribute": "compact",
12503
+ "reflects": true
12603
12504
  },
12604
12505
  {
12605
12506
  "kind": "field",
12606
- "name": "_syncingSelectedValues",
12507
+ "name": "_hasMeaningfulSlot",
12607
12508
  "type": {
12608
12509
  "text": "boolean"
12609
12510
  },
12610
12511
  "privacy": "private",
12611
- "default": "false",
12612
- "description": "Avoid feedback when syncing selection from the `selectedValues` prop."
12613
- },
12614
- {
12615
- "kind": "field",
12616
- "name": "_onItemActivate",
12617
- "privacy": "private"
12618
- },
12619
- {
12620
- "kind": "field",
12621
- "name": "_onSlotChange",
12622
- "privacy": "private"
12512
+ "default": "false"
12623
12513
  },
12624
12514
  {
12625
12515
  "kind": "method",
12626
- "name": "syncAriaRole",
12516
+ "name": "syncStyleVars",
12627
12517
  "privacy": "private",
12628
12518
  "return": {
12629
12519
  "type": {
@@ -12633,83 +12523,98 @@
12633
12523
  },
12634
12524
  {
12635
12525
  "kind": "method",
12636
- "name": "navigableItems",
12637
- "privacy": "private",
12526
+ "name": "check",
12527
+ "privacy": "public",
12638
12528
  "return": {
12639
12529
  "type": {
12640
- "text": "SkyListitem[]"
12530
+ "text": "void"
12641
12531
  }
12642
12532
  }
12643
12533
  },
12644
12534
  {
12645
12535
  "kind": "method",
12646
- "name": "isNavigableItem",
12647
- "privacy": "private",
12536
+ "name": "focusRadio",
12537
+ "privacy": "public",
12648
12538
  "return": {
12649
12539
  "type": {
12650
- "text": "boolean"
12540
+ "text": "void"
12651
12541
  }
12542
+ }
12543
+ },
12544
+ {
12545
+ "kind": "field",
12546
+ "name": "preset",
12547
+ "type": {
12548
+ "text": "string"
12652
12549
  },
12653
- "parameters": [
12654
- {
12655
- "name": "item",
12656
- "type": {
12657
- "text": "SkyListitem | undefined"
12658
- }
12659
- }
12660
- ]
12550
+ "default": "\"\"",
12551
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12552
+ "attribute": "preset",
12553
+ "reflects": true
12661
12554
  },
12662
12555
  {
12663
- "kind": "method",
12664
- "name": "itemIndex",
12556
+ "kind": "field",
12557
+ "name": "_presets",
12665
12558
  "privacy": "private",
12666
- "return": {
12667
- "type": {
12668
- "text": "number"
12669
- }
12559
+ "default": "new PresetController(this)"
12560
+ },
12561
+ {
12562
+ "kind": "field",
12563
+ "name": "shadowRootOptions",
12564
+ "type": {
12565
+ "text": "object"
12670
12566
  },
12671
- "parameters": [
12672
- {
12673
- "name": "item",
12674
- "type": {
12675
- "text": "SkyListitem"
12676
- }
12677
- }
12678
- ]
12567
+ "static": true,
12568
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
12679
12569
  },
12680
12570
  {
12681
12571
  "kind": "method",
12682
- "name": "onItemActivate",
12572
+ "name": "_slotHasMeaningfulContent",
12683
12573
  "privacy": "private",
12684
12574
  "return": {
12685
12575
  "type": {
12686
- "text": "void"
12576
+ "text": "boolean"
12687
12577
  }
12688
12578
  },
12689
12579
  "parameters": [
12690
12580
  {
12691
- "name": "e",
12581
+ "name": "slotEl",
12692
12582
  "type": {
12693
- "text": "CustomEvent"
12583
+ "text": "HTMLSlotElement"
12694
12584
  }
12695
12585
  }
12696
12586
  ]
12697
12587
  },
12588
+ {
12589
+ "kind": "field",
12590
+ "name": "_onSlotChange",
12591
+ "privacy": "private"
12592
+ },
12593
+ {
12594
+ "kind": "field",
12595
+ "name": "onNativeChange",
12596
+ "privacy": "private"
12597
+ },
12598
+ {
12599
+ "kind": "field",
12600
+ "name": "handleKeydown",
12601
+ "privacy": "private"
12602
+ },
12698
12603
  {
12699
12604
  "kind": "method",
12700
- "name": "_applySelectedValuesFromProp",
12701
- "privacy": "private",
12605
+ "name": "getFormValue",
12606
+ "privacy": "protected",
12702
12607
  "return": {
12703
12608
  "type": {
12704
- "text": "void"
12609
+ "text": "FormState"
12705
12610
  }
12706
12611
  },
12707
- "description": "Applies `selectedValues` from the host to child items."
12612
+ "description": "Get the current value for form submission"
12708
12613
  },
12709
12614
  {
12710
12615
  "kind": "method",
12711
- "name": "onKeydown",
12712
- "privacy": "private",
12616
+ "name": "setValueFromFormState",
12617
+ "privacy": "protected",
12713
12618
  "return": {
12714
12619
  "type": {
12715
12620
  "text": "void"
@@ -12717,63 +12622,51 @@
12717
12622
  },
12718
12623
  "parameters": [
12719
12624
  {
12720
- "name": "e",
12625
+ "name": "state",
12721
12626
  "type": {
12722
- "text": "KeyboardEvent"
12627
+ "text": "FormState"
12723
12628
  }
12724
12629
  }
12725
- ]
12630
+ ],
12631
+ "description": "Set value from form state (e.g., form reset)"
12726
12632
  },
12727
12633
  {
12728
12634
  "kind": "method",
12729
- "name": "focusStep",
12730
- "privacy": "private",
12635
+ "name": "getValidityAnchor",
12636
+ "privacy": "protected",
12731
12637
  "return": {
12732
12638
  "type": {
12733
- "text": "void"
12639
+ "text": "HTMLElement | undefined"
12734
12640
  }
12735
12641
  },
12736
- "parameters": [
12737
- {
12738
- "name": "delta",
12739
- "type": {
12740
- "text": "number"
12741
- }
12742
- }
12743
- ]
12642
+ "description": "Get the validity anchor (the hidden input)"
12744
12643
  },
12745
12644
  {
12746
12645
  "kind": "method",
12747
- "name": "_focusFirstNavigable",
12748
- "privacy": "private",
12646
+ "name": "isEmpty",
12647
+ "privacy": "protected",
12749
12648
  "return": {
12750
12649
  "type": {
12751
- "text": "void"
12650
+ "text": "boolean"
12752
12651
  }
12753
- }
12652
+ },
12653
+ "description": "Check if empty (for required validation)"
12754
12654
  },
12755
12655
  {
12756
12656
  "kind": "method",
12757
- "name": "focusItem",
12758
- "privacy": "private",
12657
+ "name": "getNativeControl",
12658
+ "privacy": "protected",
12759
12659
  "return": {
12760
12660
  "type": {
12761
- "text": "void"
12661
+ "text": "HTMLElement | null"
12762
12662
  }
12763
12663
  },
12764
- "parameters": [
12765
- {
12766
- "name": "index",
12767
- "type": {
12768
- "text": "number"
12769
- }
12770
- }
12771
- ]
12664
+ "description": "Get the native control (hidden radio input)"
12772
12665
  },
12773
12666
  {
12774
12667
  "kind": "method",
12775
- "name": "focusListItem",
12776
- "privacy": "public",
12668
+ "name": "onNativeValueMutated",
12669
+ "privacy": "protected",
12777
12670
  "return": {
12778
12671
  "type": {
12779
12672
  "text": "void"
@@ -12781,85 +12674,192 @@
12781
12674
  },
12782
12675
  "parameters": [
12783
12676
  {
12784
- "name": "index",
12677
+ "name": "_native",
12785
12678
  "type": {
12786
- "text": "number"
12679
+ "text": "any"
12787
12680
  }
12788
12681
  }
12789
- ]
12682
+ ],
12683
+ "description": "Handle native value mutation"
12790
12684
  },
12791
12685
  {
12792
12686
  "kind": "method",
12793
- "name": "getItems",
12794
- "privacy": "public",
12687
+ "name": "getCustomErrorMessage",
12688
+ "privacy": "protected",
12795
12689
  "return": {
12796
12690
  "type": {
12797
- "text": "SkyListitem[]"
12691
+ "text": "string"
12798
12692
  }
12799
- }
12693
+ },
12694
+ "description": "Override to provide custom error messages"
12695
+ },
12696
+ {
12697
+ "kind": "field",
12698
+ "name": "validationErrors",
12699
+ "type": {
12700
+ "text": "string[]"
12701
+ },
12702
+ "description": "Get current validation errors",
12703
+ "readonly": true
12704
+ },
12705
+ {
12706
+ "type": {
12707
+ "text": "string"
12708
+ },
12709
+ "description": "Radio name used for same-name exclusivity.",
12710
+ "name": "name",
12711
+ "kind": "field"
12712
+ },
12713
+ {
12714
+ "type": {
12715
+ "text": "boolean"
12716
+ },
12717
+ "description": "Disables user interaction.",
12718
+ "name": "disabled",
12719
+ "kind": "field"
12720
+ },
12721
+ {
12722
+ "type": {
12723
+ "text": "boolean"
12724
+ },
12725
+ "description": "Prevents selection changes while still allowing focus.",
12726
+ "name": "readonly",
12727
+ "kind": "field"
12728
+ },
12729
+ {
12730
+ "type": {
12731
+ "text": "boolean"
12732
+ },
12733
+ "description": "Enables required validation for standalone usage.",
12734
+ "name": "required",
12735
+ "kind": "field"
12736
+ },
12737
+ {
12738
+ "type": {
12739
+ "text": "string"
12740
+ },
12741
+ "description": "Error message for required validation failures.",
12742
+ "name": "requiredMessage",
12743
+ "kind": "field"
12800
12744
  }
12801
12745
  ],
12802
12746
  "events": [
12803
12747
  {
12804
- "name": "list-change",
12805
12748
  "type": {
12806
- "text": "CustomEvent<SkyListChangeDetail>"
12749
+ "text": "CustomEvent<SkyRadioSelectDetail>"
12807
12750
  },
12808
- "description": "Fired when selected items change."
12751
+ "description": "Fired when the option becomes selected.",
12752
+ "name": "radio-select"
12753
+ },
12754
+ {
12755
+ "type": {
12756
+ "text": "Event"
12757
+ },
12758
+ "description": "Native change event for form compatibility.",
12759
+ "name": "change"
12760
+ },
12761
+ {
12762
+ "type": {
12763
+ "text": "Event"
12764
+ },
12765
+ "description": "Native input event for form compatibility.",
12766
+ "name": "input"
12767
+ },
12768
+ {
12769
+ "type": {
12770
+ "text": "CustomEvent<SkyRadioValidationErrorDetail>"
12771
+ },
12772
+ "description": "Fired when validation errors occur.",
12773
+ "name": "validation-error"
12774
+ },
12775
+ {
12776
+ "type": {
12777
+ "text": "CustomEvent<SkyRadioValueClearedDetail>"
12778
+ },
12779
+ "description": "Fired when selection is reset.",
12780
+ "name": "value-cleared"
12809
12781
  }
12810
12782
  ],
12811
12783
  "attributes": [
12812
12784
  {
12813
- "name": "preset",
12785
+ "name": "label",
12814
12786
  "type": {
12815
12787
  "text": "string"
12816
12788
  },
12817
12789
  "default": "\"\"",
12818
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12819
- "fieldName": "preset"
12790
+ "description": "Text label displayed beside the control.",
12791
+ "fieldName": "label"
12820
12792
  },
12821
12793
  {
12822
- "name": "selection",
12794
+ "name": "value",
12823
12795
  "type": {
12824
- "text": "SkyListSelectionMode"
12796
+ "text": "string"
12825
12797
  },
12826
- "default": "\"none\"",
12827
- "description": "Selection mode (`none`, `single`, `multiple`).",
12828
- "fieldName": "selection"
12798
+ "default": "\"\"",
12799
+ "description": "Option value used for selection and form value.",
12800
+ "fieldName": "value"
12829
12801
  },
12830
12802
  {
12831
- "name": "selectedValues",
12803
+ "name": "checked",
12832
12804
  "type": {
12833
- "text": "string[]"
12805
+ "text": "boolean"
12834
12806
  },
12835
- "description": "Selected item `value`s (mirror for `v-model`; set each `<sky-listitem value=\"…\">`). Default: `[]`.",
12836
- "fieldName": "selectedValues"
12807
+ "default": "false",
12808
+ "description": "Whether this option is selected.",
12809
+ "fieldName": "checked"
12810
+ },
12811
+ {
12812
+ "name": "color",
12813
+ "type": {
12814
+ "text": "string"
12815
+ },
12816
+ "default": "\"primary\"",
12817
+ "description": "Accent color used in checked state.",
12818
+ "fieldName": "color"
12819
+ },
12820
+ {
12821
+ "name": "compact",
12822
+ "type": {
12823
+ "text": "boolean"
12824
+ },
12825
+ "default": "false",
12826
+ "description": "Compact control size.",
12827
+ "fieldName": "compact"
12828
+ },
12829
+ {
12830
+ "name": "preset",
12831
+ "type": {
12832
+ "text": "string"
12833
+ },
12834
+ "default": "\"\"",
12835
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
12836
+ "fieldName": "preset"
12837
12837
  }
12838
12838
  ],
12839
12839
  "superclass": {
12840
- "name": "LitElement",
12841
- "package": "lit"
12840
+ "name": "FormControlBase",
12841
+ "module": "/src/helper/internals/form-control-base"
12842
12842
  },
12843
- "tagName": "sky-list",
12843
+ "tagName": "sky-radio",
12844
12844
  "customElement": true,
12845
- "summary": "Styled list container for `sky-listitem` with selection modes and keyboard navigation."
12845
+ "summary": "Single radio option for grouped or standalone selection."
12846
12846
  }
12847
12847
  ],
12848
12848
  "exports": [
12849
12849
  {
12850
12850
  "kind": "js",
12851
- "name": "SkyList",
12851
+ "name": "SkyRadio",
12852
12852
  "declaration": {
12853
- "name": "SkyList",
12854
- "module": "src/sky-list/sky-list.ts"
12853
+ "name": "SkyRadio",
12854
+ "module": "src/sky-radio/sky-radio.ts"
12855
12855
  }
12856
12856
  },
12857
12857
  {
12858
12858
  "kind": "custom-element-definition",
12859
- "name": "sky-list",
12859
+ "name": "sky-radio",
12860
12860
  "declaration": {
12861
- "name": "SkyList",
12862
- "module": "src/sky-list/sky-list.ts"
12861
+ "name": "SkyRadio",
12862
+ "module": "src/sky-radio/sky-radio.ts"
12863
12863
  }
12864
12864
  }
12865
12865
  ]