@sky.ui/core 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/custom-elements.json +1244 -1244
- package/package.json +30 -2
|
@@ -4,44 +4,85 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/sky-accordion/sky-accordion.ts",
|
|
7
|
+
"path": "src/sky-accordion-item/sky-accordion-item.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
11
|
"description": "",
|
|
12
|
-
"name": "
|
|
12
|
+
"name": "SkyAccordionItem",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Background color applied to header and content areas.",
|
|
16
|
+
"name": "--acc-bg"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "Header background on hover (default: `var(--sky-hover-primary)`).",
|
|
20
|
+
"name": "--acc-header-hover"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "Header background on active/pressed state (default: `var(--sky-hover-secondary)`).",
|
|
24
|
+
"name": "--acc-header-active"
|
|
25
|
+
}
|
|
26
|
+
],
|
|
13
27
|
"cssParts": [
|
|
14
28
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "
|
|
29
|
+
"description": "Item root wrapper.",
|
|
30
|
+
"name": "item"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"description": "Interactive header trigger.",
|
|
34
|
+
"name": "header"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "Primary title wrapper.",
|
|
38
|
+
"name": "title"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"description": "Secondary title wrapper.",
|
|
42
|
+
"name": "sub-title"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"description": "Expand/collapse icon wrapper.",
|
|
46
|
+
"name": "icon"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"description": "Collapsible content body container.",
|
|
50
|
+
"name": "content"
|
|
17
51
|
}
|
|
18
52
|
],
|
|
19
53
|
"slots": [
|
|
20
54
|
{
|
|
21
|
-
"description": "
|
|
22
|
-
"name": ""
|
|
55
|
+
"description": "Primary header content.",
|
|
56
|
+
"name": "title"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"description": "Optional secondary header content.",
|
|
60
|
+
"name": "sub-title"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"description": "Collapsible body content.",
|
|
64
|
+
"name": "content"
|
|
23
65
|
}
|
|
24
66
|
],
|
|
25
67
|
"members": [
|
|
26
68
|
{
|
|
27
69
|
"kind": "field",
|
|
28
|
-
"name": "
|
|
70
|
+
"name": "dependencies",
|
|
29
71
|
"type": {
|
|
30
|
-
"text": "
|
|
72
|
+
"text": "Record<string, CustomElementConstructor>"
|
|
31
73
|
},
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"attribute": "singleOpen"
|
|
74
|
+
"static": true,
|
|
75
|
+
"default": "{ \"sky-icon\": SkyIcon, }"
|
|
35
76
|
},
|
|
36
77
|
{
|
|
37
78
|
"kind": "field",
|
|
38
|
-
"name": "
|
|
79
|
+
"name": "open",
|
|
39
80
|
"type": {
|
|
40
|
-
"text": "
|
|
81
|
+
"text": "boolean"
|
|
41
82
|
},
|
|
42
|
-
"default": "
|
|
43
|
-
"description": "
|
|
44
|
-
"attribute": "
|
|
83
|
+
"default": "false",
|
|
84
|
+
"description": "Indicates whether the item is expanded.",
|
|
85
|
+
"attribute": "open",
|
|
45
86
|
"reflects": true
|
|
46
87
|
},
|
|
47
88
|
{
|
|
@@ -51,399 +92,323 @@
|
|
|
51
92
|
"text": "boolean"
|
|
52
93
|
},
|
|
53
94
|
"default": "false",
|
|
54
|
-
"description": "
|
|
95
|
+
"description": "Prevents interaction and state changes.",
|
|
55
96
|
"attribute": "disabled",
|
|
56
97
|
"reflects": true
|
|
57
98
|
},
|
|
58
99
|
{
|
|
59
100
|
"kind": "field",
|
|
60
|
-
"name": "
|
|
101
|
+
"name": "animationStyle",
|
|
102
|
+
"type": {
|
|
103
|
+
"text": "SkyAccordionItemAnimationStyle"
|
|
104
|
+
},
|
|
105
|
+
"default": "\"rotate\"",
|
|
106
|
+
"description": "Icon animation preset used during expand/collapse transitions.",
|
|
107
|
+
"attribute": "animationStyle",
|
|
108
|
+
"reflects": true
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "field",
|
|
112
|
+
"name": "expandIcon",
|
|
61
113
|
"type": {
|
|
62
114
|
"text": "string"
|
|
63
115
|
},
|
|
64
|
-
"default": "\"\"",
|
|
65
|
-
"description": "
|
|
66
|
-
"attribute": "
|
|
116
|
+
"default": "\"ion:chevron-back\"",
|
|
117
|
+
"description": "Icon displayed while the item is collapsed.",
|
|
118
|
+
"attribute": "expandIcon"
|
|
67
119
|
},
|
|
68
120
|
{
|
|
69
121
|
"kind": "field",
|
|
70
|
-
"name": "
|
|
122
|
+
"name": "collapseIcon",
|
|
71
123
|
"type": {
|
|
72
|
-
"text": "
|
|
124
|
+
"text": "string"
|
|
125
|
+
},
|
|
126
|
+
"default": "\"ion:chevron-back\"",
|
|
127
|
+
"description": "Icon displayed while the item is expanded.",
|
|
128
|
+
"attribute": "collapseIcon"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "iconRef",
|
|
133
|
+
"privacy": "private",
|
|
134
|
+
"description": "Reference to the icon wrapper for WAAPI animations."
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"kind": "field",
|
|
138
|
+
"name": "contentBodyRef",
|
|
139
|
+
"privacy": "private",
|
|
140
|
+
"description": "Reference to the content body used by fade animations."
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "field",
|
|
144
|
+
"name": "_idCounter",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "number"
|
|
147
|
+
},
|
|
148
|
+
"privacy": "private",
|
|
149
|
+
"static": true,
|
|
150
|
+
"default": "0",
|
|
151
|
+
"description": "Monotonic counter used to generate unique ARIA ids."
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"kind": "field",
|
|
155
|
+
"name": "_panelNum",
|
|
156
|
+
"privacy": "private",
|
|
157
|
+
"default": "SkyAccordionItem._idCounter++",
|
|
158
|
+
"description": "Unique numeric id for this item instance."
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"kind": "field",
|
|
162
|
+
"name": "_headerId",
|
|
163
|
+
"privacy": "private",
|
|
164
|
+
"default": "`sky-acc-${this._panelNum}-h`",
|
|
165
|
+
"description": "Header id used by `aria-labelledby`."
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"kind": "field",
|
|
169
|
+
"name": "_contentId",
|
|
170
|
+
"privacy": "private",
|
|
171
|
+
"default": "`sky-acc-${this._panelNum}-c`",
|
|
172
|
+
"description": "Content id used by `aria-controls`."
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"kind": "field",
|
|
176
|
+
"name": "animation",
|
|
177
|
+
"privacy": "private",
|
|
178
|
+
"default": "new AnimationController(this, { defaultDuration: 200, defaultEasing: \"ease-out\", defaultFill: \"forwards\", })",
|
|
179
|
+
"description": "Shared animation controller for content and icon transitions."
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"kind": "field",
|
|
183
|
+
"name": "_iconAnimation",
|
|
184
|
+
"type": {
|
|
185
|
+
"text": "Animation | null"
|
|
73
186
|
},
|
|
74
187
|
"privacy": "private",
|
|
75
188
|
"default": "null",
|
|
76
|
-
"description": "
|
|
189
|
+
"description": "Active icon animation handle, if one is running."
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"kind": "field",
|
|
193
|
+
"name": "prefersReducedMotion",
|
|
194
|
+
"type": {
|
|
195
|
+
"text": "boolean"
|
|
196
|
+
},
|
|
197
|
+
"privacy": "private",
|
|
198
|
+
"static": true,
|
|
199
|
+
"description": "Detects user preference for reduced motion.",
|
|
200
|
+
"readonly": true
|
|
77
201
|
},
|
|
78
202
|
{
|
|
79
203
|
"kind": "method",
|
|
80
|
-
"name": "
|
|
204
|
+
"name": "expand",
|
|
81
205
|
"privacy": "public",
|
|
82
206
|
"return": {
|
|
83
207
|
"type": {
|
|
84
208
|
"text": "void"
|
|
85
209
|
}
|
|
86
210
|
},
|
|
87
|
-
"description": "
|
|
211
|
+
"description": "Expands the item if it is currently collapsed."
|
|
88
212
|
},
|
|
89
213
|
{
|
|
90
214
|
"kind": "method",
|
|
91
|
-
"name": "
|
|
215
|
+
"name": "collapse",
|
|
92
216
|
"privacy": "public",
|
|
93
217
|
"return": {
|
|
94
218
|
"type": {
|
|
95
219
|
"text": "void"
|
|
96
220
|
}
|
|
97
221
|
},
|
|
98
|
-
"description": "
|
|
222
|
+
"description": "Collapses the item if it is currently expanded."
|
|
99
223
|
},
|
|
100
224
|
{
|
|
101
225
|
"kind": "method",
|
|
102
|
-
"name": "
|
|
226
|
+
"name": "toggle",
|
|
103
227
|
"privacy": "public",
|
|
104
228
|
"return": {
|
|
105
229
|
"type": {
|
|
106
|
-
"text": ""
|
|
230
|
+
"text": "void"
|
|
107
231
|
}
|
|
108
232
|
},
|
|
109
|
-
"
|
|
110
|
-
{
|
|
111
|
-
"name": "index",
|
|
112
|
-
"type": {
|
|
113
|
-
"text": "number"
|
|
114
|
-
},
|
|
115
|
-
"description": "Zero-based direct child index."
|
|
116
|
-
}
|
|
117
|
-
],
|
|
118
|
-
"description": "Opens a direct item by index.\r\nIn `single-open` mode, opening one item closes the others."
|
|
233
|
+
"description": "Toggles open state and emits `accordion-toggle`."
|
|
119
234
|
},
|
|
120
235
|
{
|
|
121
236
|
"kind": "method",
|
|
122
|
-
"name": "
|
|
123
|
-
"privacy": "
|
|
237
|
+
"name": "dispatchToggleEvent",
|
|
238
|
+
"privacy": "private",
|
|
124
239
|
"return": {
|
|
125
240
|
"type": {
|
|
126
|
-
"text": ""
|
|
241
|
+
"text": "void"
|
|
127
242
|
}
|
|
128
243
|
},
|
|
129
|
-
"
|
|
130
|
-
{
|
|
131
|
-
"name": "index",
|
|
132
|
-
"type": {
|
|
133
|
-
"text": "number"
|
|
134
|
-
},
|
|
135
|
-
"description": "Zero-based direct child index."
|
|
136
|
-
}
|
|
137
|
-
],
|
|
138
|
-
"description": "Closes a direct item by index."
|
|
244
|
+
"description": "Dispatches `accordion-toggle` with the current open state.\r\nEvent bubbles and is composed for parent-level coordination."
|
|
139
245
|
},
|
|
140
246
|
{
|
|
141
247
|
"kind": "method",
|
|
142
|
-
"name": "
|
|
143
|
-
"privacy": "
|
|
248
|
+
"name": "handleHeaderKeydown",
|
|
249
|
+
"privacy": "private",
|
|
144
250
|
"return": {
|
|
145
251
|
"type": {
|
|
146
|
-
"text": ""
|
|
252
|
+
"text": "void"
|
|
147
253
|
}
|
|
148
254
|
},
|
|
149
255
|
"parameters": [
|
|
150
256
|
{
|
|
151
|
-
"name": "
|
|
257
|
+
"name": "e",
|
|
152
258
|
"type": {
|
|
153
|
-
"text": "
|
|
154
|
-
}
|
|
155
|
-
"description": "Zero-based direct child index."
|
|
259
|
+
"text": "KeyboardEvent"
|
|
260
|
+
}
|
|
156
261
|
}
|
|
157
262
|
],
|
|
158
|
-
"description": "
|
|
263
|
+
"description": "Handles keyboard activation for the header trigger."
|
|
159
264
|
},
|
|
160
265
|
{
|
|
161
266
|
"kind": "method",
|
|
162
|
-
"name": "
|
|
163
|
-
"privacy": "
|
|
267
|
+
"name": "runIconAnimation",
|
|
268
|
+
"privacy": "private",
|
|
164
269
|
"return": {
|
|
165
270
|
"type": {
|
|
166
|
-
"text": ""
|
|
271
|
+
"text": "void"
|
|
167
272
|
}
|
|
168
273
|
},
|
|
169
|
-
"description": "
|
|
274
|
+
"description": "Runs icon transform animation based on `animationStyle`."
|
|
170
275
|
},
|
|
171
276
|
{
|
|
172
277
|
"kind": "method",
|
|
173
|
-
"name": "
|
|
174
|
-
"privacy": "
|
|
278
|
+
"name": "getIconKeyframes",
|
|
279
|
+
"privacy": "private",
|
|
175
280
|
"return": {
|
|
176
281
|
"type": {
|
|
177
|
-
"text": ""
|
|
282
|
+
"text": "Keyframe[] | null"
|
|
178
283
|
}
|
|
179
284
|
},
|
|
180
|
-
"description": "
|
|
181
|
-
}
|
|
285
|
+
"description": "Returns icon transform keyframes for current state and animation style."
|
|
286
|
+
}
|
|
287
|
+
],
|
|
288
|
+
"events": [
|
|
182
289
|
{
|
|
183
|
-
"
|
|
184
|
-
"name": "focusItem",
|
|
185
|
-
"privacy": "public",
|
|
186
|
-
"return": {
|
|
187
|
-
"type": {
|
|
188
|
-
"text": ""
|
|
189
|
-
}
|
|
190
|
-
},
|
|
191
|
-
"parameters": [
|
|
192
|
-
{
|
|
193
|
-
"name": "index",
|
|
194
|
-
"type": {
|
|
195
|
-
"text": "number"
|
|
196
|
-
},
|
|
197
|
-
"description": "Zero-based direct child index."
|
|
198
|
-
}
|
|
199
|
-
],
|
|
200
|
-
"description": "Moves focus to a direct item header by index."
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
"kind": "method",
|
|
204
|
-
"name": "focusFirst",
|
|
205
|
-
"privacy": "public",
|
|
206
|
-
"return": {
|
|
207
|
-
"type": {
|
|
208
|
-
"text": ""
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
|
-
"description": "Moves focus to the first direct item header."
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
"kind": "method",
|
|
215
|
-
"name": "focusLast",
|
|
216
|
-
"privacy": "public",
|
|
217
|
-
"return": {
|
|
218
|
-
"type": {
|
|
219
|
-
"text": ""
|
|
220
|
-
}
|
|
221
|
-
},
|
|
222
|
-
"description": "Moves focus to the last direct item header."
|
|
223
|
-
},
|
|
224
|
-
{
|
|
225
|
-
"kind": "method",
|
|
226
|
-
"name": "getItems",
|
|
227
|
-
"privacy": "public",
|
|
228
|
-
"return": {
|
|
229
|
-
"type": {
|
|
230
|
-
"text": ""
|
|
231
|
-
}
|
|
232
|
-
},
|
|
233
|
-
"description": "Returns a snapshot of direct items."
|
|
234
|
-
},
|
|
235
|
-
{
|
|
236
|
-
"kind": "method",
|
|
237
|
-
"name": "handleItemToggle",
|
|
238
|
-
"privacy": "private",
|
|
239
|
-
"return": {
|
|
240
|
-
"type": {
|
|
241
|
-
"text": "void"
|
|
242
|
-
}
|
|
243
|
-
},
|
|
244
|
-
"parameters": [
|
|
245
|
-
{
|
|
246
|
-
"name": "e",
|
|
247
|
-
"type": {
|
|
248
|
-
"text": "Event"
|
|
249
|
-
},
|
|
250
|
-
"description": "Toggle event emitted by a descendant item."
|
|
251
|
-
}
|
|
252
|
-
],
|
|
253
|
-
"description": "Handles child toggle events for single-open coordination.\r\nIgnores events from nested or non-direct accordion items."
|
|
254
|
-
},
|
|
255
|
-
{
|
|
256
|
-
"kind": "method",
|
|
257
|
-
"name": "handleKeydown",
|
|
258
|
-
"privacy": "private",
|
|
259
|
-
"return": {
|
|
260
|
-
"type": {
|
|
261
|
-
"text": "void"
|
|
262
|
-
}
|
|
263
|
-
},
|
|
264
|
-
"parameters": [
|
|
265
|
-
{
|
|
266
|
-
"name": "e",
|
|
267
|
-
"type": {
|
|
268
|
-
"text": "KeyboardEvent"
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
],
|
|
272
|
-
"description": "Handles keyboard navigation across direct item headers.\r\nFocuses adjacent or boundary headers without changing open state."
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
"kind": "field",
|
|
276
|
-
"name": "handleSlotChange",
|
|
277
|
-
"privacy": "private",
|
|
278
|
-
"description": "Clears the direct-item cache after slot content changes."
|
|
279
|
-
},
|
|
280
|
-
{
|
|
281
|
-
"kind": "field",
|
|
282
|
-
"name": "items",
|
|
290
|
+
"name": "accordion-toggle",
|
|
283
291
|
"type": {
|
|
284
|
-
"text": "
|
|
292
|
+
"text": "CustomEvent<SkyAccordionItemToggleEventDetail>"
|
|
285
293
|
},
|
|
286
|
-
"
|
|
287
|
-
"description": "Returns direct `<sky-accordion-item>` children.\r\nUses `this.children`, so nested descendants are excluded.",
|
|
288
|
-
"readonly": true
|
|
294
|
+
"description": "Emitted after a toggle; bubbles and is composed so parent accordions can coordinate state across shadow boundaries."
|
|
289
295
|
}
|
|
290
296
|
],
|
|
291
|
-
"
|
|
297
|
+
"attributes": [
|
|
292
298
|
{
|
|
299
|
+
"name": "open",
|
|
293
300
|
"type": {
|
|
294
|
-
"text": "
|
|
301
|
+
"text": "boolean"
|
|
295
302
|
},
|
|
296
|
-
"
|
|
297
|
-
"
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
"attributes": [
|
|
303
|
+
"default": "false",
|
|
304
|
+
"description": "Indicates whether the item is expanded.",
|
|
305
|
+
"fieldName": "open"
|
|
306
|
+
},
|
|
301
307
|
{
|
|
302
|
-
"name": "
|
|
308
|
+
"name": "disabled",
|
|
303
309
|
"type": {
|
|
304
310
|
"text": "boolean"
|
|
305
311
|
},
|
|
306
312
|
"default": "false",
|
|
307
|
-
"description": "
|
|
308
|
-
"fieldName": "
|
|
313
|
+
"description": "Prevents interaction and state changes.",
|
|
314
|
+
"fieldName": "disabled"
|
|
309
315
|
},
|
|
310
316
|
{
|
|
311
|
-
"name": "
|
|
317
|
+
"name": "animationStyle",
|
|
312
318
|
"type": {
|
|
313
|
-
"text": "
|
|
319
|
+
"text": "SkyAccordionItemAnimationStyle"
|
|
314
320
|
},
|
|
315
|
-
"default": "\"
|
|
316
|
-
"description": "
|
|
317
|
-
"fieldName": "
|
|
321
|
+
"default": "\"rotate\"",
|
|
322
|
+
"description": "Icon animation preset used during expand/collapse transitions.",
|
|
323
|
+
"fieldName": "animationStyle"
|
|
318
324
|
},
|
|
319
325
|
{
|
|
320
|
-
"name": "
|
|
326
|
+
"name": "expandIcon",
|
|
321
327
|
"type": {
|
|
322
|
-
"text": "
|
|
328
|
+
"text": "string"
|
|
323
329
|
},
|
|
324
|
-
"default": "
|
|
325
|
-
"description": "
|
|
326
|
-
"fieldName": "
|
|
330
|
+
"default": "\"ion:chevron-back\"",
|
|
331
|
+
"description": "Icon displayed while the item is collapsed.",
|
|
332
|
+
"fieldName": "expandIcon"
|
|
327
333
|
},
|
|
328
334
|
{
|
|
329
|
-
"name": "
|
|
335
|
+
"name": "collapseIcon",
|
|
330
336
|
"type": {
|
|
331
337
|
"text": "string"
|
|
332
338
|
},
|
|
333
|
-
"default": "\"\"",
|
|
334
|
-
"description": "
|
|
335
|
-
"fieldName": "
|
|
339
|
+
"default": "\"ion:chevron-back\"",
|
|
340
|
+
"description": "Icon displayed while the item is expanded.",
|
|
341
|
+
"fieldName": "collapseIcon"
|
|
336
342
|
}
|
|
337
343
|
],
|
|
338
344
|
"superclass": {
|
|
339
345
|
"name": "LitElement",
|
|
340
346
|
"package": "lit"
|
|
341
347
|
},
|
|
342
|
-
"tagName": "sky-accordion",
|
|
348
|
+
"tagName": "sky-accordion-item",
|
|
343
349
|
"customElement": true,
|
|
344
|
-
"summary": "
|
|
350
|
+
"summary": "Interactive accordion item with a header trigger, accessible semantics, and collapsible content."
|
|
345
351
|
}
|
|
346
352
|
],
|
|
347
353
|
"exports": [
|
|
348
354
|
{
|
|
349
355
|
"kind": "js",
|
|
350
|
-
"name": "
|
|
356
|
+
"name": "SkyAccordionItem",
|
|
351
357
|
"declaration": {
|
|
352
|
-
"name": "
|
|
353
|
-
"module": "src/sky-accordion/sky-accordion.ts"
|
|
358
|
+
"name": "SkyAccordionItem",
|
|
359
|
+
"module": "src/sky-accordion-item/sky-accordion-item.ts"
|
|
354
360
|
}
|
|
355
361
|
},
|
|
356
362
|
{
|
|
357
363
|
"kind": "custom-element-definition",
|
|
358
|
-
"name": "sky-accordion",
|
|
364
|
+
"name": "sky-accordion-item",
|
|
359
365
|
"declaration": {
|
|
360
|
-
"name": "
|
|
361
|
-
"module": "src/sky-accordion/sky-accordion.ts"
|
|
366
|
+
"name": "SkyAccordionItem",
|
|
367
|
+
"module": "src/sky-accordion-item/sky-accordion-item.ts"
|
|
362
368
|
}
|
|
363
369
|
}
|
|
364
370
|
]
|
|
365
371
|
},
|
|
366
372
|
{
|
|
367
373
|
"kind": "javascript-module",
|
|
368
|
-
"path": "src/sky-accordion
|
|
374
|
+
"path": "src/sky-accordion/sky-accordion.ts",
|
|
369
375
|
"declarations": [
|
|
370
376
|
{
|
|
371
377
|
"kind": "class",
|
|
372
378
|
"description": "",
|
|
373
|
-
"name": "
|
|
374
|
-
"cssProperties": [
|
|
375
|
-
{
|
|
376
|
-
"description": "Background color applied to header and content areas.",
|
|
377
|
-
"name": "--acc-bg"
|
|
378
|
-
},
|
|
379
|
-
{
|
|
380
|
-
"description": "Header background on hover (default: `var(--sky-hover-primary)`).",
|
|
381
|
-
"name": "--acc-header-hover"
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
"description": "Header background on active/pressed state (default: `var(--sky-hover-secondary)`).",
|
|
385
|
-
"name": "--acc-header-active"
|
|
386
|
-
}
|
|
387
|
-
],
|
|
379
|
+
"name": "SkyAccordion",
|
|
388
380
|
"cssParts": [
|
|
389
381
|
{
|
|
390
|
-
"description": "
|
|
391
|
-
"name": "
|
|
392
|
-
},
|
|
393
|
-
{
|
|
394
|
-
"description": "Interactive header trigger.",
|
|
395
|
-
"name": "header"
|
|
396
|
-
},
|
|
397
|
-
{
|
|
398
|
-
"description": "Primary title wrapper.",
|
|
399
|
-
"name": "title"
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"description": "Secondary title wrapper.",
|
|
403
|
-
"name": "sub-title"
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
"description": "Expand/collapse icon wrapper.",
|
|
407
|
-
"name": "icon"
|
|
408
|
-
},
|
|
409
|
-
{
|
|
410
|
-
"description": "Collapsible content body container.",
|
|
411
|
-
"name": "content"
|
|
382
|
+
"description": "Wrapper that contains all slotted accordion items.",
|
|
383
|
+
"name": "group"
|
|
412
384
|
}
|
|
413
385
|
],
|
|
414
386
|
"slots": [
|
|
415
387
|
{
|
|
416
|
-
"description": "
|
|
417
|
-
"name": "
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
"description": "Optional secondary header content.",
|
|
421
|
-
"name": "sub-title"
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"description": "Collapsible body content.",
|
|
425
|
-
"name": "content"
|
|
388
|
+
"description": "One or more direct `<sky-accordion-item>` children.",
|
|
389
|
+
"name": ""
|
|
426
390
|
}
|
|
427
391
|
],
|
|
428
392
|
"members": [
|
|
429
393
|
{
|
|
430
394
|
"kind": "field",
|
|
431
|
-
"name": "
|
|
395
|
+
"name": "singleOpen",
|
|
432
396
|
"type": {
|
|
433
|
-
"text": "
|
|
397
|
+
"text": "boolean"
|
|
434
398
|
},
|
|
435
|
-
"
|
|
436
|
-
"
|
|
399
|
+
"default": "false",
|
|
400
|
+
"description": "Allows at most one direct item to remain open at a time.",
|
|
401
|
+
"attribute": "singleOpen"
|
|
437
402
|
},
|
|
438
403
|
{
|
|
439
404
|
"kind": "field",
|
|
440
|
-
"name": "
|
|
405
|
+
"name": "variant",
|
|
441
406
|
"type": {
|
|
442
|
-
"text": "
|
|
407
|
+
"text": "SkyAccordionVariant"
|
|
443
408
|
},
|
|
444
|
-
"default": "
|
|
445
|
-
"description": "
|
|
446
|
-
"attribute": "
|
|
409
|
+
"default": "\"solid\"",
|
|
410
|
+
"description": "Visual presentation variant for the accordion container.",
|
|
411
|
+
"attribute": "variant",
|
|
447
412
|
"reflects": true
|
|
448
413
|
},
|
|
449
414
|
{
|
|
@@ -453,160 +418,190 @@
|
|
|
453
418
|
"text": "boolean"
|
|
454
419
|
},
|
|
455
420
|
"default": "false",
|
|
456
|
-
"description": "
|
|
421
|
+
"description": "Disables user interaction for the entire accordion.",
|
|
457
422
|
"attribute": "disabled",
|
|
458
423
|
"reflects": true
|
|
459
424
|
},
|
|
460
425
|
{
|
|
461
426
|
"kind": "field",
|
|
462
|
-
"name": "
|
|
427
|
+
"name": "label",
|
|
463
428
|
"type": {
|
|
464
|
-
"text": "
|
|
429
|
+
"text": "string"
|
|
465
430
|
},
|
|
466
|
-
"default": "\"
|
|
467
|
-
"description": "
|
|
468
|
-
"attribute": "
|
|
469
|
-
"reflects": true
|
|
431
|
+
"default": "\"\"",
|
|
432
|
+
"description": "Accessible name applied to the group via `aria-label`.",
|
|
433
|
+
"attribute": "label"
|
|
470
434
|
},
|
|
471
435
|
{
|
|
472
436
|
"kind": "field",
|
|
473
|
-
"name": "
|
|
437
|
+
"name": "_itemsCache",
|
|
474
438
|
"type": {
|
|
475
|
-
"text": "
|
|
439
|
+
"text": "SkyAccordionItem[] | null"
|
|
476
440
|
},
|
|
477
|
-
"default": "\"ion:chevron-back\"",
|
|
478
|
-
"description": "Icon displayed while the item is collapsed.",
|
|
479
|
-
"attribute": "expandIcon"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"kind": "field",
|
|
483
|
-
"name": "collapseIcon",
|
|
484
|
-
"type": {
|
|
485
|
-
"text": "string"
|
|
486
|
-
},
|
|
487
|
-
"default": "\"ion:chevron-back\"",
|
|
488
|
-
"description": "Icon displayed while the item is expanded.",
|
|
489
|
-
"attribute": "collapseIcon"
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
"kind": "field",
|
|
493
|
-
"name": "iconRef",
|
|
494
|
-
"privacy": "private",
|
|
495
|
-
"description": "Reference to the icon wrapper for WAAPI animations."
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
"kind": "field",
|
|
499
|
-
"name": "contentBodyRef",
|
|
500
441
|
"privacy": "private",
|
|
501
|
-
"
|
|
442
|
+
"default": "null",
|
|
443
|
+
"description": "Cached list of direct accordion children.\r\nReset when slot content changes."
|
|
502
444
|
},
|
|
503
445
|
{
|
|
504
|
-
"kind": "
|
|
505
|
-
"name": "
|
|
506
|
-
"
|
|
507
|
-
|
|
446
|
+
"kind": "method",
|
|
447
|
+
"name": "expandAll",
|
|
448
|
+
"privacy": "public",
|
|
449
|
+
"return": {
|
|
450
|
+
"type": {
|
|
451
|
+
"text": "void"
|
|
452
|
+
}
|
|
508
453
|
},
|
|
509
|
-
"
|
|
510
|
-
"static": true,
|
|
511
|
-
"default": "0",
|
|
512
|
-
"description": "Monotonic counter used to generate unique ARIA ids."
|
|
454
|
+
"description": "Opens direct items.\r\nIn `single-open` mode, opens only the first direct item."
|
|
513
455
|
},
|
|
514
456
|
{
|
|
515
|
-
"kind": "
|
|
516
|
-
"name": "
|
|
517
|
-
"privacy": "
|
|
518
|
-
"
|
|
519
|
-
|
|
457
|
+
"kind": "method",
|
|
458
|
+
"name": "collapseAll",
|
|
459
|
+
"privacy": "public",
|
|
460
|
+
"return": {
|
|
461
|
+
"type": {
|
|
462
|
+
"text": "void"
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
"description": "Closes all direct items."
|
|
520
466
|
},
|
|
521
467
|
{
|
|
522
|
-
"kind": "
|
|
523
|
-
"name": "
|
|
524
|
-
"privacy": "
|
|
525
|
-
"
|
|
526
|
-
|
|
468
|
+
"kind": "method",
|
|
469
|
+
"name": "openItem",
|
|
470
|
+
"privacy": "public",
|
|
471
|
+
"return": {
|
|
472
|
+
"type": {
|
|
473
|
+
"text": ""
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
"parameters": [
|
|
477
|
+
{
|
|
478
|
+
"name": "index",
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "number"
|
|
481
|
+
},
|
|
482
|
+
"description": "Zero-based direct child index."
|
|
483
|
+
}
|
|
484
|
+
],
|
|
485
|
+
"description": "Opens a direct item by index.\r\nIn `single-open` mode, opening one item closes the others."
|
|
527
486
|
},
|
|
528
487
|
{
|
|
529
|
-
"kind": "
|
|
530
|
-
"name": "
|
|
531
|
-
"privacy": "
|
|
532
|
-
"
|
|
533
|
-
|
|
488
|
+
"kind": "method",
|
|
489
|
+
"name": "closeItem",
|
|
490
|
+
"privacy": "public",
|
|
491
|
+
"return": {
|
|
492
|
+
"type": {
|
|
493
|
+
"text": ""
|
|
494
|
+
}
|
|
495
|
+
},
|
|
496
|
+
"parameters": [
|
|
497
|
+
{
|
|
498
|
+
"name": "index",
|
|
499
|
+
"type": {
|
|
500
|
+
"text": "number"
|
|
501
|
+
},
|
|
502
|
+
"description": "Zero-based direct child index."
|
|
503
|
+
}
|
|
504
|
+
],
|
|
505
|
+
"description": "Closes a direct item by index."
|
|
534
506
|
},
|
|
535
507
|
{
|
|
536
|
-
"kind": "
|
|
537
|
-
"name": "
|
|
538
|
-
"privacy": "
|
|
539
|
-
"
|
|
540
|
-
|
|
508
|
+
"kind": "method",
|
|
509
|
+
"name": "toggleItem",
|
|
510
|
+
"privacy": "public",
|
|
511
|
+
"return": {
|
|
512
|
+
"type": {
|
|
513
|
+
"text": ""
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
"parameters": [
|
|
517
|
+
{
|
|
518
|
+
"name": "index",
|
|
519
|
+
"type": {
|
|
520
|
+
"text": "number"
|
|
521
|
+
},
|
|
522
|
+
"description": "Zero-based direct child index."
|
|
523
|
+
}
|
|
524
|
+
],
|
|
525
|
+
"description": "Toggles a direct item by index.\r\nIn `single-open` mode, opening one item closes the others."
|
|
541
526
|
},
|
|
542
527
|
{
|
|
543
|
-
"kind": "
|
|
544
|
-
"name": "
|
|
545
|
-
"
|
|
546
|
-
|
|
528
|
+
"kind": "method",
|
|
529
|
+
"name": "openFirst",
|
|
530
|
+
"privacy": "public",
|
|
531
|
+
"return": {
|
|
532
|
+
"type": {
|
|
533
|
+
"text": ""
|
|
534
|
+
}
|
|
547
535
|
},
|
|
548
|
-
"
|
|
549
|
-
"default": "null",
|
|
550
|
-
"description": "Active icon animation handle, if one is running."
|
|
536
|
+
"description": "Opens the first direct item."
|
|
551
537
|
},
|
|
552
538
|
{
|
|
553
|
-
"kind": "
|
|
554
|
-
"name": "
|
|
555
|
-
"
|
|
556
|
-
|
|
539
|
+
"kind": "method",
|
|
540
|
+
"name": "openLast",
|
|
541
|
+
"privacy": "public",
|
|
542
|
+
"return": {
|
|
543
|
+
"type": {
|
|
544
|
+
"text": ""
|
|
545
|
+
}
|
|
557
546
|
},
|
|
558
|
-
"
|
|
559
|
-
"static": true,
|
|
560
|
-
"description": "Detects user preference for reduced motion.",
|
|
561
|
-
"readonly": true
|
|
547
|
+
"description": "Opens the last direct item."
|
|
562
548
|
},
|
|
563
549
|
{
|
|
564
550
|
"kind": "method",
|
|
565
|
-
"name": "
|
|
551
|
+
"name": "focusItem",
|
|
566
552
|
"privacy": "public",
|
|
567
553
|
"return": {
|
|
568
554
|
"type": {
|
|
569
|
-
"text": "
|
|
555
|
+
"text": ""
|
|
570
556
|
}
|
|
571
557
|
},
|
|
572
|
-
"
|
|
558
|
+
"parameters": [
|
|
559
|
+
{
|
|
560
|
+
"name": "index",
|
|
561
|
+
"type": {
|
|
562
|
+
"text": "number"
|
|
563
|
+
},
|
|
564
|
+
"description": "Zero-based direct child index."
|
|
565
|
+
}
|
|
566
|
+
],
|
|
567
|
+
"description": "Moves focus to a direct item header by index."
|
|
573
568
|
},
|
|
574
569
|
{
|
|
575
570
|
"kind": "method",
|
|
576
|
-
"name": "
|
|
571
|
+
"name": "focusFirst",
|
|
577
572
|
"privacy": "public",
|
|
578
573
|
"return": {
|
|
579
574
|
"type": {
|
|
580
|
-
"text": "
|
|
575
|
+
"text": ""
|
|
581
576
|
}
|
|
582
577
|
},
|
|
583
|
-
"description": "
|
|
578
|
+
"description": "Moves focus to the first direct item header."
|
|
584
579
|
},
|
|
585
580
|
{
|
|
586
581
|
"kind": "method",
|
|
587
|
-
"name": "
|
|
582
|
+
"name": "focusLast",
|
|
588
583
|
"privacy": "public",
|
|
589
584
|
"return": {
|
|
590
585
|
"type": {
|
|
591
|
-
"text": "
|
|
586
|
+
"text": ""
|
|
592
587
|
}
|
|
593
588
|
},
|
|
594
|
-
"description": "
|
|
589
|
+
"description": "Moves focus to the last direct item header."
|
|
595
590
|
},
|
|
596
591
|
{
|
|
597
592
|
"kind": "method",
|
|
598
|
-
"name": "
|
|
599
|
-
"privacy": "
|
|
593
|
+
"name": "getItems",
|
|
594
|
+
"privacy": "public",
|
|
600
595
|
"return": {
|
|
601
596
|
"type": {
|
|
602
|
-
"text": "
|
|
597
|
+
"text": ""
|
|
603
598
|
}
|
|
604
599
|
},
|
|
605
|
-
"description": "
|
|
600
|
+
"description": "Returns a snapshot of direct items."
|
|
606
601
|
},
|
|
607
602
|
{
|
|
608
603
|
"kind": "method",
|
|
609
|
-
"name": "
|
|
604
|
+
"name": "handleItemToggle",
|
|
610
605
|
"privacy": "private",
|
|
611
606
|
"return": {
|
|
612
607
|
"type": {
|
|
@@ -617,53 +612,76 @@
|
|
|
617
612
|
{
|
|
618
613
|
"name": "e",
|
|
619
614
|
"type": {
|
|
620
|
-
"text": "
|
|
621
|
-
}
|
|
615
|
+
"text": "Event"
|
|
616
|
+
},
|
|
617
|
+
"description": "Toggle event emitted by a descendant item."
|
|
622
618
|
}
|
|
623
619
|
],
|
|
624
|
-
"description": "Handles
|
|
620
|
+
"description": "Handles child toggle events for single-open coordination.\r\nIgnores events from nested or non-direct accordion items."
|
|
625
621
|
},
|
|
626
622
|
{
|
|
627
623
|
"kind": "method",
|
|
628
|
-
"name": "
|
|
624
|
+
"name": "handleKeydown",
|
|
629
625
|
"privacy": "private",
|
|
630
626
|
"return": {
|
|
631
627
|
"type": {
|
|
632
628
|
"text": "void"
|
|
633
629
|
}
|
|
634
630
|
},
|
|
635
|
-
"
|
|
631
|
+
"parameters": [
|
|
632
|
+
{
|
|
633
|
+
"name": "e",
|
|
634
|
+
"type": {
|
|
635
|
+
"text": "KeyboardEvent"
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
],
|
|
639
|
+
"description": "Handles keyboard navigation across direct item headers.\r\nFocuses adjacent or boundary headers without changing open state."
|
|
636
640
|
},
|
|
637
641
|
{
|
|
638
|
-
"kind": "
|
|
639
|
-
"name": "
|
|
642
|
+
"kind": "field",
|
|
643
|
+
"name": "handleSlotChange",
|
|
640
644
|
"privacy": "private",
|
|
641
|
-
"
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
+
"description": "Clears the direct-item cache after slot content changes."
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
"kind": "field",
|
|
649
|
+
"name": "items",
|
|
650
|
+
"type": {
|
|
651
|
+
"text": "SkyAccordionItem[]"
|
|
645
652
|
},
|
|
646
|
-
"
|
|
653
|
+
"privacy": "private",
|
|
654
|
+
"description": "Returns direct `<sky-accordion-item>` children.\r\nUses `this.children`, so nested descendants are excluded.",
|
|
655
|
+
"readonly": true
|
|
647
656
|
}
|
|
648
657
|
],
|
|
649
658
|
"events": [
|
|
650
659
|
{
|
|
651
|
-
"name": "accordion-toggle",
|
|
652
660
|
"type": {
|
|
653
|
-
"text": "CustomEvent<
|
|
661
|
+
"text": "CustomEvent<SkyAccordionToggleEventDetail>"
|
|
654
662
|
},
|
|
655
|
-
"description": "Emitted
|
|
663
|
+
"description": "Emitted by a direct child item when its open state changes; used by the container to enforce `single-open` behavior.",
|
|
664
|
+
"name": "accordion-toggle"
|
|
656
665
|
}
|
|
657
666
|
],
|
|
658
667
|
"attributes": [
|
|
659
668
|
{
|
|
660
|
-
"name": "
|
|
669
|
+
"name": "singleOpen",
|
|
661
670
|
"type": {
|
|
662
671
|
"text": "boolean"
|
|
663
672
|
},
|
|
664
673
|
"default": "false",
|
|
665
|
-
"description": "
|
|
666
|
-
"fieldName": "
|
|
674
|
+
"description": "Allows at most one direct item to remain open at a time.",
|
|
675
|
+
"fieldName": "singleOpen"
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"name": "variant",
|
|
679
|
+
"type": {
|
|
680
|
+
"text": "SkyAccordionVariant"
|
|
681
|
+
},
|
|
682
|
+
"default": "\"solid\"",
|
|
683
|
+
"description": "Visual presentation variant for the accordion container.",
|
|
684
|
+
"fieldName": "variant"
|
|
667
685
|
},
|
|
668
686
|
{
|
|
669
687
|
"name": "disabled",
|
|
@@ -671,61 +689,253 @@
|
|
|
671
689
|
"text": "boolean"
|
|
672
690
|
},
|
|
673
691
|
"default": "false",
|
|
674
|
-
"description": "
|
|
692
|
+
"description": "Disables user interaction for the entire accordion.",
|
|
675
693
|
"fieldName": "disabled"
|
|
676
694
|
},
|
|
677
695
|
{
|
|
678
|
-
"name": "
|
|
696
|
+
"name": "label",
|
|
697
|
+
"type": {
|
|
698
|
+
"text": "string"
|
|
699
|
+
},
|
|
700
|
+
"default": "\"\"",
|
|
701
|
+
"description": "Accessible name applied to the group via `aria-label`.",
|
|
702
|
+
"fieldName": "label"
|
|
703
|
+
}
|
|
704
|
+
],
|
|
705
|
+
"superclass": {
|
|
706
|
+
"name": "LitElement",
|
|
707
|
+
"package": "lit"
|
|
708
|
+
},
|
|
709
|
+
"tagName": "sky-accordion",
|
|
710
|
+
"customElement": true,
|
|
711
|
+
"summary": "Container that manages direct `<sky-accordion-item>` children, open-state coordination, and keyboard navigation."
|
|
712
|
+
}
|
|
713
|
+
],
|
|
714
|
+
"exports": [
|
|
715
|
+
{
|
|
716
|
+
"kind": "js",
|
|
717
|
+
"name": "SkyAccordion",
|
|
718
|
+
"declaration": {
|
|
719
|
+
"name": "SkyAccordion",
|
|
720
|
+
"module": "src/sky-accordion/sky-accordion.ts"
|
|
721
|
+
}
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"kind": "custom-element-definition",
|
|
725
|
+
"name": "sky-accordion",
|
|
726
|
+
"declaration": {
|
|
727
|
+
"name": "SkyAccordion",
|
|
728
|
+
"module": "src/sky-accordion/sky-accordion.ts"
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
]
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
"kind": "javascript-module",
|
|
735
|
+
"path": "src/sky-appbar/sky-appbar.ts",
|
|
736
|
+
"declarations": [
|
|
737
|
+
{
|
|
738
|
+
"kind": "class",
|
|
739
|
+
"description": "",
|
|
740
|
+
"name": "SkyAppbar",
|
|
741
|
+
"cssParts": [
|
|
742
|
+
{
|
|
743
|
+
"description": "Wrapper that contains the leading slot, title, and actions.",
|
|
744
|
+
"name": "content"
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
"description": "Container for the leading slot (e.g. menu button).",
|
|
748
|
+
"name": "leading"
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
"description": "The title area (contains .title-text with the title string).",
|
|
752
|
+
"name": "title"
|
|
753
|
+
},
|
|
754
|
+
{
|
|
755
|
+
"description": "The trailing actions container.",
|
|
756
|
+
"name": "actions"
|
|
757
|
+
}
|
|
758
|
+
],
|
|
759
|
+
"slots": [
|
|
760
|
+
{
|
|
761
|
+
"description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
|
|
762
|
+
"name": "button"
|
|
763
|
+
},
|
|
764
|
+
{
|
|
765
|
+
"description": "Trailing actions (icons/buttons). This is the default slot.",
|
|
766
|
+
"name": ""
|
|
767
|
+
}
|
|
768
|
+
],
|
|
769
|
+
"members": [
|
|
770
|
+
{
|
|
771
|
+
"kind": "field",
|
|
772
|
+
"name": "dependencies",
|
|
773
|
+
"type": {
|
|
774
|
+
"text": "Record<string, CustomElementConstructor>"
|
|
775
|
+
},
|
|
776
|
+
"static": true,
|
|
777
|
+
"default": "{ \"sky-icon\": SkyIcon, }"
|
|
778
|
+
},
|
|
779
|
+
{
|
|
780
|
+
"kind": "field",
|
|
781
|
+
"name": "title",
|
|
782
|
+
"type": {
|
|
783
|
+
"text": "string"
|
|
784
|
+
},
|
|
785
|
+
"default": "\"App Bar\"",
|
|
786
|
+
"description": "Title text displayed in the app bar.",
|
|
787
|
+
"attribute": "title"
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"kind": "field",
|
|
791
|
+
"name": "color",
|
|
792
|
+
"type": {
|
|
793
|
+
"text": "string"
|
|
794
|
+
},
|
|
795
|
+
"default": "\"default\"",
|
|
796
|
+
"description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
|
|
797
|
+
"attribute": "color"
|
|
798
|
+
},
|
|
799
|
+
{
|
|
800
|
+
"kind": "field",
|
|
801
|
+
"name": "url",
|
|
802
|
+
"type": {
|
|
803
|
+
"text": "string"
|
|
804
|
+
},
|
|
805
|
+
"default": "\"\"",
|
|
806
|
+
"description": "Background image URL.",
|
|
807
|
+
"attribute": "url"
|
|
808
|
+
},
|
|
809
|
+
{
|
|
810
|
+
"kind": "field",
|
|
811
|
+
"name": "banner",
|
|
812
|
+
"type": {
|
|
813
|
+
"text": "boolean"
|
|
814
|
+
},
|
|
815
|
+
"default": "true",
|
|
816
|
+
"description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
|
|
817
|
+
"attribute": "banner"
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"kind": "field",
|
|
821
|
+
"name": "dense",
|
|
822
|
+
"type": {
|
|
823
|
+
"text": "boolean"
|
|
824
|
+
},
|
|
825
|
+
"default": "false",
|
|
826
|
+
"description": "Enables compact vertical spacing.",
|
|
827
|
+
"attribute": "dense"
|
|
828
|
+
},
|
|
829
|
+
{
|
|
830
|
+
"kind": "field",
|
|
831
|
+
"name": "elevated",
|
|
832
|
+
"type": {
|
|
833
|
+
"text": "boolean"
|
|
834
|
+
},
|
|
835
|
+
"default": "false",
|
|
836
|
+
"description": "Applies elevated shadow styling.",
|
|
837
|
+
"attribute": "elevated"
|
|
838
|
+
},
|
|
839
|
+
{
|
|
840
|
+
"kind": "field",
|
|
841
|
+
"name": "leadingLabel",
|
|
842
|
+
"type": {
|
|
843
|
+
"text": "string"
|
|
844
|
+
},
|
|
845
|
+
"default": "\"Open menu\"",
|
|
846
|
+
"description": "Accessible label for default leading button fallback.",
|
|
847
|
+
"attribute": "leadingLabel"
|
|
848
|
+
}
|
|
849
|
+
],
|
|
850
|
+
"attributes": [
|
|
851
|
+
{
|
|
852
|
+
"name": "title",
|
|
853
|
+
"type": {
|
|
854
|
+
"text": "string"
|
|
855
|
+
},
|
|
856
|
+
"default": "\"App Bar\"",
|
|
857
|
+
"description": "Title text displayed in the app bar.",
|
|
858
|
+
"fieldName": "title"
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"name": "color",
|
|
862
|
+
"type": {
|
|
863
|
+
"text": "string"
|
|
864
|
+
},
|
|
865
|
+
"default": "\"default\"",
|
|
866
|
+
"description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
|
|
867
|
+
"fieldName": "color"
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
"name": "url",
|
|
871
|
+
"type": {
|
|
872
|
+
"text": "string"
|
|
873
|
+
},
|
|
874
|
+
"default": "\"\"",
|
|
875
|
+
"description": "Background image URL.",
|
|
876
|
+
"fieldName": "url"
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"name": "banner",
|
|
880
|
+
"type": {
|
|
881
|
+
"text": "boolean"
|
|
882
|
+
},
|
|
883
|
+
"default": "true",
|
|
884
|
+
"description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
|
|
885
|
+
"fieldName": "banner"
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"name": "dense",
|
|
679
889
|
"type": {
|
|
680
|
-
"text": "
|
|
890
|
+
"text": "boolean"
|
|
681
891
|
},
|
|
682
|
-
"default": "
|
|
683
|
-
"description": "
|
|
684
|
-
"fieldName": "
|
|
892
|
+
"default": "false",
|
|
893
|
+
"description": "Enables compact vertical spacing.",
|
|
894
|
+
"fieldName": "dense"
|
|
685
895
|
},
|
|
686
896
|
{
|
|
687
|
-
"name": "
|
|
897
|
+
"name": "elevated",
|
|
688
898
|
"type": {
|
|
689
|
-
"text": "
|
|
899
|
+
"text": "boolean"
|
|
690
900
|
},
|
|
691
|
-
"default": "
|
|
692
|
-
"description": "
|
|
693
|
-
"fieldName": "
|
|
901
|
+
"default": "false",
|
|
902
|
+
"description": "Applies elevated shadow styling.",
|
|
903
|
+
"fieldName": "elevated"
|
|
694
904
|
},
|
|
695
905
|
{
|
|
696
|
-
"name": "
|
|
906
|
+
"name": "leadingLabel",
|
|
697
907
|
"type": {
|
|
698
908
|
"text": "string"
|
|
699
909
|
},
|
|
700
|
-
"default": "\"
|
|
701
|
-
"description": "
|
|
702
|
-
"fieldName": "
|
|
910
|
+
"default": "\"Open menu\"",
|
|
911
|
+
"description": "Accessible label for default leading button fallback.",
|
|
912
|
+
"fieldName": "leadingLabel"
|
|
703
913
|
}
|
|
704
914
|
],
|
|
705
915
|
"superclass": {
|
|
706
916
|
"name": "LitElement",
|
|
707
917
|
"package": "lit"
|
|
708
918
|
},
|
|
709
|
-
"tagName": "sky-
|
|
919
|
+
"tagName": "sky-appbar",
|
|
710
920
|
"customElement": true,
|
|
711
|
-
"summary": "
|
|
921
|
+
"summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
|
|
712
922
|
}
|
|
713
923
|
],
|
|
714
924
|
"exports": [
|
|
715
925
|
{
|
|
716
926
|
"kind": "js",
|
|
717
|
-
"name": "
|
|
927
|
+
"name": "SkyAppbar",
|
|
718
928
|
"declaration": {
|
|
719
|
-
"name": "
|
|
720
|
-
"module": "src/sky-
|
|
929
|
+
"name": "SkyAppbar",
|
|
930
|
+
"module": "src/sky-appbar/sky-appbar.ts"
|
|
721
931
|
}
|
|
722
932
|
},
|
|
723
933
|
{
|
|
724
934
|
"kind": "custom-element-definition",
|
|
725
|
-
"name": "sky-
|
|
935
|
+
"name": "sky-appbar",
|
|
726
936
|
"declaration": {
|
|
727
|
-
"name": "
|
|
728
|
-
"module": "src/sky-
|
|
937
|
+
"name": "SkyAppbar",
|
|
938
|
+
"module": "src/sky-appbar/sky-appbar.ts"
|
|
729
939
|
}
|
|
730
940
|
}
|
|
731
941
|
]
|
|
@@ -1486,276 +1696,66 @@
|
|
|
1486
1696
|
"fieldName": "outlineOffset"
|
|
1487
1697
|
},
|
|
1488
1698
|
{
|
|
1489
|
-
"name": "loading",
|
|
1490
|
-
"type": {
|
|
1491
|
-
"text": "boolean"
|
|
1492
|
-
},
|
|
1493
|
-
"default": "false",
|
|
1494
|
-
"description": "Shows loading overlay when true.",
|
|
1495
|
-
"fieldName": "loading"
|
|
1496
|
-
},
|
|
1497
|
-
{
|
|
1498
|
-
"name": "disabled",
|
|
1499
|
-
"type": {
|
|
1500
|
-
"text": "boolean"
|
|
1501
|
-
},
|
|
1502
|
-
"default": "false",
|
|
1503
|
-
"description": "Dims and disables pointer interactions.",
|
|
1504
|
-
"fieldName": "disabled"
|
|
1505
|
-
},
|
|
1506
|
-
{
|
|
1507
|
-
"name": "interactive",
|
|
1508
|
-
"type": {
|
|
1509
|
-
"text": "boolean"
|
|
1510
|
-
},
|
|
1511
|
-
"default": "false",
|
|
1512
|
-
"description": "Enables interactive behavior with keyboard/click activation.",
|
|
1513
|
-
"fieldName": "interactive"
|
|
1514
|
-
},
|
|
1515
|
-
{
|
|
1516
|
-
"name": "shadow",
|
|
1517
|
-
"type": {
|
|
1518
|
-
"text": "boolean"
|
|
1519
|
-
},
|
|
1520
|
-
"default": "false",
|
|
1521
|
-
"description": "When true, applies glass background, border, and elevation; default is a clean avatar.",
|
|
1522
|
-
"fieldName": "shadow"
|
|
1523
|
-
}
|
|
1524
|
-
],
|
|
1525
|
-
"superclass": {
|
|
1526
|
-
"name": "LitElement",
|
|
1527
|
-
"package": "lit"
|
|
1528
|
-
},
|
|
1529
|
-
"tagName": "sky-avatar",
|
|
1530
|
-
"customElement": true,
|
|
1531
|
-
"summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
|
|
1532
|
-
}
|
|
1533
|
-
],
|
|
1534
|
-
"exports": [
|
|
1535
|
-
{
|
|
1536
|
-
"kind": "js",
|
|
1537
|
-
"name": "SkyAvatar",
|
|
1538
|
-
"declaration": {
|
|
1539
|
-
"name": "SkyAvatar",
|
|
1540
|
-
"module": "src/sky-avatar/sky-avatar.ts"
|
|
1541
|
-
}
|
|
1542
|
-
},
|
|
1543
|
-
{
|
|
1544
|
-
"kind": "custom-element-definition",
|
|
1545
|
-
"name": "sky-avatar",
|
|
1546
|
-
"declaration": {
|
|
1547
|
-
"name": "SkyAvatar",
|
|
1548
|
-
"module": "src/sky-avatar/sky-avatar.ts"
|
|
1549
|
-
}
|
|
1550
|
-
}
|
|
1551
|
-
]
|
|
1552
|
-
},
|
|
1553
|
-
{
|
|
1554
|
-
"kind": "javascript-module",
|
|
1555
|
-
"path": "src/sky-appbar/sky-appbar.ts",
|
|
1556
|
-
"declarations": [
|
|
1557
|
-
{
|
|
1558
|
-
"kind": "class",
|
|
1559
|
-
"description": "",
|
|
1560
|
-
"name": "SkyAppbar",
|
|
1561
|
-
"cssParts": [
|
|
1562
|
-
{
|
|
1563
|
-
"description": "Wrapper that contains the leading slot, title, and actions.",
|
|
1564
|
-
"name": "content"
|
|
1565
|
-
},
|
|
1566
|
-
{
|
|
1567
|
-
"description": "Container for the leading slot (e.g. menu button).",
|
|
1568
|
-
"name": "leading"
|
|
1569
|
-
},
|
|
1570
|
-
{
|
|
1571
|
-
"description": "The title area (contains .title-text with the title string).",
|
|
1572
|
-
"name": "title"
|
|
1573
|
-
},
|
|
1574
|
-
{
|
|
1575
|
-
"description": "The trailing actions container.",
|
|
1576
|
-
"name": "actions"
|
|
1577
|
-
}
|
|
1578
|
-
],
|
|
1579
|
-
"slots": [
|
|
1580
|
-
{
|
|
1581
|
-
"description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
|
|
1582
|
-
"name": "button"
|
|
1583
|
-
},
|
|
1584
|
-
{
|
|
1585
|
-
"description": "Trailing actions (icons/buttons). This is the default slot.",
|
|
1586
|
-
"name": ""
|
|
1587
|
-
}
|
|
1588
|
-
],
|
|
1589
|
-
"members": [
|
|
1590
|
-
{
|
|
1591
|
-
"kind": "field",
|
|
1592
|
-
"name": "dependencies",
|
|
1593
|
-
"type": {
|
|
1594
|
-
"text": "Record<string, CustomElementConstructor>"
|
|
1595
|
-
},
|
|
1596
|
-
"static": true,
|
|
1597
|
-
"default": "{ \"sky-icon\": SkyIcon, }"
|
|
1598
|
-
},
|
|
1599
|
-
{
|
|
1600
|
-
"kind": "field",
|
|
1601
|
-
"name": "title",
|
|
1602
|
-
"type": {
|
|
1603
|
-
"text": "string"
|
|
1604
|
-
},
|
|
1605
|
-
"default": "\"App Bar\"",
|
|
1606
|
-
"description": "Title text displayed in the app bar.",
|
|
1607
|
-
"attribute": "title"
|
|
1608
|
-
},
|
|
1609
|
-
{
|
|
1610
|
-
"kind": "field",
|
|
1611
|
-
"name": "color",
|
|
1612
|
-
"type": {
|
|
1613
|
-
"text": "string"
|
|
1614
|
-
},
|
|
1615
|
-
"default": "\"default\"",
|
|
1616
|
-
"description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
|
|
1617
|
-
"attribute": "color"
|
|
1618
|
-
},
|
|
1619
|
-
{
|
|
1620
|
-
"kind": "field",
|
|
1621
|
-
"name": "url",
|
|
1622
|
-
"type": {
|
|
1623
|
-
"text": "string"
|
|
1624
|
-
},
|
|
1625
|
-
"default": "\"\"",
|
|
1626
|
-
"description": "Background image URL.",
|
|
1627
|
-
"attribute": "url"
|
|
1628
|
-
},
|
|
1629
|
-
{
|
|
1630
|
-
"kind": "field",
|
|
1631
|
-
"name": "banner",
|
|
1632
|
-
"type": {
|
|
1633
|
-
"text": "boolean"
|
|
1634
|
-
},
|
|
1635
|
-
"default": "true",
|
|
1636
|
-
"description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
|
|
1637
|
-
"attribute": "banner"
|
|
1638
|
-
},
|
|
1639
|
-
{
|
|
1640
|
-
"kind": "field",
|
|
1641
|
-
"name": "dense",
|
|
1642
|
-
"type": {
|
|
1643
|
-
"text": "boolean"
|
|
1644
|
-
},
|
|
1645
|
-
"default": "false",
|
|
1646
|
-
"description": "Enables compact vertical spacing.",
|
|
1647
|
-
"attribute": "dense"
|
|
1648
|
-
},
|
|
1649
|
-
{
|
|
1650
|
-
"kind": "field",
|
|
1651
|
-
"name": "elevated",
|
|
1652
|
-
"type": {
|
|
1653
|
-
"text": "boolean"
|
|
1654
|
-
},
|
|
1655
|
-
"default": "false",
|
|
1656
|
-
"description": "Applies elevated shadow styling.",
|
|
1657
|
-
"attribute": "elevated"
|
|
1658
|
-
},
|
|
1659
|
-
{
|
|
1660
|
-
"kind": "field",
|
|
1661
|
-
"name": "leadingLabel",
|
|
1662
|
-
"type": {
|
|
1663
|
-
"text": "string"
|
|
1664
|
-
},
|
|
1665
|
-
"default": "\"Open menu\"",
|
|
1666
|
-
"description": "Accessible label for default leading button fallback.",
|
|
1667
|
-
"attribute": "leadingLabel"
|
|
1668
|
-
}
|
|
1669
|
-
],
|
|
1670
|
-
"attributes": [
|
|
1671
|
-
{
|
|
1672
|
-
"name": "title",
|
|
1673
|
-
"type": {
|
|
1674
|
-
"text": "string"
|
|
1675
|
-
},
|
|
1676
|
-
"default": "\"App Bar\"",
|
|
1677
|
-
"description": "Title text displayed in the app bar.",
|
|
1678
|
-
"fieldName": "title"
|
|
1679
|
-
},
|
|
1680
|
-
{
|
|
1681
|
-
"name": "color",
|
|
1682
|
-
"type": {
|
|
1683
|
-
"text": "string"
|
|
1684
|
-
},
|
|
1685
|
-
"default": "\"default\"",
|
|
1686
|
-
"description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
|
|
1687
|
-
"fieldName": "color"
|
|
1688
|
-
},
|
|
1689
|
-
{
|
|
1690
|
-
"name": "url",
|
|
1691
|
-
"type": {
|
|
1692
|
-
"text": "string"
|
|
1693
|
-
},
|
|
1694
|
-
"default": "\"\"",
|
|
1695
|
-
"description": "Background image URL.",
|
|
1696
|
-
"fieldName": "url"
|
|
1697
|
-
},
|
|
1698
|
-
{
|
|
1699
|
-
"name": "banner",
|
|
1699
|
+
"name": "loading",
|
|
1700
1700
|
"type": {
|
|
1701
1701
|
"text": "boolean"
|
|
1702
1702
|
},
|
|
1703
|
-
"default": "
|
|
1704
|
-
"description": "
|
|
1705
|
-
"fieldName": "
|
|
1703
|
+
"default": "false",
|
|
1704
|
+
"description": "Shows loading overlay when true.",
|
|
1705
|
+
"fieldName": "loading"
|
|
1706
1706
|
},
|
|
1707
1707
|
{
|
|
1708
|
-
"name": "
|
|
1708
|
+
"name": "disabled",
|
|
1709
1709
|
"type": {
|
|
1710
1710
|
"text": "boolean"
|
|
1711
1711
|
},
|
|
1712
1712
|
"default": "false",
|
|
1713
|
-
"description": "
|
|
1714
|
-
"fieldName": "
|
|
1713
|
+
"description": "Dims and disables pointer interactions.",
|
|
1714
|
+
"fieldName": "disabled"
|
|
1715
1715
|
},
|
|
1716
1716
|
{
|
|
1717
|
-
"name": "
|
|
1717
|
+
"name": "interactive",
|
|
1718
1718
|
"type": {
|
|
1719
1719
|
"text": "boolean"
|
|
1720
1720
|
},
|
|
1721
1721
|
"default": "false",
|
|
1722
|
-
"description": "
|
|
1723
|
-
"fieldName": "
|
|
1722
|
+
"description": "Enables interactive behavior with keyboard/click activation.",
|
|
1723
|
+
"fieldName": "interactive"
|
|
1724
1724
|
},
|
|
1725
1725
|
{
|
|
1726
|
-
"name": "
|
|
1726
|
+
"name": "shadow",
|
|
1727
1727
|
"type": {
|
|
1728
|
-
"text": "
|
|
1728
|
+
"text": "boolean"
|
|
1729
1729
|
},
|
|
1730
|
-
"default": "
|
|
1731
|
-
"description": "
|
|
1732
|
-
"fieldName": "
|
|
1730
|
+
"default": "false",
|
|
1731
|
+
"description": "When true, applies glass background, border, and elevation; default is a clean avatar.",
|
|
1732
|
+
"fieldName": "shadow"
|
|
1733
1733
|
}
|
|
1734
1734
|
],
|
|
1735
1735
|
"superclass": {
|
|
1736
1736
|
"name": "LitElement",
|
|
1737
1737
|
"package": "lit"
|
|
1738
1738
|
},
|
|
1739
|
-
"tagName": "sky-
|
|
1739
|
+
"tagName": "sky-avatar",
|
|
1740
1740
|
"customElement": true,
|
|
1741
|
-
"summary": "
|
|
1741
|
+
"summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
|
|
1742
1742
|
}
|
|
1743
1743
|
],
|
|
1744
1744
|
"exports": [
|
|
1745
1745
|
{
|
|
1746
1746
|
"kind": "js",
|
|
1747
|
-
"name": "
|
|
1747
|
+
"name": "SkyAvatar",
|
|
1748
1748
|
"declaration": {
|
|
1749
|
-
"name": "
|
|
1750
|
-
"module": "src/sky-
|
|
1749
|
+
"name": "SkyAvatar",
|
|
1750
|
+
"module": "src/sky-avatar/sky-avatar.ts"
|
|
1751
1751
|
}
|
|
1752
1752
|
},
|
|
1753
1753
|
{
|
|
1754
1754
|
"kind": "custom-element-definition",
|
|
1755
|
-
"name": "sky-
|
|
1755
|
+
"name": "sky-avatar",
|
|
1756
1756
|
"declaration": {
|
|
1757
|
-
"name": "
|
|
1758
|
-
"module": "src/sky-
|
|
1757
|
+
"name": "SkyAvatar",
|
|
1758
|
+
"module": "src/sky-avatar/sky-avatar.ts"
|
|
1759
1759
|
}
|
|
1760
1760
|
}
|
|
1761
1761
|
]
|
|
@@ -8999,269 +8999,63 @@
|
|
|
8999
8999
|
"name": "headerPadding",
|
|
9000
9000
|
"type": {
|
|
9001
9001
|
"text": "SkyDialogPadding"
|
|
9002
|
-
},
|
|
9003
|
-
"default": "\"sm\"",
|
|
9004
|
-
"description": "Header padding token.",
|
|
9005
|
-
"fieldName": "headerPadding"
|
|
9006
|
-
},
|
|
9007
|
-
{
|
|
9008
|
-
"name": "bodyPadding",
|
|
9009
|
-
"type": {
|
|
9010
|
-
"text": "SkyDialogPadding"
|
|
9011
|
-
},
|
|
9012
|
-
"default": "\"sm\"",
|
|
9013
|
-
"description": "Body padding token.",
|
|
9014
|
-
"fieldName": "bodyPadding"
|
|
9015
|
-
},
|
|
9016
|
-
{
|
|
9017
|
-
"name": "footerPadding",
|
|
9018
|
-
"type": {
|
|
9019
|
-
"text": "SkyDialogPadding"
|
|
9020
|
-
},
|
|
9021
|
-
"default": "\"sm\"",
|
|
9022
|
-
"description": "Footer padding token.",
|
|
9023
|
-
"fieldName": "footerPadding"
|
|
9024
|
-
},
|
|
9025
|
-
{
|
|
9026
|
-
"name": "highlightOnOutsideClick",
|
|
9027
|
-
"type": {
|
|
9028
|
-
"text": "boolean"
|
|
9029
|
-
},
|
|
9030
|
-
"default": "true",
|
|
9031
|
-
"description": "Enables highlight animation on rejected outside click.",
|
|
9032
|
-
"fieldName": "highlightOnOutsideClick"
|
|
9033
|
-
}
|
|
9034
|
-
],
|
|
9035
|
-
"superclass": {
|
|
9036
|
-
"name": "LitElement",
|
|
9037
|
-
"package": "lit"
|
|
9038
|
-
},
|
|
9039
|
-
"tagName": "sky-dialog",
|
|
9040
|
-
"customElement": true,
|
|
9041
|
-
"summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
|
|
9042
|
-
}
|
|
9043
|
-
],
|
|
9044
|
-
"exports": [
|
|
9045
|
-
{
|
|
9046
|
-
"kind": "js",
|
|
9047
|
-
"name": "SkyDialog",
|
|
9048
|
-
"declaration": {
|
|
9049
|
-
"name": "SkyDialog",
|
|
9050
|
-
"module": "src/sky-dialog/sky-dialog.ts"
|
|
9051
|
-
}
|
|
9052
|
-
},
|
|
9053
|
-
{
|
|
9054
|
-
"kind": "custom-element-definition",
|
|
9055
|
-
"name": "sky-dialog",
|
|
9056
|
-
"declaration": {
|
|
9057
|
-
"name": "SkyDialog",
|
|
9058
|
-
"module": "src/sky-dialog/sky-dialog.ts"
|
|
9059
|
-
}
|
|
9060
|
-
}
|
|
9061
|
-
]
|
|
9062
|
-
},
|
|
9063
|
-
{
|
|
9064
|
-
"kind": "javascript-module",
|
|
9065
|
-
"path": "src/sky-divider/sky-divider.ts",
|
|
9066
|
-
"declarations": [
|
|
9067
|
-
{
|
|
9068
|
-
"kind": "class",
|
|
9069
|
-
"description": "",
|
|
9070
|
-
"name": "SkyDivider",
|
|
9071
|
-
"cssProperties": [
|
|
9072
|
-
{
|
|
9073
|
-
"description": "CSS custom property for divider color.",
|
|
9074
|
-
"name": "--divider-color"
|
|
9075
|
-
},
|
|
9076
|
-
{
|
|
9077
|
-
"description": "CSS custom property for divider thickness.",
|
|
9078
|
-
"name": "--divider-thickness"
|
|
9079
|
-
},
|
|
9080
|
-
{
|
|
9081
|
-
"description": "CSS custom property for divider margin.",
|
|
9082
|
-
"name": "--divider-margin"
|
|
9083
|
-
},
|
|
9084
|
-
{
|
|
9085
|
-
"description": "CSS custom property for vertical divider height.",
|
|
9086
|
-
"name": "--divider-height"
|
|
9087
|
-
}
|
|
9088
|
-
],
|
|
9089
|
-
"cssParts": [
|
|
9090
|
-
{
|
|
9091
|
-
"description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
|
|
9092
|
-
"name": "divider"
|
|
9093
|
-
}
|
|
9094
|
-
],
|
|
9095
|
-
"members": [
|
|
9096
|
-
{
|
|
9097
|
-
"kind": "field",
|
|
9098
|
-
"name": "color",
|
|
9099
|
-
"type": {
|
|
9100
|
-
"text": "string"
|
|
9101
|
-
},
|
|
9102
|
-
"default": "\"muted\"",
|
|
9103
|
-
"description": "Divider color token or CSS color.",
|
|
9104
|
-
"privacy": "public",
|
|
9105
|
-
"attribute": "color"
|
|
9106
|
-
},
|
|
9107
|
-
{
|
|
9108
|
-
"kind": "field",
|
|
9109
|
-
"name": "thickness",
|
|
9110
|
-
"type": {
|
|
9111
|
-
"text": "string"
|
|
9112
|
-
},
|
|
9113
|
-
"default": "\"1px\"",
|
|
9114
|
-
"description": "Divider thickness (for example `1px` or `2px`).",
|
|
9115
|
-
"privacy": "public",
|
|
9116
|
-
"attribute": "thickness"
|
|
9117
|
-
},
|
|
9118
|
-
{
|
|
9119
|
-
"kind": "field",
|
|
9120
|
-
"name": "margin",
|
|
9121
|
-
"type": {
|
|
9122
|
-
"text": "string"
|
|
9123
|
-
},
|
|
9124
|
-
"default": "\"\"",
|
|
9125
|
-
"description": "Outer margin around the divider.",
|
|
9126
|
-
"privacy": "public",
|
|
9127
|
-
"attribute": "margin"
|
|
9128
|
-
},
|
|
9129
|
-
{
|
|
9130
|
-
"kind": "field",
|
|
9131
|
-
"name": "direction",
|
|
9132
|
-
"type": {
|
|
9133
|
-
"text": "SkyDividerDirection"
|
|
9134
|
-
},
|
|
9135
|
-
"default": "\"horizontal\"",
|
|
9136
|
-
"description": "Divider orientation.",
|
|
9137
|
-
"privacy": "public",
|
|
9138
|
-
"attribute": "direction"
|
|
9139
|
-
},
|
|
9140
|
-
{
|
|
9141
|
-
"kind": "field",
|
|
9142
|
-
"name": "inset",
|
|
9143
|
-
"type": {
|
|
9144
|
-
"text": "boolean"
|
|
9145
|
-
},
|
|
9146
|
-
"default": "false",
|
|
9147
|
-
"description": "Enables indented divider layout.",
|
|
9148
|
-
"privacy": "public",
|
|
9149
|
-
"attribute": "inset"
|
|
9150
|
-
},
|
|
9151
|
-
{
|
|
9152
|
-
"kind": "field",
|
|
9153
|
-
"name": "height",
|
|
9154
|
-
"type": {
|
|
9155
|
-
"text": "string"
|
|
9156
|
-
},
|
|
9157
|
-
"default": "\"100%\"",
|
|
9158
|
-
"description": "Height used for vertical orientation.",
|
|
9159
|
-
"privacy": "public",
|
|
9160
|
-
"attribute": "height"
|
|
9161
|
-
},
|
|
9162
|
-
{
|
|
9163
|
-
"kind": "method",
|
|
9164
|
-
"name": "getComputedColor",
|
|
9165
|
-
"privacy": "public",
|
|
9166
|
-
"return": {
|
|
9167
|
-
"type": {
|
|
9168
|
-
"text": ""
|
|
9169
|
-
}
|
|
9170
|
-
},
|
|
9171
|
-
"description": "Gets the current computed color of the divider."
|
|
9172
|
-
},
|
|
9173
|
-
{
|
|
9174
|
-
"kind": "method",
|
|
9175
|
-
"name": "getComputedThickness",
|
|
9176
|
-
"privacy": "public",
|
|
9177
|
-
"return": {
|
|
9178
|
-
"type": {
|
|
9179
|
-
"text": ""
|
|
9180
|
-
}
|
|
9181
|
-
},
|
|
9182
|
-
"description": "Gets the current computed thickness of the divider."
|
|
9183
|
-
}
|
|
9184
|
-
],
|
|
9185
|
-
"attributes": [
|
|
9186
|
-
{
|
|
9187
|
-
"name": "color",
|
|
9188
|
-
"type": {
|
|
9189
|
-
"text": "string"
|
|
9190
|
-
},
|
|
9191
|
-
"default": "\"muted\"",
|
|
9192
|
-
"description": "Divider color token or CSS color.",
|
|
9193
|
-
"fieldName": "color"
|
|
9194
|
-
},
|
|
9195
|
-
{
|
|
9196
|
-
"name": "thickness",
|
|
9197
|
-
"type": {
|
|
9198
|
-
"text": "string"
|
|
9199
|
-
},
|
|
9200
|
-
"default": "\"1px\"",
|
|
9201
|
-
"description": "Divider thickness (for example `1px` or `2px`).",
|
|
9202
|
-
"fieldName": "thickness"
|
|
9203
|
-
},
|
|
9204
|
-
{
|
|
9205
|
-
"name": "margin",
|
|
9206
|
-
"type": {
|
|
9207
|
-
"text": "string"
|
|
9208
|
-
},
|
|
9209
|
-
"default": "\"\"",
|
|
9210
|
-
"description": "Outer margin around the divider.",
|
|
9211
|
-
"fieldName": "margin"
|
|
9002
|
+
},
|
|
9003
|
+
"default": "\"sm\"",
|
|
9004
|
+
"description": "Header padding token.",
|
|
9005
|
+
"fieldName": "headerPadding"
|
|
9212
9006
|
},
|
|
9213
9007
|
{
|
|
9214
|
-
"name": "
|
|
9008
|
+
"name": "bodyPadding",
|
|
9215
9009
|
"type": {
|
|
9216
|
-
"text": "
|
|
9010
|
+
"text": "SkyDialogPadding"
|
|
9217
9011
|
},
|
|
9218
|
-
"default": "\"
|
|
9219
|
-
"description": "
|
|
9220
|
-
"fieldName": "
|
|
9012
|
+
"default": "\"sm\"",
|
|
9013
|
+
"description": "Body padding token.",
|
|
9014
|
+
"fieldName": "bodyPadding"
|
|
9221
9015
|
},
|
|
9222
9016
|
{
|
|
9223
|
-
"name": "
|
|
9017
|
+
"name": "footerPadding",
|
|
9224
9018
|
"type": {
|
|
9225
|
-
"text": "
|
|
9019
|
+
"text": "SkyDialogPadding"
|
|
9226
9020
|
},
|
|
9227
|
-
"default": "
|
|
9228
|
-
"description": "
|
|
9229
|
-
"fieldName": "
|
|
9021
|
+
"default": "\"sm\"",
|
|
9022
|
+
"description": "Footer padding token.",
|
|
9023
|
+
"fieldName": "footerPadding"
|
|
9230
9024
|
},
|
|
9231
9025
|
{
|
|
9232
|
-
"name": "
|
|
9026
|
+
"name": "highlightOnOutsideClick",
|
|
9233
9027
|
"type": {
|
|
9234
|
-
"text": "
|
|
9028
|
+
"text": "boolean"
|
|
9235
9029
|
},
|
|
9236
|
-
"default": "
|
|
9237
|
-
"description": "
|
|
9238
|
-
"fieldName": "
|
|
9030
|
+
"default": "true",
|
|
9031
|
+
"description": "Enables highlight animation on rejected outside click.",
|
|
9032
|
+
"fieldName": "highlightOnOutsideClick"
|
|
9239
9033
|
}
|
|
9240
9034
|
],
|
|
9241
9035
|
"superclass": {
|
|
9242
9036
|
"name": "LitElement",
|
|
9243
9037
|
"package": "lit"
|
|
9244
9038
|
},
|
|
9245
|
-
"tagName": "sky-
|
|
9039
|
+
"tagName": "sky-dialog",
|
|
9246
9040
|
"customElement": true,
|
|
9247
|
-
"summary": "
|
|
9041
|
+
"summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
|
|
9248
9042
|
}
|
|
9249
9043
|
],
|
|
9250
9044
|
"exports": [
|
|
9251
9045
|
{
|
|
9252
9046
|
"kind": "js",
|
|
9253
|
-
"name": "
|
|
9047
|
+
"name": "SkyDialog",
|
|
9254
9048
|
"declaration": {
|
|
9255
|
-
"name": "
|
|
9256
|
-
"module": "src/sky-
|
|
9049
|
+
"name": "SkyDialog",
|
|
9050
|
+
"module": "src/sky-dialog/sky-dialog.ts"
|
|
9257
9051
|
}
|
|
9258
9052
|
},
|
|
9259
9053
|
{
|
|
9260
9054
|
"kind": "custom-element-definition",
|
|
9261
|
-
"name": "sky-
|
|
9055
|
+
"name": "sky-dialog",
|
|
9262
9056
|
"declaration": {
|
|
9263
|
-
"name": "
|
|
9264
|
-
"module": "src/sky-
|
|
9057
|
+
"name": "SkyDialog",
|
|
9058
|
+
"module": "src/sky-dialog/sky-dialog.ts"
|
|
9265
9059
|
}
|
|
9266
9060
|
}
|
|
9267
9061
|
]
|
|
@@ -9612,35 +9406,241 @@
|
|
|
9612
9406
|
"type": {
|
|
9613
9407
|
"text": "boolean"
|
|
9614
9408
|
},
|
|
9615
|
-
"default": "false",
|
|
9616
|
-
"description": "Enables separators in slotted header/footer content.",
|
|
9617
|
-
"fieldName": "separator"
|
|
9409
|
+
"default": "false",
|
|
9410
|
+
"description": "Enables separators in slotted header/footer content.",
|
|
9411
|
+
"fieldName": "separator"
|
|
9412
|
+
}
|
|
9413
|
+
],
|
|
9414
|
+
"superclass": {
|
|
9415
|
+
"name": "LitElement",
|
|
9416
|
+
"package": "lit"
|
|
9417
|
+
},
|
|
9418
|
+
"tagName": "sky-drawer",
|
|
9419
|
+
"customElement": true,
|
|
9420
|
+
"summary": "Slide-in drawer panel with optional overlay, keyboard dismissal, and viewport/parent scope modes."
|
|
9421
|
+
}
|
|
9422
|
+
],
|
|
9423
|
+
"exports": [
|
|
9424
|
+
{
|
|
9425
|
+
"kind": "js",
|
|
9426
|
+
"name": "SkyDrawer",
|
|
9427
|
+
"declaration": {
|
|
9428
|
+
"name": "SkyDrawer",
|
|
9429
|
+
"module": "src/sky-drawer/sky-drawer.ts"
|
|
9430
|
+
}
|
|
9431
|
+
},
|
|
9432
|
+
{
|
|
9433
|
+
"kind": "custom-element-definition",
|
|
9434
|
+
"name": "sky-drawer",
|
|
9435
|
+
"declaration": {
|
|
9436
|
+
"name": "SkyDrawer",
|
|
9437
|
+
"module": "src/sky-drawer/sky-drawer.ts"
|
|
9438
|
+
}
|
|
9439
|
+
}
|
|
9440
|
+
]
|
|
9441
|
+
},
|
|
9442
|
+
{
|
|
9443
|
+
"kind": "javascript-module",
|
|
9444
|
+
"path": "src/sky-divider/sky-divider.ts",
|
|
9445
|
+
"declarations": [
|
|
9446
|
+
{
|
|
9447
|
+
"kind": "class",
|
|
9448
|
+
"description": "",
|
|
9449
|
+
"name": "SkyDivider",
|
|
9450
|
+
"cssProperties": [
|
|
9451
|
+
{
|
|
9452
|
+
"description": "CSS custom property for divider color.",
|
|
9453
|
+
"name": "--divider-color"
|
|
9454
|
+
},
|
|
9455
|
+
{
|
|
9456
|
+
"description": "CSS custom property for divider thickness.",
|
|
9457
|
+
"name": "--divider-thickness"
|
|
9458
|
+
},
|
|
9459
|
+
{
|
|
9460
|
+
"description": "CSS custom property for divider margin.",
|
|
9461
|
+
"name": "--divider-margin"
|
|
9462
|
+
},
|
|
9463
|
+
{
|
|
9464
|
+
"description": "CSS custom property for vertical divider height.",
|
|
9465
|
+
"name": "--divider-height"
|
|
9466
|
+
}
|
|
9467
|
+
],
|
|
9468
|
+
"cssParts": [
|
|
9469
|
+
{
|
|
9470
|
+
"description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
|
|
9471
|
+
"name": "divider"
|
|
9472
|
+
}
|
|
9473
|
+
],
|
|
9474
|
+
"members": [
|
|
9475
|
+
{
|
|
9476
|
+
"kind": "field",
|
|
9477
|
+
"name": "color",
|
|
9478
|
+
"type": {
|
|
9479
|
+
"text": "string"
|
|
9480
|
+
},
|
|
9481
|
+
"default": "\"muted\"",
|
|
9482
|
+
"description": "Divider color token or CSS color.",
|
|
9483
|
+
"privacy": "public",
|
|
9484
|
+
"attribute": "color"
|
|
9485
|
+
},
|
|
9486
|
+
{
|
|
9487
|
+
"kind": "field",
|
|
9488
|
+
"name": "thickness",
|
|
9489
|
+
"type": {
|
|
9490
|
+
"text": "string"
|
|
9491
|
+
},
|
|
9492
|
+
"default": "\"1px\"",
|
|
9493
|
+
"description": "Divider thickness (for example `1px` or `2px`).",
|
|
9494
|
+
"privacy": "public",
|
|
9495
|
+
"attribute": "thickness"
|
|
9496
|
+
},
|
|
9497
|
+
{
|
|
9498
|
+
"kind": "field",
|
|
9499
|
+
"name": "margin",
|
|
9500
|
+
"type": {
|
|
9501
|
+
"text": "string"
|
|
9502
|
+
},
|
|
9503
|
+
"default": "\"\"",
|
|
9504
|
+
"description": "Outer margin around the divider.",
|
|
9505
|
+
"privacy": "public",
|
|
9506
|
+
"attribute": "margin"
|
|
9507
|
+
},
|
|
9508
|
+
{
|
|
9509
|
+
"kind": "field",
|
|
9510
|
+
"name": "direction",
|
|
9511
|
+
"type": {
|
|
9512
|
+
"text": "SkyDividerDirection"
|
|
9513
|
+
},
|
|
9514
|
+
"default": "\"horizontal\"",
|
|
9515
|
+
"description": "Divider orientation.",
|
|
9516
|
+
"privacy": "public",
|
|
9517
|
+
"attribute": "direction"
|
|
9518
|
+
},
|
|
9519
|
+
{
|
|
9520
|
+
"kind": "field",
|
|
9521
|
+
"name": "inset",
|
|
9522
|
+
"type": {
|
|
9523
|
+
"text": "boolean"
|
|
9524
|
+
},
|
|
9525
|
+
"default": "false",
|
|
9526
|
+
"description": "Enables indented divider layout.",
|
|
9527
|
+
"privacy": "public",
|
|
9528
|
+
"attribute": "inset"
|
|
9529
|
+
},
|
|
9530
|
+
{
|
|
9531
|
+
"kind": "field",
|
|
9532
|
+
"name": "height",
|
|
9533
|
+
"type": {
|
|
9534
|
+
"text": "string"
|
|
9535
|
+
},
|
|
9536
|
+
"default": "\"100%\"",
|
|
9537
|
+
"description": "Height used for vertical orientation.",
|
|
9538
|
+
"privacy": "public",
|
|
9539
|
+
"attribute": "height"
|
|
9540
|
+
},
|
|
9541
|
+
{
|
|
9542
|
+
"kind": "method",
|
|
9543
|
+
"name": "getComputedColor",
|
|
9544
|
+
"privacy": "public",
|
|
9545
|
+
"return": {
|
|
9546
|
+
"type": {
|
|
9547
|
+
"text": ""
|
|
9548
|
+
}
|
|
9549
|
+
},
|
|
9550
|
+
"description": "Gets the current computed color of the divider."
|
|
9551
|
+
},
|
|
9552
|
+
{
|
|
9553
|
+
"kind": "method",
|
|
9554
|
+
"name": "getComputedThickness",
|
|
9555
|
+
"privacy": "public",
|
|
9556
|
+
"return": {
|
|
9557
|
+
"type": {
|
|
9558
|
+
"text": ""
|
|
9559
|
+
}
|
|
9560
|
+
},
|
|
9561
|
+
"description": "Gets the current computed thickness of the divider."
|
|
9562
|
+
}
|
|
9563
|
+
],
|
|
9564
|
+
"attributes": [
|
|
9565
|
+
{
|
|
9566
|
+
"name": "color",
|
|
9567
|
+
"type": {
|
|
9568
|
+
"text": "string"
|
|
9569
|
+
},
|
|
9570
|
+
"default": "\"muted\"",
|
|
9571
|
+
"description": "Divider color token or CSS color.",
|
|
9572
|
+
"fieldName": "color"
|
|
9573
|
+
},
|
|
9574
|
+
{
|
|
9575
|
+
"name": "thickness",
|
|
9576
|
+
"type": {
|
|
9577
|
+
"text": "string"
|
|
9578
|
+
},
|
|
9579
|
+
"default": "\"1px\"",
|
|
9580
|
+
"description": "Divider thickness (for example `1px` or `2px`).",
|
|
9581
|
+
"fieldName": "thickness"
|
|
9582
|
+
},
|
|
9583
|
+
{
|
|
9584
|
+
"name": "margin",
|
|
9585
|
+
"type": {
|
|
9586
|
+
"text": "string"
|
|
9587
|
+
},
|
|
9588
|
+
"default": "\"\"",
|
|
9589
|
+
"description": "Outer margin around the divider.",
|
|
9590
|
+
"fieldName": "margin"
|
|
9591
|
+
},
|
|
9592
|
+
{
|
|
9593
|
+
"name": "direction",
|
|
9594
|
+
"type": {
|
|
9595
|
+
"text": "SkyDividerDirection"
|
|
9596
|
+
},
|
|
9597
|
+
"default": "\"horizontal\"",
|
|
9598
|
+
"description": "Divider orientation.",
|
|
9599
|
+
"fieldName": "direction"
|
|
9600
|
+
},
|
|
9601
|
+
{
|
|
9602
|
+
"name": "inset",
|
|
9603
|
+
"type": {
|
|
9604
|
+
"text": "boolean"
|
|
9605
|
+
},
|
|
9606
|
+
"default": "false",
|
|
9607
|
+
"description": "Enables indented divider layout.",
|
|
9608
|
+
"fieldName": "inset"
|
|
9609
|
+
},
|
|
9610
|
+
{
|
|
9611
|
+
"name": "height",
|
|
9612
|
+
"type": {
|
|
9613
|
+
"text": "string"
|
|
9614
|
+
},
|
|
9615
|
+
"default": "\"100%\"",
|
|
9616
|
+
"description": "Height used for vertical orientation.",
|
|
9617
|
+
"fieldName": "height"
|
|
9618
9618
|
}
|
|
9619
9619
|
],
|
|
9620
9620
|
"superclass": {
|
|
9621
9621
|
"name": "LitElement",
|
|
9622
9622
|
"package": "lit"
|
|
9623
9623
|
},
|
|
9624
|
-
"tagName": "sky-
|
|
9624
|
+
"tagName": "sky-divider",
|
|
9625
9625
|
"customElement": true,
|
|
9626
|
-
"summary": "
|
|
9626
|
+
"summary": "Visual separator component for horizontal and vertical layout separation."
|
|
9627
9627
|
}
|
|
9628
9628
|
],
|
|
9629
9629
|
"exports": [
|
|
9630
9630
|
{
|
|
9631
9631
|
"kind": "js",
|
|
9632
|
-
"name": "
|
|
9632
|
+
"name": "SkyDivider",
|
|
9633
9633
|
"declaration": {
|
|
9634
|
-
"name": "
|
|
9635
|
-
"module": "src/sky-
|
|
9634
|
+
"name": "SkyDivider",
|
|
9635
|
+
"module": "src/sky-divider/sky-divider.ts"
|
|
9636
9636
|
}
|
|
9637
9637
|
},
|
|
9638
9638
|
{
|
|
9639
9639
|
"kind": "custom-element-definition",
|
|
9640
|
-
"name": "sky-
|
|
9640
|
+
"name": "sky-divider",
|
|
9641
9641
|
"declaration": {
|
|
9642
|
-
"name": "
|
|
9643
|
-
"module": "src/sky-
|
|
9642
|
+
"name": "SkyDivider",
|
|
9643
|
+
"module": "src/sky-divider/sky-divider.ts"
|
|
9644
9644
|
}
|
|
9645
9645
|
}
|
|
9646
9646
|
]
|
|
@@ -10867,678 +10867,678 @@
|
|
|
10867
10867
|
},
|
|
10868
10868
|
{
|
|
10869
10869
|
"kind": "javascript-module",
|
|
10870
|
-
"path": "src/sky-
|
|
10870
|
+
"path": "src/sky-flexbar/sky-flexbar.ts",
|
|
10871
10871
|
"declarations": [
|
|
10872
10872
|
{
|
|
10873
10873
|
"kind": "class",
|
|
10874
10874
|
"description": "",
|
|
10875
|
-
"name": "
|
|
10875
|
+
"name": "SkyFlexbar",
|
|
10876
10876
|
"cssParts": [
|
|
10877
10877
|
{
|
|
10878
|
-
"description": "The flex container
|
|
10878
|
+
"description": "The outer flex container.",
|
|
10879
10879
|
"name": "container"
|
|
10880
|
+
},
|
|
10881
|
+
{
|
|
10882
|
+
"description": "The hamburger/ellipsis toggle button.",
|
|
10883
|
+
"name": "hamburger-button"
|
|
10884
|
+
},
|
|
10885
|
+
{
|
|
10886
|
+
"description": "The dropdown menu container.",
|
|
10887
|
+
"name": "menu"
|
|
10888
|
+
},
|
|
10889
|
+
{
|
|
10890
|
+
"description": "Wrapper inside the dropdown menu.",
|
|
10891
|
+
"name": "menu-inner"
|
|
10880
10892
|
}
|
|
10881
10893
|
],
|
|
10882
10894
|
"slots": [
|
|
10883
10895
|
{
|
|
10884
|
-
"description": "Default slot for
|
|
10896
|
+
"description": "Default slot for visible bar items. Apply `class=\"menu-parent\"` to each.",
|
|
10885
10897
|
"name": ""
|
|
10898
|
+
},
|
|
10899
|
+
{
|
|
10900
|
+
"description": "Receives items that overflow the main bar.",
|
|
10901
|
+
"name": "hamburger"
|
|
10886
10902
|
}
|
|
10887
10903
|
],
|
|
10888
10904
|
"members": [
|
|
10889
10905
|
{
|
|
10890
10906
|
"kind": "field",
|
|
10891
|
-
"name": "
|
|
10907
|
+
"name": "dependencies",
|
|
10892
10908
|
"type": {
|
|
10893
|
-
"text": "
|
|
10909
|
+
"text": "Record<string, CustomElementConstructor>"
|
|
10894
10910
|
},
|
|
10895
|
-
"
|
|
10896
|
-
"
|
|
10911
|
+
"static": true,
|
|
10912
|
+
"default": "{ \"sky-icon\": SkyIcon, }"
|
|
10913
|
+
},
|
|
10914
|
+
{
|
|
10915
|
+
"kind": "field",
|
|
10916
|
+
"name": "isHamburgerOpen",
|
|
10917
|
+
"type": {
|
|
10918
|
+
"text": "boolean"
|
|
10919
|
+
},
|
|
10920
|
+
"default": "false",
|
|
10921
|
+
"description": "Whether the overflow menu is open.",
|
|
10897
10922
|
"privacy": "public",
|
|
10898
|
-
"attribute": "
|
|
10923
|
+
"attribute": "isHamburgerOpen"
|
|
10899
10924
|
},
|
|
10900
10925
|
{
|
|
10901
10926
|
"kind": "field",
|
|
10902
|
-
"name": "
|
|
10927
|
+
"name": "isFullyHidden",
|
|
10903
10928
|
"type": {
|
|
10904
|
-
"text": "
|
|
10929
|
+
"text": "boolean"
|
|
10905
10930
|
},
|
|
10906
|
-
"default": "
|
|
10907
|
-
"description": "
|
|
10931
|
+
"default": "false",
|
|
10932
|
+
"description": "Whether all slotted items are currently overflowed.",
|
|
10908
10933
|
"privacy": "public",
|
|
10909
|
-
"attribute": "
|
|
10934
|
+
"attribute": "isFullyHidden"
|
|
10910
10935
|
},
|
|
10911
10936
|
{
|
|
10912
10937
|
"kind": "field",
|
|
10913
|
-
"name": "
|
|
10938
|
+
"name": "gapThreshold",
|
|
10914
10939
|
"type": {
|
|
10915
|
-
"text": "
|
|
10940
|
+
"text": "number"
|
|
10916
10941
|
},
|
|
10917
|
-
"default": "
|
|
10918
|
-
"description": "
|
|
10942
|
+
"default": "100",
|
|
10943
|
+
"description": "Reserved space in px used during overflow measurement.",
|
|
10919
10944
|
"privacy": "public",
|
|
10920
|
-
"attribute": "
|
|
10945
|
+
"attribute": "gapThreshold"
|
|
10921
10946
|
},
|
|
10922
10947
|
{
|
|
10923
10948
|
"kind": "field",
|
|
10924
|
-
"name": "
|
|
10949
|
+
"name": "flexDirection",
|
|
10925
10950
|
"type": {
|
|
10926
|
-
"text": "
|
|
10951
|
+
"text": "SkyFlexbarDirection"
|
|
10927
10952
|
},
|
|
10928
|
-
"default": "\"
|
|
10929
|
-
"description": "
|
|
10953
|
+
"default": "\"horizontal\"",
|
|
10954
|
+
"description": "Current layout direction.",
|
|
10930
10955
|
"privacy": "public",
|
|
10931
|
-
"attribute": "
|
|
10956
|
+
"attribute": "flexDirection",
|
|
10957
|
+
"reflects": true
|
|
10932
10958
|
},
|
|
10933
10959
|
{
|
|
10934
10960
|
"kind": "field",
|
|
10935
|
-
"name": "
|
|
10961
|
+
"name": "stackAt",
|
|
10936
10962
|
"type": {
|
|
10937
|
-
"text": "
|
|
10963
|
+
"text": "number"
|
|
10938
10964
|
},
|
|
10939
|
-
"default": "
|
|
10940
|
-
"description": "
|
|
10965
|
+
"default": "500",
|
|
10966
|
+
"description": "Width threshold (px) for switching to vertical mode; `0` disables.",
|
|
10941
10967
|
"privacy": "public",
|
|
10942
|
-
"attribute": "
|
|
10968
|
+
"attribute": "stackAt"
|
|
10943
10969
|
},
|
|
10944
10970
|
{
|
|
10945
10971
|
"kind": "field",
|
|
10946
|
-
"name": "
|
|
10972
|
+
"name": "partialIcon",
|
|
10947
10973
|
"type": {
|
|
10948
10974
|
"text": "string"
|
|
10949
10975
|
},
|
|
10950
|
-
"default": "\"
|
|
10951
|
-
"description": "
|
|
10976
|
+
"default": "\"ion:ellipsis-horizontal\"",
|
|
10977
|
+
"description": "Icon shown when only some items overflow.",
|
|
10952
10978
|
"privacy": "public",
|
|
10953
|
-
"attribute": "
|
|
10979
|
+
"attribute": "partialIcon"
|
|
10954
10980
|
},
|
|
10955
10981
|
{
|
|
10956
10982
|
"kind": "field",
|
|
10957
|
-
"name": "
|
|
10983
|
+
"name": "fullIcon",
|
|
10958
10984
|
"type": {
|
|
10959
|
-
"text": "string
|
|
10985
|
+
"text": "string"
|
|
10960
10986
|
},
|
|
10961
|
-
"
|
|
10987
|
+
"default": "\"ion:menu\"",
|
|
10988
|
+
"description": "Icon shown when all items overflow.",
|
|
10962
10989
|
"privacy": "public",
|
|
10963
|
-
"attribute": "
|
|
10990
|
+
"attribute": "fullIcon"
|
|
10964
10991
|
},
|
|
10965
10992
|
{
|
|
10966
10993
|
"kind": "field",
|
|
10967
|
-
"name": "
|
|
10994
|
+
"name": "_ro",
|
|
10968
10995
|
"type": {
|
|
10969
|
-
"text": "
|
|
10996
|
+
"text": "ResizeObserver | undefined"
|
|
10970
10997
|
},
|
|
10971
|
-
"
|
|
10972
|
-
"privacy": "public",
|
|
10973
|
-
"attribute": "gapY"
|
|
10998
|
+
"privacy": "private"
|
|
10974
10999
|
},
|
|
10975
11000
|
{
|
|
10976
11001
|
"kind": "field",
|
|
10977
|
-
"name": "
|
|
11002
|
+
"name": "_itemElements",
|
|
10978
11003
|
"type": {
|
|
10979
|
-
"text": "
|
|
11004
|
+
"text": "HTMLElement[]"
|
|
10980
11005
|
},
|
|
10981
|
-
"
|
|
10982
|
-
"
|
|
10983
|
-
"privacy": "public",
|
|
10984
|
-
"attribute": "col"
|
|
11006
|
+
"privacy": "private",
|
|
11007
|
+
"default": "[]"
|
|
10985
11008
|
},
|
|
10986
11009
|
{
|
|
10987
11010
|
"kind": "field",
|
|
10988
|
-
"name": "
|
|
11011
|
+
"name": "_scheduled",
|
|
11012
|
+
"type": {
|
|
11013
|
+
"text": "boolean"
|
|
11014
|
+
},
|
|
11015
|
+
"privacy": "private",
|
|
11016
|
+
"default": "false"
|
|
11017
|
+
},
|
|
11018
|
+
{
|
|
11019
|
+
"kind": "field",
|
|
11020
|
+
"name": "_initialized",
|
|
11021
|
+
"type": {
|
|
11022
|
+
"text": "boolean"
|
|
11023
|
+
},
|
|
11024
|
+
"privacy": "private",
|
|
11025
|
+
"default": "false"
|
|
11026
|
+
},
|
|
11027
|
+
{
|
|
11028
|
+
"kind": "field",
|
|
11029
|
+
"name": "_mo",
|
|
10989
11030
|
"type": {
|
|
10990
11031
|
"text": "MutationObserver | undefined"
|
|
10991
11032
|
},
|
|
10992
11033
|
"privacy": "private"
|
|
10993
11034
|
},
|
|
10994
11035
|
{
|
|
10995
|
-
"kind": "
|
|
10996
|
-
"name": "
|
|
11036
|
+
"kind": "field",
|
|
11037
|
+
"name": "hamburgerEl",
|
|
11038
|
+
"type": {
|
|
11039
|
+
"text": "HTMLElement"
|
|
11040
|
+
},
|
|
11041
|
+
"privacy": "private"
|
|
11042
|
+
},
|
|
11043
|
+
{
|
|
11044
|
+
"kind": "field",
|
|
11045
|
+
"name": "dropdownPopover",
|
|
10997
11046
|
"privacy": "private",
|
|
10998
|
-
"
|
|
11047
|
+
"default": "new PopoverController(this, { getAnchor: () => this, getPopover: () => this.hamburgerEl, cssVarLeft: \"--sky-dd-left\", cssVarTop: \"--sky-dd-top\", cssVarWidth: \"--sky-dd-width\", getPlacement: () => \"bottom\" as any, getAlign: () => \"start\" as any, getGap: () => 6, getPadding: () => 8, getMatchAnchorWidth: () => true, getMaxWidthToViewport: () => true, getMaxWidthMode: () => \"cap\" as any, getFlip: () => true, getFlipOrder: () => [], getAnimateReposition: () => true, getRepositionMs: () => 160, getCloseOnEscape: () => true, getCloseOnOutside: () => true, getRestoreFocusOnClose: () => true, onOpenChange: (open, meta) => { this.isHamburgerOpen = open; this.dispatchEvent( new CustomEvent<SkyFlexbarMenuToggleDetail>(\"menu-toggle\", { detail: { open }, bubbles: true, composed: true, }), ); }, })"
|
|
10999
11048
|
},
|
|
11000
11049
|
{
|
|
11001
11050
|
"kind": "method",
|
|
11002
|
-
"name": "
|
|
11003
|
-
"privacy": "
|
|
11004
|
-
"description": "
|
|
11051
|
+
"name": "_collectItems",
|
|
11052
|
+
"privacy": "private",
|
|
11053
|
+
"description": "Collects all .menu-parent elements for measurement."
|
|
11005
11054
|
},
|
|
11006
11055
|
{
|
|
11007
|
-
"kind": "
|
|
11008
|
-
"name": "
|
|
11056
|
+
"kind": "method",
|
|
11057
|
+
"name": "_scheduleMeasure",
|
|
11009
11058
|
"privacy": "private",
|
|
11010
|
-
"description": "
|
|
11059
|
+
"description": "Schedules a measurement for the next animation frame."
|
|
11011
11060
|
},
|
|
11012
11061
|
{
|
|
11013
11062
|
"kind": "method",
|
|
11014
|
-
"name": "
|
|
11063
|
+
"name": "_measure",
|
|
11015
11064
|
"privacy": "private",
|
|
11016
|
-
"
|
|
11017
|
-
"type": {
|
|
11018
|
-
"text": "string | null"
|
|
11019
|
-
}
|
|
11020
|
-
},
|
|
11021
|
-
"parameters": [
|
|
11022
|
-
{
|
|
11023
|
-
"name": "el",
|
|
11024
|
-
"type": {
|
|
11025
|
-
"text": "HTMLElement"
|
|
11026
|
-
}
|
|
11027
|
-
},
|
|
11028
|
-
{
|
|
11029
|
-
"name": "attrName",
|
|
11030
|
-
"type": {
|
|
11031
|
-
"text": "string"
|
|
11032
|
-
}
|
|
11033
|
-
},
|
|
11034
|
-
{
|
|
11035
|
-
"name": "propName",
|
|
11036
|
-
"type": {
|
|
11037
|
-
"text": "string"
|
|
11038
|
-
}
|
|
11039
|
-
}
|
|
11040
|
-
],
|
|
11041
|
-
"description": "Reads a span value from an HTML attribute or element property."
|
|
11065
|
+
"description": "Measures available space and manages item overflow."
|
|
11042
11066
|
},
|
|
11043
11067
|
{
|
|
11044
11068
|
"kind": "method",
|
|
11045
|
-
"name": "
|
|
11046
|
-
"privacy": "
|
|
11047
|
-
"
|
|
11048
|
-
|
|
11049
|
-
|
|
11050
|
-
|
|
11051
|
-
|
|
11052
|
-
"
|
|
11053
|
-
|
|
11054
|
-
|
|
11055
|
-
|
|
11056
|
-
|
|
11057
|
-
|
|
11058
|
-
|
|
11059
|
-
|
|
11060
|
-
"name": "cssVar",
|
|
11061
|
-
"type": {
|
|
11062
|
-
"text": "string"
|
|
11063
|
-
}
|
|
11064
|
-
},
|
|
11065
|
-
{
|
|
11066
|
-
"name": "raw",
|
|
11067
|
-
"type": {
|
|
11068
|
-
"text": "string | null"
|
|
11069
|
-
}
|
|
11070
|
-
}
|
|
11071
|
-
],
|
|
11072
|
-
"description": "Sets or clears a span CSS variable on a slotted child."
|
|
11069
|
+
"name": "openMenu",
|
|
11070
|
+
"privacy": "public",
|
|
11071
|
+
"description": "Opens the hamburger menu."
|
|
11072
|
+
},
|
|
11073
|
+
{
|
|
11074
|
+
"kind": "method",
|
|
11075
|
+
"name": "closeMenu",
|
|
11076
|
+
"privacy": "public",
|
|
11077
|
+
"description": "Closes the hamburger menu."
|
|
11078
|
+
},
|
|
11079
|
+
{
|
|
11080
|
+
"kind": "method",
|
|
11081
|
+
"name": "toggleMenu",
|
|
11082
|
+
"privacy": "public",
|
|
11083
|
+
"description": "Toggles the hamburger menu."
|
|
11073
11084
|
},
|
|
11074
11085
|
{
|
|
11075
11086
|
"kind": "method",
|
|
11076
|
-
"name": "
|
|
11077
|
-
"privacy": "
|
|
11078
|
-
"
|
|
11079
|
-
"type": {
|
|
11080
|
-
"text": ""
|
|
11081
|
-
}
|
|
11082
|
-
},
|
|
11083
|
-
"parameters": [
|
|
11084
|
-
{
|
|
11085
|
-
"name": "raw",
|
|
11086
|
-
"type": {
|
|
11087
|
-
"text": "string | null"
|
|
11088
|
-
},
|
|
11089
|
-
"description": "Raw span value from attribute"
|
|
11090
|
-
}
|
|
11091
|
-
],
|
|
11092
|
-
"description": "Clamps span value to valid range (1 to column count)."
|
|
11087
|
+
"name": "recalculateLayout",
|
|
11088
|
+
"privacy": "public",
|
|
11089
|
+
"description": "Forces a recalculation of item layout.\r\nUseful when items change size dynamically."
|
|
11093
11090
|
}
|
|
11094
11091
|
],
|
|
11095
11092
|
"events": [
|
|
11096
11093
|
{
|
|
11094
|
+
"name": "flex-direction-changed",
|
|
11097
11095
|
"type": {
|
|
11098
|
-
"text": "
|
|
11099
|
-
},
|
|
11100
|
-
"description": "Fired when slotted children change.",
|
|
11101
|
-
"name": "slotchange"
|
|
11102
|
-
}
|
|
11103
|
-
],
|
|
11104
|
-
"attributes": [
|
|
11105
|
-
{
|
|
11106
|
-
"name": "direction",
|
|
11107
|
-
"type": {
|
|
11108
|
-
"text": "SkyFlexboxDirection"
|
|
11096
|
+
"text": "CustomEvent<SkyFlexbarDirectionChangedDetail>"
|
|
11109
11097
|
},
|
|
11110
|
-
"
|
|
11111
|
-
"description": "Flex direction.",
|
|
11112
|
-
"fieldName": "direction"
|
|
11098
|
+
"description": "Fired when layout direction changes."
|
|
11113
11099
|
},
|
|
11114
11100
|
{
|
|
11115
|
-
"name": "wrap",
|
|
11116
11101
|
"type": {
|
|
11117
|
-
"text": "
|
|
11102
|
+
"text": "CustomEvent<SkyFlexbarMenuToggleDetail>"
|
|
11118
11103
|
},
|
|
11119
|
-
"
|
|
11120
|
-
"
|
|
11121
|
-
|
|
11122
|
-
|
|
11104
|
+
"description": "Fired when the hamburger menu opens or closes.",
|
|
11105
|
+
"name": "menu-toggle"
|
|
11106
|
+
}
|
|
11107
|
+
],
|
|
11108
|
+
"attributes": [
|
|
11123
11109
|
{
|
|
11124
|
-
"name": "
|
|
11110
|
+
"name": "isHamburgerOpen",
|
|
11125
11111
|
"type": {
|
|
11126
|
-
"text": "
|
|
11112
|
+
"text": "boolean"
|
|
11127
11113
|
},
|
|
11128
|
-
"default": "
|
|
11129
|
-
"description": "
|
|
11130
|
-
"fieldName": "
|
|
11114
|
+
"default": "false",
|
|
11115
|
+
"description": "Whether the overflow menu is open.",
|
|
11116
|
+
"fieldName": "isHamburgerOpen"
|
|
11131
11117
|
},
|
|
11132
11118
|
{
|
|
11133
|
-
"name": "
|
|
11119
|
+
"name": "isFullyHidden",
|
|
11134
11120
|
"type": {
|
|
11135
|
-
"text": "
|
|
11121
|
+
"text": "boolean"
|
|
11136
11122
|
},
|
|
11137
|
-
"default": "
|
|
11138
|
-
"description": "
|
|
11139
|
-
"fieldName": "
|
|
11123
|
+
"default": "false",
|
|
11124
|
+
"description": "Whether all slotted items are currently overflowed.",
|
|
11125
|
+
"fieldName": "isFullyHidden"
|
|
11140
11126
|
},
|
|
11141
11127
|
{
|
|
11142
|
-
"name": "
|
|
11128
|
+
"name": "gapThreshold",
|
|
11143
11129
|
"type": {
|
|
11144
|
-
"text": "
|
|
11130
|
+
"text": "number"
|
|
11145
11131
|
},
|
|
11146
|
-
"default": "
|
|
11147
|
-
"description": "
|
|
11148
|
-
"fieldName": "
|
|
11132
|
+
"default": "100",
|
|
11133
|
+
"description": "Reserved space in px used during overflow measurement.",
|
|
11134
|
+
"fieldName": "gapThreshold"
|
|
11149
11135
|
},
|
|
11150
11136
|
{
|
|
11151
|
-
"name": "
|
|
11137
|
+
"name": "flexDirection",
|
|
11152
11138
|
"type": {
|
|
11153
|
-
"text": "
|
|
11139
|
+
"text": "SkyFlexbarDirection"
|
|
11154
11140
|
},
|
|
11155
|
-
"default": "\"
|
|
11156
|
-
"description": "
|
|
11157
|
-
"fieldName": "
|
|
11141
|
+
"default": "\"horizontal\"",
|
|
11142
|
+
"description": "Current layout direction.",
|
|
11143
|
+
"fieldName": "flexDirection"
|
|
11158
11144
|
},
|
|
11159
11145
|
{
|
|
11160
|
-
"name": "
|
|
11146
|
+
"name": "stackAt",
|
|
11161
11147
|
"type": {
|
|
11162
|
-
"text": "
|
|
11148
|
+
"text": "number"
|
|
11163
11149
|
},
|
|
11164
|
-
"
|
|
11165
|
-
"
|
|
11150
|
+
"default": "500",
|
|
11151
|
+
"description": "Width threshold (px) for switching to vertical mode; `0` disables.",
|
|
11152
|
+
"fieldName": "stackAt"
|
|
11166
11153
|
},
|
|
11167
11154
|
{
|
|
11168
|
-
"name": "
|
|
11155
|
+
"name": "partialIcon",
|
|
11169
11156
|
"type": {
|
|
11170
|
-
"text": "string
|
|
11157
|
+
"text": "string"
|
|
11171
11158
|
},
|
|
11172
|
-
"
|
|
11173
|
-
"
|
|
11159
|
+
"default": "\"ion:ellipsis-horizontal\"",
|
|
11160
|
+
"description": "Icon shown when only some items overflow.",
|
|
11161
|
+
"fieldName": "partialIcon"
|
|
11174
11162
|
},
|
|
11175
11163
|
{
|
|
11176
|
-
"name": "
|
|
11164
|
+
"name": "fullIcon",
|
|
11177
11165
|
"type": {
|
|
11178
|
-
"text": "
|
|
11166
|
+
"text": "string"
|
|
11179
11167
|
},
|
|
11180
|
-
"default": "
|
|
11181
|
-
"description": "
|
|
11182
|
-
"fieldName": "
|
|
11168
|
+
"default": "\"ion:menu\"",
|
|
11169
|
+
"description": "Icon shown when all items overflow.",
|
|
11170
|
+
"fieldName": "fullIcon"
|
|
11183
11171
|
}
|
|
11184
11172
|
],
|
|
11185
11173
|
"superclass": {
|
|
11186
11174
|
"name": "LitElement",
|
|
11187
11175
|
"package": "lit"
|
|
11188
11176
|
},
|
|
11189
|
-
"tagName": "sky-
|
|
11177
|
+
"tagName": "sky-flexbar",
|
|
11190
11178
|
"customElement": true,
|
|
11191
|
-
"summary": "
|
|
11179
|
+
"summary": "Responsive action bar that moves overflowing items into a hamburger menu."
|
|
11192
11180
|
}
|
|
11193
11181
|
],
|
|
11194
11182
|
"exports": [
|
|
11195
11183
|
{
|
|
11196
11184
|
"kind": "js",
|
|
11197
|
-
"name": "
|
|
11185
|
+
"name": "SkyFlexbar",
|
|
11198
11186
|
"declaration": {
|
|
11199
|
-
"name": "
|
|
11200
|
-
"module": "src/sky-
|
|
11187
|
+
"name": "SkyFlexbar",
|
|
11188
|
+
"module": "src/sky-flexbar/sky-flexbar.ts"
|
|
11201
11189
|
}
|
|
11202
11190
|
},
|
|
11203
11191
|
{
|
|
11204
11192
|
"kind": "custom-element-definition",
|
|
11205
|
-
"name": "sky-
|
|
11193
|
+
"name": "sky-flexbar",
|
|
11206
11194
|
"declaration": {
|
|
11207
|
-
"name": "
|
|
11208
|
-
"module": "src/sky-
|
|
11195
|
+
"name": "SkyFlexbar",
|
|
11196
|
+
"module": "src/sky-flexbar/sky-flexbar.ts"
|
|
11209
11197
|
}
|
|
11210
11198
|
}
|
|
11211
11199
|
]
|
|
11212
11200
|
},
|
|
11213
11201
|
{
|
|
11214
11202
|
"kind": "javascript-module",
|
|
11215
|
-
"path": "src/sky-
|
|
11203
|
+
"path": "src/sky-flexbox/sky-flexbox.ts",
|
|
11216
11204
|
"declarations": [
|
|
11217
11205
|
{
|
|
11218
11206
|
"kind": "class",
|
|
11219
11207
|
"description": "",
|
|
11220
|
-
"name": "
|
|
11208
|
+
"name": "SkyFlexbox",
|
|
11221
11209
|
"cssParts": [
|
|
11222
11210
|
{
|
|
11223
|
-
"description": "The
|
|
11211
|
+
"description": "The flex container element.",
|
|
11224
11212
|
"name": "container"
|
|
11225
|
-
},
|
|
11226
|
-
{
|
|
11227
|
-
"description": "The hamburger/ellipsis toggle button.",
|
|
11228
|
-
"name": "hamburger-button"
|
|
11229
|
-
},
|
|
11230
|
-
{
|
|
11231
|
-
"description": "The dropdown menu container.",
|
|
11232
|
-
"name": "menu"
|
|
11233
|
-
},
|
|
11234
|
-
{
|
|
11235
|
-
"description": "Wrapper inside the dropdown menu.",
|
|
11236
|
-
"name": "menu-inner"
|
|
11237
11213
|
}
|
|
11238
11214
|
],
|
|
11239
11215
|
"slots": [
|
|
11240
11216
|
{
|
|
11241
|
-
"description": "Default slot for
|
|
11217
|
+
"description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
|
|
11242
11218
|
"name": ""
|
|
11243
|
-
},
|
|
11244
|
-
{
|
|
11245
|
-
"description": "Receives items that overflow the main bar.",
|
|
11246
|
-
"name": "hamburger"
|
|
11247
11219
|
}
|
|
11248
11220
|
],
|
|
11249
11221
|
"members": [
|
|
11250
11222
|
{
|
|
11251
11223
|
"kind": "field",
|
|
11252
|
-
"name": "
|
|
11253
|
-
"type": {
|
|
11254
|
-
"text": "Record<string, CustomElementConstructor>"
|
|
11255
|
-
},
|
|
11256
|
-
"static": true,
|
|
11257
|
-
"default": "{ \"sky-icon\": SkyIcon, }"
|
|
11258
|
-
},
|
|
11259
|
-
{
|
|
11260
|
-
"kind": "field",
|
|
11261
|
-
"name": "isHamburgerOpen",
|
|
11262
|
-
"type": {
|
|
11263
|
-
"text": "boolean"
|
|
11264
|
-
},
|
|
11265
|
-
"default": "false",
|
|
11266
|
-
"description": "Whether the overflow menu is open.",
|
|
11267
|
-
"privacy": "public",
|
|
11268
|
-
"attribute": "isHamburgerOpen"
|
|
11269
|
-
},
|
|
11270
|
-
{
|
|
11271
|
-
"kind": "field",
|
|
11272
|
-
"name": "isFullyHidden",
|
|
11224
|
+
"name": "direction",
|
|
11273
11225
|
"type": {
|
|
11274
|
-
"text": "
|
|
11226
|
+
"text": "SkyFlexboxDirection"
|
|
11275
11227
|
},
|
|
11276
|
-
"default": "
|
|
11277
|
-
"description": "
|
|
11228
|
+
"default": "\"row\"",
|
|
11229
|
+
"description": "Flex direction.",
|
|
11278
11230
|
"privacy": "public",
|
|
11279
|
-
"attribute": "
|
|
11231
|
+
"attribute": "direction"
|
|
11280
11232
|
},
|
|
11281
11233
|
{
|
|
11282
11234
|
"kind": "field",
|
|
11283
|
-
"name": "
|
|
11235
|
+
"name": "wrap",
|
|
11284
11236
|
"type": {
|
|
11285
|
-
"text": "
|
|
11237
|
+
"text": "SkyFlexboxWrap"
|
|
11286
11238
|
},
|
|
11287
|
-
"default": "
|
|
11288
|
-
"description": "
|
|
11239
|
+
"default": "\"wrap\"",
|
|
11240
|
+
"description": "Flex wrap behavior.",
|
|
11289
11241
|
"privacy": "public",
|
|
11290
|
-
"attribute": "
|
|
11242
|
+
"attribute": "wrap"
|
|
11291
11243
|
},
|
|
11292
11244
|
{
|
|
11293
11245
|
"kind": "field",
|
|
11294
|
-
"name": "
|
|
11246
|
+
"name": "justify",
|
|
11295
11247
|
"type": {
|
|
11296
|
-
"text": "
|
|
11248
|
+
"text": "SkyFlexboxJustify"
|
|
11297
11249
|
},
|
|
11298
|
-
"default": "\"
|
|
11299
|
-
"description": "
|
|
11250
|
+
"default": "\"flex-start\"",
|
|
11251
|
+
"description": "Main-axis alignment.",
|
|
11300
11252
|
"privacy": "public",
|
|
11301
|
-
"attribute": "
|
|
11302
|
-
"reflects": true
|
|
11253
|
+
"attribute": "justify"
|
|
11303
11254
|
},
|
|
11304
11255
|
{
|
|
11305
11256
|
"kind": "field",
|
|
11306
|
-
"name": "
|
|
11257
|
+
"name": "align",
|
|
11307
11258
|
"type": {
|
|
11308
|
-
"text": "
|
|
11259
|
+
"text": "SkyFlexboxAlign"
|
|
11309
11260
|
},
|
|
11310
|
-
"default": "
|
|
11311
|
-
"description": "
|
|
11261
|
+
"default": "\"stretch\"",
|
|
11262
|
+
"description": "Cross-axis alignment.",
|
|
11312
11263
|
"privacy": "public",
|
|
11313
|
-
"attribute": "
|
|
11264
|
+
"attribute": "align"
|
|
11314
11265
|
},
|
|
11315
11266
|
{
|
|
11316
11267
|
"kind": "field",
|
|
11317
|
-
"name": "
|
|
11268
|
+
"name": "alignContent",
|
|
11318
11269
|
"type": {
|
|
11319
|
-
"text": "
|
|
11270
|
+
"text": "SkyFlexboxAlignContent"
|
|
11320
11271
|
},
|
|
11321
|
-
"default": "\"
|
|
11322
|
-
"description": "
|
|
11272
|
+
"default": "\"normal\"",
|
|
11273
|
+
"description": "Multi-line cross-axis distribution.",
|
|
11323
11274
|
"privacy": "public",
|
|
11324
|
-
"attribute": "
|
|
11275
|
+
"attribute": "alignContent"
|
|
11325
11276
|
},
|
|
11326
11277
|
{
|
|
11327
11278
|
"kind": "field",
|
|
11328
|
-
"name": "
|
|
11279
|
+
"name": "gap",
|
|
11329
11280
|
"type": {
|
|
11330
11281
|
"text": "string"
|
|
11331
11282
|
},
|
|
11332
|
-
"default": "\"
|
|
11333
|
-
"description": "
|
|
11334
|
-
"privacy": "public",
|
|
11335
|
-
"attribute": "
|
|
11336
|
-
},
|
|
11337
|
-
{
|
|
11338
|
-
"kind": "field",
|
|
11339
|
-
"name": "_ro",
|
|
11340
|
-
"type": {
|
|
11341
|
-
"text": "ResizeObserver | undefined"
|
|
11342
|
-
},
|
|
11343
|
-
"privacy": "private"
|
|
11344
|
-
},
|
|
11345
|
-
{
|
|
11346
|
-
"kind": "field",
|
|
11347
|
-
"name": "_itemElements",
|
|
11348
|
-
"type": {
|
|
11349
|
-
"text": "HTMLElement[]"
|
|
11350
|
-
},
|
|
11351
|
-
"privacy": "private",
|
|
11352
|
-
"default": "[]"
|
|
11283
|
+
"default": "\"16px\"",
|
|
11284
|
+
"description": "Shared row/column gap value.",
|
|
11285
|
+
"privacy": "public",
|
|
11286
|
+
"attribute": "gap"
|
|
11353
11287
|
},
|
|
11354
11288
|
{
|
|
11355
11289
|
"kind": "field",
|
|
11356
|
-
"name": "
|
|
11290
|
+
"name": "gapX",
|
|
11357
11291
|
"type": {
|
|
11358
|
-
"text": "
|
|
11292
|
+
"text": "string | undefined"
|
|
11359
11293
|
},
|
|
11360
|
-
"
|
|
11361
|
-
"
|
|
11294
|
+
"description": "Horizontal gap override.",
|
|
11295
|
+
"privacy": "public",
|
|
11296
|
+
"attribute": "gapX"
|
|
11362
11297
|
},
|
|
11363
11298
|
{
|
|
11364
11299
|
"kind": "field",
|
|
11365
|
-
"name": "
|
|
11300
|
+
"name": "gapY",
|
|
11366
11301
|
"type": {
|
|
11367
|
-
"text": "
|
|
11302
|
+
"text": "string | undefined"
|
|
11368
11303
|
},
|
|
11369
|
-
"
|
|
11370
|
-
"
|
|
11304
|
+
"description": "Vertical gap override.",
|
|
11305
|
+
"privacy": "public",
|
|
11306
|
+
"attribute": "gapY"
|
|
11371
11307
|
},
|
|
11372
11308
|
{
|
|
11373
11309
|
"kind": "field",
|
|
11374
|
-
"name": "
|
|
11310
|
+
"name": "col",
|
|
11375
11311
|
"type": {
|
|
11376
|
-
"text": "
|
|
11312
|
+
"text": "number"
|
|
11377
11313
|
},
|
|
11378
|
-
"
|
|
11314
|
+
"default": "12",
|
|
11315
|
+
"description": "Total column count used for span calculations.",
|
|
11316
|
+
"privacy": "public",
|
|
11317
|
+
"attribute": "col"
|
|
11379
11318
|
},
|
|
11380
11319
|
{
|
|
11381
11320
|
"kind": "field",
|
|
11382
|
-
"name": "
|
|
11321
|
+
"name": "_childMo",
|
|
11383
11322
|
"type": {
|
|
11384
|
-
"text": "
|
|
11323
|
+
"text": "MutationObserver | undefined"
|
|
11385
11324
|
},
|
|
11386
11325
|
"privacy": "private"
|
|
11387
11326
|
},
|
|
11388
|
-
{
|
|
11389
|
-
"kind": "field",
|
|
11390
|
-
"name": "dropdownPopover",
|
|
11391
|
-
"privacy": "private",
|
|
11392
|
-
"default": "new PopoverController(this, { getAnchor: () => this, getPopover: () => this.hamburgerEl, cssVarLeft: \"--sky-dd-left\", cssVarTop: \"--sky-dd-top\", cssVarWidth: \"--sky-dd-width\", getPlacement: () => \"bottom\" as any, getAlign: () => \"start\" as any, getGap: () => 6, getPadding: () => 8, getMatchAnchorWidth: () => true, getMaxWidthToViewport: () => true, getMaxWidthMode: () => \"cap\" as any, getFlip: () => true, getFlipOrder: () => [], getAnimateReposition: () => true, getRepositionMs: () => 160, getCloseOnEscape: () => true, getCloseOnOutside: () => true, getRestoreFocusOnClose: () => true, onOpenChange: (open, meta) => { this.isHamburgerOpen = open; this.dispatchEvent( new CustomEvent<SkyFlexbarMenuToggleDetail>(\"menu-toggle\", { detail: { open }, bubbles: true, composed: true, }), ); }, })"
|
|
11393
|
-
},
|
|
11394
11327
|
{
|
|
11395
11328
|
"kind": "method",
|
|
11396
|
-
"name": "
|
|
11329
|
+
"name": "syncVars",
|
|
11397
11330
|
"privacy": "private",
|
|
11398
|
-
"description": "
|
|
11331
|
+
"description": "Syncs component properties to CSS custom properties."
|
|
11399
11332
|
},
|
|
11400
11333
|
{
|
|
11401
11334
|
"kind": "method",
|
|
11402
|
-
"name": "
|
|
11403
|
-
"privacy": "
|
|
11404
|
-
"description": "
|
|
11335
|
+
"name": "recalculateSpans",
|
|
11336
|
+
"privacy": "public",
|
|
11337
|
+
"description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
|
|
11405
11338
|
},
|
|
11406
11339
|
{
|
|
11407
|
-
"kind": "
|
|
11408
|
-
"name": "
|
|
11340
|
+
"kind": "field",
|
|
11341
|
+
"name": "updateSpans",
|
|
11409
11342
|
"privacy": "private",
|
|
11410
|
-
"description": "
|
|
11411
|
-
},
|
|
11412
|
-
{
|
|
11413
|
-
"kind": "method",
|
|
11414
|
-
"name": "openMenu",
|
|
11415
|
-
"privacy": "public",
|
|
11416
|
-
"description": "Opens the hamburger menu."
|
|
11343
|
+
"description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
|
|
11417
11344
|
},
|
|
11418
11345
|
{
|
|
11419
11346
|
"kind": "method",
|
|
11420
|
-
"name": "
|
|
11421
|
-
"privacy": "
|
|
11422
|
-
"
|
|
11347
|
+
"name": "readSpanRaw",
|
|
11348
|
+
"privacy": "private",
|
|
11349
|
+
"return": {
|
|
11350
|
+
"type": {
|
|
11351
|
+
"text": "string | null"
|
|
11352
|
+
}
|
|
11353
|
+
},
|
|
11354
|
+
"parameters": [
|
|
11355
|
+
{
|
|
11356
|
+
"name": "el",
|
|
11357
|
+
"type": {
|
|
11358
|
+
"text": "HTMLElement"
|
|
11359
|
+
}
|
|
11360
|
+
},
|
|
11361
|
+
{
|
|
11362
|
+
"name": "attrName",
|
|
11363
|
+
"type": {
|
|
11364
|
+
"text": "string"
|
|
11365
|
+
}
|
|
11366
|
+
},
|
|
11367
|
+
{
|
|
11368
|
+
"name": "propName",
|
|
11369
|
+
"type": {
|
|
11370
|
+
"text": "string"
|
|
11371
|
+
}
|
|
11372
|
+
}
|
|
11373
|
+
],
|
|
11374
|
+
"description": "Reads a span value from an HTML attribute or element property."
|
|
11423
11375
|
},
|
|
11424
11376
|
{
|
|
11425
11377
|
"kind": "method",
|
|
11426
|
-
"name": "
|
|
11427
|
-
"privacy": "
|
|
11428
|
-
"
|
|
11378
|
+
"name": "applySpanVar",
|
|
11379
|
+
"privacy": "private",
|
|
11380
|
+
"return": {
|
|
11381
|
+
"type": {
|
|
11382
|
+
"text": "void"
|
|
11383
|
+
}
|
|
11384
|
+
},
|
|
11385
|
+
"parameters": [
|
|
11386
|
+
{
|
|
11387
|
+
"name": "el",
|
|
11388
|
+
"type": {
|
|
11389
|
+
"text": "HTMLElement"
|
|
11390
|
+
}
|
|
11391
|
+
},
|
|
11392
|
+
{
|
|
11393
|
+
"name": "cssVar",
|
|
11394
|
+
"type": {
|
|
11395
|
+
"text": "string"
|
|
11396
|
+
}
|
|
11397
|
+
},
|
|
11398
|
+
{
|
|
11399
|
+
"name": "raw",
|
|
11400
|
+
"type": {
|
|
11401
|
+
"text": "string | null"
|
|
11402
|
+
}
|
|
11403
|
+
}
|
|
11404
|
+
],
|
|
11405
|
+
"description": "Sets or clears a span CSS variable on a slotted child."
|
|
11429
11406
|
},
|
|
11430
11407
|
{
|
|
11431
11408
|
"kind": "method",
|
|
11432
|
-
"name": "
|
|
11433
|
-
"privacy": "
|
|
11434
|
-
"
|
|
11409
|
+
"name": "clampSpan",
|
|
11410
|
+
"privacy": "private",
|
|
11411
|
+
"return": {
|
|
11412
|
+
"type": {
|
|
11413
|
+
"text": ""
|
|
11414
|
+
}
|
|
11415
|
+
},
|
|
11416
|
+
"parameters": [
|
|
11417
|
+
{
|
|
11418
|
+
"name": "raw",
|
|
11419
|
+
"type": {
|
|
11420
|
+
"text": "string | null"
|
|
11421
|
+
},
|
|
11422
|
+
"description": "Raw span value from attribute"
|
|
11423
|
+
}
|
|
11424
|
+
],
|
|
11425
|
+
"description": "Clamps span value to valid range (1 to column count)."
|
|
11435
11426
|
}
|
|
11436
11427
|
],
|
|
11437
11428
|
"events": [
|
|
11438
|
-
{
|
|
11439
|
-
"name": "flex-direction-changed",
|
|
11440
|
-
"type": {
|
|
11441
|
-
"text": "CustomEvent<SkyFlexbarDirectionChangedDetail>"
|
|
11442
|
-
},
|
|
11443
|
-
"description": "Fired when layout direction changes."
|
|
11444
|
-
},
|
|
11445
11429
|
{
|
|
11446
11430
|
"type": {
|
|
11447
|
-
"text": "
|
|
11431
|
+
"text": "Event"
|
|
11448
11432
|
},
|
|
11449
|
-
"description": "Fired when
|
|
11450
|
-
"name": "
|
|
11433
|
+
"description": "Fired when slotted children change.",
|
|
11434
|
+
"name": "slotchange"
|
|
11451
11435
|
}
|
|
11452
11436
|
],
|
|
11453
11437
|
"attributes": [
|
|
11454
11438
|
{
|
|
11455
|
-
"name": "
|
|
11439
|
+
"name": "direction",
|
|
11456
11440
|
"type": {
|
|
11457
|
-
"text": "
|
|
11441
|
+
"text": "SkyFlexboxDirection"
|
|
11458
11442
|
},
|
|
11459
|
-
"default": "
|
|
11460
|
-
"description": "
|
|
11461
|
-
"fieldName": "
|
|
11443
|
+
"default": "\"row\"",
|
|
11444
|
+
"description": "Flex direction.",
|
|
11445
|
+
"fieldName": "direction"
|
|
11462
11446
|
},
|
|
11463
11447
|
{
|
|
11464
|
-
"name": "
|
|
11448
|
+
"name": "wrap",
|
|
11465
11449
|
"type": {
|
|
11466
|
-
"text": "
|
|
11450
|
+
"text": "SkyFlexboxWrap"
|
|
11467
11451
|
},
|
|
11468
|
-
"default": "
|
|
11469
|
-
"description": "
|
|
11470
|
-
"fieldName": "
|
|
11452
|
+
"default": "\"wrap\"",
|
|
11453
|
+
"description": "Flex wrap behavior.",
|
|
11454
|
+
"fieldName": "wrap"
|
|
11471
11455
|
},
|
|
11472
11456
|
{
|
|
11473
|
-
"name": "
|
|
11457
|
+
"name": "justify",
|
|
11474
11458
|
"type": {
|
|
11475
|
-
"text": "
|
|
11459
|
+
"text": "SkyFlexboxJustify"
|
|
11476
11460
|
},
|
|
11477
|
-
"default": "
|
|
11478
|
-
"description": "
|
|
11479
|
-
"fieldName": "
|
|
11461
|
+
"default": "\"flex-start\"",
|
|
11462
|
+
"description": "Main-axis alignment.",
|
|
11463
|
+
"fieldName": "justify"
|
|
11480
11464
|
},
|
|
11481
11465
|
{
|
|
11482
|
-
"name": "
|
|
11466
|
+
"name": "align",
|
|
11483
11467
|
"type": {
|
|
11484
|
-
"text": "
|
|
11468
|
+
"text": "SkyFlexboxAlign"
|
|
11485
11469
|
},
|
|
11486
|
-
"default": "\"
|
|
11487
|
-
"description": "
|
|
11488
|
-
"fieldName": "
|
|
11470
|
+
"default": "\"stretch\"",
|
|
11471
|
+
"description": "Cross-axis alignment.",
|
|
11472
|
+
"fieldName": "align"
|
|
11489
11473
|
},
|
|
11490
11474
|
{
|
|
11491
|
-
"name": "
|
|
11475
|
+
"name": "alignContent",
|
|
11492
11476
|
"type": {
|
|
11493
|
-
"text": "
|
|
11477
|
+
"text": "SkyFlexboxAlignContent"
|
|
11494
11478
|
},
|
|
11495
|
-
"default": "
|
|
11496
|
-
"description": "
|
|
11497
|
-
"fieldName": "
|
|
11479
|
+
"default": "\"normal\"",
|
|
11480
|
+
"description": "Multi-line cross-axis distribution.",
|
|
11481
|
+
"fieldName": "alignContent"
|
|
11498
11482
|
},
|
|
11499
11483
|
{
|
|
11500
|
-
"name": "
|
|
11484
|
+
"name": "gap",
|
|
11501
11485
|
"type": {
|
|
11502
11486
|
"text": "string"
|
|
11503
11487
|
},
|
|
11504
|
-
"default": "\"
|
|
11505
|
-
"description": "
|
|
11506
|
-
"fieldName": "
|
|
11488
|
+
"default": "\"16px\"",
|
|
11489
|
+
"description": "Shared row/column gap value.",
|
|
11490
|
+
"fieldName": "gap"
|
|
11507
11491
|
},
|
|
11508
11492
|
{
|
|
11509
|
-
"name": "
|
|
11493
|
+
"name": "gapX",
|
|
11510
11494
|
"type": {
|
|
11511
|
-
"text": "string"
|
|
11495
|
+
"text": "string | undefined"
|
|
11512
11496
|
},
|
|
11513
|
-
"
|
|
11514
|
-
"
|
|
11515
|
-
|
|
11497
|
+
"description": "Horizontal gap override.",
|
|
11498
|
+
"fieldName": "gapX"
|
|
11499
|
+
},
|
|
11500
|
+
{
|
|
11501
|
+
"name": "gapY",
|
|
11502
|
+
"type": {
|
|
11503
|
+
"text": "string | undefined"
|
|
11504
|
+
},
|
|
11505
|
+
"description": "Vertical gap override.",
|
|
11506
|
+
"fieldName": "gapY"
|
|
11507
|
+
},
|
|
11508
|
+
{
|
|
11509
|
+
"name": "col",
|
|
11510
|
+
"type": {
|
|
11511
|
+
"text": "number"
|
|
11512
|
+
},
|
|
11513
|
+
"default": "12",
|
|
11514
|
+
"description": "Total column count used for span calculations.",
|
|
11515
|
+
"fieldName": "col"
|
|
11516
11516
|
}
|
|
11517
11517
|
],
|
|
11518
11518
|
"superclass": {
|
|
11519
11519
|
"name": "LitElement",
|
|
11520
11520
|
"package": "lit"
|
|
11521
11521
|
},
|
|
11522
|
-
"tagName": "sky-
|
|
11522
|
+
"tagName": "sky-flexbox",
|
|
11523
11523
|
"customElement": true,
|
|
11524
|
-
"summary": "
|
|
11524
|
+
"summary": "Flexbox container with grid-like span support for slotted children."
|
|
11525
11525
|
}
|
|
11526
11526
|
],
|
|
11527
11527
|
"exports": [
|
|
11528
11528
|
{
|
|
11529
11529
|
"kind": "js",
|
|
11530
|
-
"name": "
|
|
11530
|
+
"name": "SkyFlexbox",
|
|
11531
11531
|
"declaration": {
|
|
11532
|
-
"name": "
|
|
11533
|
-
"module": "src/sky-
|
|
11532
|
+
"name": "SkyFlexbox",
|
|
11533
|
+
"module": "src/sky-flexbox/sky-flexbox.ts"
|
|
11534
11534
|
}
|
|
11535
11535
|
},
|
|
11536
11536
|
{
|
|
11537
11537
|
"kind": "custom-element-definition",
|
|
11538
|
-
"name": "sky-
|
|
11538
|
+
"name": "sky-flexbox",
|
|
11539
11539
|
"declaration": {
|
|
11540
|
-
"name": "
|
|
11541
|
-
"module": "src/sky-
|
|
11540
|
+
"name": "SkyFlexbox",
|
|
11541
|
+
"module": "src/sky-flexbox/sky-flexbox.ts"
|
|
11542
11542
|
}
|
|
11543
11543
|
}
|
|
11544
11544
|
]
|