@helixui/library 3.2.0-next.94 → 3.2.0-next.96
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/custom-elements.json +357 -357
- package/dist/components/hx-combobox/index.js +1 -1
- package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
- package/dist/components/hx-file-upload/index.js +1 -1
- package/dist/css/helix-all.css +6 -15
- package/dist/css/helix-forms.css +6 -15
- package/dist/css/hx-combobox.css +3 -3
- package/dist/css/hx-file-upload.css +3 -12
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +2 -2
- package/dist/index.js +2 -2
- package/dist/shared/{hx-combobox-M1yregCS.js → hx-combobox-ClhNRAS5.js} +4 -4
- package/dist/shared/hx-combobox-ClhNRAS5.js.map +1 -0
- package/dist/shared/{hx-file-upload-B4L_Nkm-.js → hx-file-upload-D3rKROK5.js} +8 -17
- package/dist/shared/hx-file-upload-D3rKROK5.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/hx-combobox-M1yregCS.js.map +0 -1
- package/dist/shared/hx-file-upload-B4L_Nkm-.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -4,583 +4,583 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/components/hx-
|
|
7
|
+
"path": "src/components/hx-action-bar/hx-action-bar.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
|
|
12
|
+
"name": "HelixActionBar",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--hx-
|
|
17
|
-
"default": "
|
|
15
|
+
"description": "Bar background color (default variant).",
|
|
16
|
+
"name": "--hx-action-bar-bg",
|
|
17
|
+
"default": "transparent"
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
|
-
"description": "
|
|
21
|
-
"name": "--hx-
|
|
22
|
-
"default": "
|
|
20
|
+
"description": "Bar border (default variant).",
|
|
21
|
+
"name": "--hx-action-bar-border",
|
|
22
|
+
"default": "none"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"description": "
|
|
26
|
-
"name": "--hx-
|
|
27
|
-
"default": "var(--hx-
|
|
25
|
+
"description": "Inner padding.",
|
|
26
|
+
"name": "--hx-action-bar-padding",
|
|
27
|
+
"default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"description": "
|
|
31
|
-
"name": "--hx-
|
|
32
|
-
"default": "
|
|
30
|
+
"description": "Gap between slotted items.",
|
|
31
|
+
"name": "--hx-action-bar-gap",
|
|
32
|
+
"default": "var(--hx-space-2,0.5rem)"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
|
-
"description": "
|
|
36
|
-
"name": "--hx-
|
|
37
|
-
"default": "
|
|
35
|
+
"description": "Z-index when sticky or bottom position.",
|
|
36
|
+
"name": "--hx-action-bar-z-index",
|
|
37
|
+
"default": "10"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
|
-
"description": "
|
|
41
|
-
"name": "--hx-
|
|
42
|
-
"default": "
|
|
40
|
+
"description": "Padding.",
|
|
41
|
+
"name": "--hx-action-bar-padding-block-start",
|
|
42
|
+
"default": "0px"
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
|
-
"description": "
|
|
46
|
-
"name": "--hx-
|
|
47
|
-
"default": "
|
|
45
|
+
"description": "Padding.",
|
|
46
|
+
"name": "--hx-action-bar-padding-block-end",
|
|
47
|
+
"default": "0px"
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
|
-
"description": "
|
|
51
|
-
"name": "--hx-
|
|
52
|
-
|
|
50
|
+
"description": "CSS custom property.",
|
|
51
|
+
"name": "--hx-border-radius-md"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"description": "Width.",
|
|
55
|
+
"name": "--hx-border-width-thin"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"description": "Color.",
|
|
59
|
+
"name": "--hx-color-neutral-0"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"description": "Color.",
|
|
63
|
+
"name": "--hx-color-neutral-200"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"description": "Color.",
|
|
67
|
+
"name": "--hx-color-neutral-50"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"description": "Size token.",
|
|
71
|
+
"name": "--hx-size-8"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"description": "Size token.",
|
|
75
|
+
"name": "--hx-size-10"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"description": "Size token.",
|
|
79
|
+
"name": "--hx-size-12"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"description": "Spacing token.",
|
|
83
|
+
"name": "--hx-space-1"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"description": "Spacing token.",
|
|
87
|
+
"name": "--hx-space-2"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"description": "Spacing token.",
|
|
91
|
+
"name": "--hx-space-3"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"description": "Spacing token.",
|
|
95
|
+
"name": "--hx-space-4"
|
|
53
96
|
}
|
|
54
97
|
],
|
|
55
98
|
"cssParts": [
|
|
56
99
|
{
|
|
57
|
-
"description": "The
|
|
58
|
-
"name": "
|
|
100
|
+
"description": "The root toolbar container element.",
|
|
101
|
+
"name": "base"
|
|
59
102
|
},
|
|
60
103
|
{
|
|
61
|
-
"description": "The
|
|
62
|
-
"name": "
|
|
104
|
+
"description": "The start (left) slot wrapper.",
|
|
105
|
+
"name": "start"
|
|
63
106
|
},
|
|
64
107
|
{
|
|
65
|
-
"description": "The
|
|
66
|
-
"name": "
|
|
108
|
+
"description": "The center (default) slot wrapper.",
|
|
109
|
+
"name": "center"
|
|
67
110
|
},
|
|
68
111
|
{
|
|
69
|
-
"description": "The
|
|
70
|
-
"name": "
|
|
112
|
+
"description": "The end (right) slot wrapper.",
|
|
113
|
+
"name": "end"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"description": "The overflow slot wrapper (hidden when no overflow content).",
|
|
117
|
+
"name": "overflow"
|
|
71
118
|
}
|
|
72
119
|
],
|
|
73
120
|
"slots": [
|
|
74
121
|
{
|
|
75
|
-
"description": "
|
|
76
|
-
"name": "
|
|
122
|
+
"description": "Left-aligned actions.",
|
|
123
|
+
"name": "start"
|
|
77
124
|
},
|
|
78
125
|
{
|
|
79
|
-
"description": "
|
|
126
|
+
"description": "Center content (default slot).",
|
|
80
127
|
"name": ""
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"description": "Right-aligned actions.",
|
|
131
|
+
"name": "end"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"description": "Actions revealed when the bar is constrained for space.",
|
|
135
|
+
"name": "overflow"
|
|
81
136
|
}
|
|
82
137
|
],
|
|
83
138
|
"members": [
|
|
84
139
|
{
|
|
85
140
|
"kind": "field",
|
|
86
|
-
"name": "
|
|
141
|
+
"name": "size",
|
|
87
142
|
"type": {
|
|
88
|
-
"text": "
|
|
143
|
+
"text": "'sm' | 'md' | 'lg'"
|
|
89
144
|
},
|
|
90
|
-
"default": "
|
|
91
|
-
"description": "
|
|
92
|
-
"attribute": "
|
|
145
|
+
"default": "'md'",
|
|
146
|
+
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
147
|
+
"attribute": "hx-size",
|
|
93
148
|
"reflects": true
|
|
94
149
|
},
|
|
95
150
|
{
|
|
96
151
|
"kind": "field",
|
|
97
|
-
"name": "
|
|
152
|
+
"name": "variant",
|
|
98
153
|
"type": {
|
|
99
|
-
"text": "
|
|
154
|
+
"text": "'default' | 'outlined' | 'filled'"
|
|
100
155
|
},
|
|
101
|
-
"default": "
|
|
102
|
-
"description": "
|
|
103
|
-
"attribute": "
|
|
156
|
+
"default": "'default'",
|
|
157
|
+
"description": "Visual variant controlling the bar background.",
|
|
158
|
+
"attribute": "variant",
|
|
104
159
|
"reflects": true
|
|
105
160
|
},
|
|
106
161
|
{
|
|
107
162
|
"kind": "field",
|
|
108
|
-
"name": "
|
|
109
|
-
"type": {
|
|
110
|
-
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
111
|
-
},
|
|
112
|
-
"default": "3",
|
|
113
|
-
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
114
|
-
"attribute": "level"
|
|
115
|
-
}
|
|
116
|
-
],
|
|
117
|
-
"events": [
|
|
118
|
-
{
|
|
119
|
-
"name": "hx-expand",
|
|
163
|
+
"name": "position",
|
|
120
164
|
"type": {
|
|
121
|
-
"text": "
|
|
165
|
+
"text": "'top' | 'bottom' | 'sticky'"
|
|
122
166
|
},
|
|
123
|
-
"
|
|
167
|
+
"default": "'top'",
|
|
168
|
+
"description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
|
|
169
|
+
"attribute": "position",
|
|
170
|
+
"reflects": true
|
|
124
171
|
},
|
|
125
172
|
{
|
|
126
|
-
"
|
|
173
|
+
"kind": "field",
|
|
174
|
+
"name": "accessibleLabel",
|
|
127
175
|
"type": {
|
|
128
|
-
"text": "
|
|
176
|
+
"text": "string"
|
|
129
177
|
},
|
|
130
|
-
"
|
|
178
|
+
"default": "''",
|
|
179
|
+
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
180
|
+
"attribute": "accessible-label"
|
|
131
181
|
}
|
|
132
182
|
],
|
|
133
183
|
"attributes": [
|
|
134
184
|
{
|
|
135
|
-
"name": "
|
|
185
|
+
"name": "hx-size",
|
|
136
186
|
"type": {
|
|
137
|
-
"text": "
|
|
187
|
+
"text": "'sm' | 'md' | 'lg'"
|
|
138
188
|
},
|
|
139
|
-
"default": "
|
|
140
|
-
"description": "
|
|
141
|
-
"fieldName": "
|
|
142
|
-
"attribute": "
|
|
189
|
+
"default": "'md'",
|
|
190
|
+
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
191
|
+
"fieldName": "size",
|
|
192
|
+
"attribute": "hx-size"
|
|
143
193
|
},
|
|
144
194
|
{
|
|
145
|
-
"name": "
|
|
195
|
+
"name": "variant",
|
|
146
196
|
"type": {
|
|
147
|
-
"text": "
|
|
197
|
+
"text": "'default' | 'outlined' | 'filled'"
|
|
148
198
|
},
|
|
149
|
-
"default": "
|
|
150
|
-
"description": "
|
|
151
|
-
"fieldName": "
|
|
152
|
-
"attribute": "
|
|
199
|
+
"default": "'default'",
|
|
200
|
+
"description": "Visual variant controlling the bar background.",
|
|
201
|
+
"fieldName": "variant",
|
|
202
|
+
"attribute": "variant"
|
|
153
203
|
},
|
|
154
204
|
{
|
|
155
|
-
"name": "
|
|
205
|
+
"name": "position",
|
|
156
206
|
"type": {
|
|
157
|
-
"text": "
|
|
207
|
+
"text": "'top' | 'bottom' | 'sticky'"
|
|
158
208
|
},
|
|
159
|
-
"default": "
|
|
160
|
-
"description": "
|
|
161
|
-
"fieldName": "
|
|
162
|
-
"attribute": "
|
|
209
|
+
"default": "'top'",
|
|
210
|
+
"description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
|
|
211
|
+
"fieldName": "position",
|
|
212
|
+
"attribute": "position"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "accessible-label",
|
|
216
|
+
"type": {
|
|
217
|
+
"text": "string"
|
|
218
|
+
},
|
|
219
|
+
"default": "''",
|
|
220
|
+
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
221
|
+
"fieldName": "accessibleLabel",
|
|
222
|
+
"attribute": "accessible-label"
|
|
163
223
|
}
|
|
164
224
|
],
|
|
165
225
|
"superclass": {
|
|
166
226
|
"name": "HelixElement",
|
|
167
227
|
"module": "/src/base/index.js"
|
|
168
228
|
},
|
|
169
|
-
"tagName": "hx-
|
|
229
|
+
"tagName": "hx-action-bar",
|
|
170
230
|
"customElement": true,
|
|
171
|
-
"summary": "
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
"kind": "variable",
|
|
175
|
-
"name": "detail",
|
|
176
|
-
"type": {
|
|
177
|
-
"text": "object"
|
|
178
|
-
},
|
|
179
|
-
"default": "{ expanded, itemId: this.id || '' }"
|
|
231
|
+
"summary": "Horizontal action bar for grouping related controls."
|
|
180
232
|
}
|
|
181
233
|
],
|
|
182
234
|
"exports": [
|
|
183
235
|
{
|
|
184
236
|
"kind": "js",
|
|
185
|
-
"name": "
|
|
237
|
+
"name": "HelixActionBar",
|
|
186
238
|
"declaration": {
|
|
187
|
-
"name": "
|
|
188
|
-
"module": "src/components/hx-
|
|
239
|
+
"name": "HelixActionBar",
|
|
240
|
+
"module": "src/components/hx-action-bar/hx-action-bar.ts"
|
|
189
241
|
}
|
|
190
242
|
},
|
|
191
243
|
{
|
|
192
244
|
"kind": "custom-element-definition",
|
|
193
|
-
"name": "hx-
|
|
245
|
+
"name": "hx-action-bar",
|
|
194
246
|
"declaration": {
|
|
195
|
-
"name": "
|
|
196
|
-
"module": "src/components/hx-
|
|
247
|
+
"name": "HelixActionBar",
|
|
248
|
+
"module": "src/components/hx-action-bar/hx-action-bar.ts"
|
|
197
249
|
}
|
|
198
250
|
}
|
|
199
251
|
]
|
|
200
252
|
},
|
|
201
253
|
{
|
|
202
254
|
"kind": "javascript-module",
|
|
203
|
-
"path": "src/components/hx-
|
|
204
|
-
"declarations": [
|
|
255
|
+
"path": "src/components/hx-action-bar/index.ts",
|
|
256
|
+
"declarations": [],
|
|
257
|
+
"exports": [
|
|
205
258
|
{
|
|
206
|
-
"kind": "
|
|
207
|
-
"
|
|
208
|
-
"
|
|
259
|
+
"kind": "js",
|
|
260
|
+
"name": "HelixActionBar",
|
|
261
|
+
"declaration": {
|
|
262
|
+
"name": "HelixActionBar",
|
|
263
|
+
"module": "./hx-action-bar.js"
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
]
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"kind": "javascript-module",
|
|
270
|
+
"path": "src/components/hx-accordion/hx-accordion-item.ts",
|
|
271
|
+
"declarations": [
|
|
272
|
+
{
|
|
273
|
+
"kind": "class",
|
|
274
|
+
"description": "An individual accordion item with collapsible content.",
|
|
275
|
+
"name": "HelixAccordionItem",
|
|
209
276
|
"cssProperties": [
|
|
210
277
|
{
|
|
211
|
-
"description": "
|
|
212
|
-
"name": "--hx-accordion-border-
|
|
213
|
-
"default": "var(--hx-
|
|
278
|
+
"description": "Border color between items.",
|
|
279
|
+
"name": "--hx-accordion-border-color",
|
|
280
|
+
"default": "var(--hx-color-neutral-200)"
|
|
214
281
|
},
|
|
215
282
|
{
|
|
216
|
-
"description": "
|
|
217
|
-
"name": "--hx-accordion-
|
|
218
|
-
"default": "var(--hx-
|
|
283
|
+
"description": "Trigger padding.",
|
|
284
|
+
"name": "--hx-accordion-trigger-padding",
|
|
285
|
+
"default": "var(--hx-space-4)"
|
|
219
286
|
},
|
|
220
287
|
{
|
|
221
|
-
"description": "
|
|
222
|
-
"name": "--hx-
|
|
288
|
+
"description": "Trigger text color.",
|
|
289
|
+
"name": "--hx-accordion-trigger-color",
|
|
290
|
+
"default": "var(--hx-color-neutral-800)"
|
|
223
291
|
},
|
|
224
292
|
{
|
|
225
|
-
"description": "
|
|
226
|
-
"name": "--hx-
|
|
293
|
+
"description": "Trigger background color.",
|
|
294
|
+
"name": "--hx-accordion-trigger-bg",
|
|
295
|
+
"default": "transparent"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"description": "Trigger hover background.",
|
|
299
|
+
"name": "--hx-accordion-trigger-hover-bg",
|
|
300
|
+
"default": "var(--hx-color-neutral-50)"
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"description": "Icon color.",
|
|
304
|
+
"name": "--hx-accordion-icon-color",
|
|
305
|
+
"default": "var(--hx-color-neutral-500)"
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"description": "Content padding.",
|
|
309
|
+
"name": "--hx-accordion-content-padding",
|
|
310
|
+
"default": "0 var(--hx-space-4) var(--hx-space-4)"
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"description": "Content text color.",
|
|
314
|
+
"name": "--hx-accordion-content-color",
|
|
315
|
+
"default": "var(--hx-color-neutral-600)"
|
|
227
316
|
}
|
|
228
317
|
],
|
|
229
318
|
"cssParts": [
|
|
230
319
|
{
|
|
231
|
-
"description": "The outer
|
|
232
|
-
"name": "
|
|
320
|
+
"description": "The outer details element container.",
|
|
321
|
+
"name": "item"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"description": "The summary/trigger element.",
|
|
325
|
+
"name": "trigger"
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"description": "The collapsible content area.",
|
|
329
|
+
"name": "content"
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"description": "The expand/collapse icon.",
|
|
333
|
+
"name": "icon"
|
|
233
334
|
}
|
|
234
335
|
],
|
|
235
336
|
"slots": [
|
|
236
337
|
{
|
|
237
|
-
"description": "
|
|
338
|
+
"description": "The heading/trigger content for this item.",
|
|
339
|
+
"name": "trigger"
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
"description": "Default slot for the collapsible body content.",
|
|
238
343
|
"name": ""
|
|
239
344
|
}
|
|
240
345
|
],
|
|
241
346
|
"members": [
|
|
242
347
|
{
|
|
243
348
|
"kind": "field",
|
|
244
|
-
"name": "
|
|
349
|
+
"name": "expanded",
|
|
245
350
|
"type": {
|
|
246
|
-
"text": "
|
|
351
|
+
"text": "boolean"
|
|
247
352
|
},
|
|
248
|
-
"default": "
|
|
249
|
-
"description": "
|
|
250
|
-
"attribute": "
|
|
353
|
+
"default": "false",
|
|
354
|
+
"description": "Whether this item is expanded.",
|
|
355
|
+
"attribute": "expanded",
|
|
356
|
+
"reflects": true
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"kind": "field",
|
|
360
|
+
"name": "disabled",
|
|
361
|
+
"type": {
|
|
362
|
+
"text": "boolean"
|
|
363
|
+
},
|
|
364
|
+
"default": "false",
|
|
365
|
+
"description": "Whether this item is disabled (cannot be toggled).",
|
|
366
|
+
"attribute": "disabled",
|
|
251
367
|
"reflects": true
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "field",
|
|
371
|
+
"name": "level",
|
|
372
|
+
"type": {
|
|
373
|
+
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
374
|
+
},
|
|
375
|
+
"default": "3",
|
|
376
|
+
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
377
|
+
"attribute": "level"
|
|
378
|
+
}
|
|
379
|
+
],
|
|
380
|
+
"events": [
|
|
381
|
+
{
|
|
382
|
+
"name": "hx-expand",
|
|
383
|
+
"type": {
|
|
384
|
+
"text": "CustomEvent<{expanded: boolean, itemId: string}>"
|
|
385
|
+
},
|
|
386
|
+
"description": "Dispatched when the item is expanded."
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"name": "hx-collapse",
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "CustomEvent<{expanded: boolean, itemId: string}>"
|
|
392
|
+
},
|
|
393
|
+
"description": "Dispatched when the item is collapsed."
|
|
252
394
|
}
|
|
253
395
|
],
|
|
254
396
|
"attributes": [
|
|
255
397
|
{
|
|
256
|
-
"name": "
|
|
398
|
+
"name": "expanded",
|
|
257
399
|
"type": {
|
|
258
|
-
"text": "
|
|
400
|
+
"text": "boolean"
|
|
259
401
|
},
|
|
260
|
-
"default": "
|
|
261
|
-
"description": "
|
|
262
|
-
"fieldName": "
|
|
263
|
-
"attribute": "
|
|
402
|
+
"default": "false",
|
|
403
|
+
"description": "Whether this item is expanded.",
|
|
404
|
+
"fieldName": "expanded",
|
|
405
|
+
"attribute": "expanded"
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"name": "disabled",
|
|
409
|
+
"type": {
|
|
410
|
+
"text": "boolean"
|
|
411
|
+
},
|
|
412
|
+
"default": "false",
|
|
413
|
+
"description": "Whether this item is disabled (cannot be toggled).",
|
|
414
|
+
"fieldName": "disabled",
|
|
415
|
+
"attribute": "disabled"
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"name": "level",
|
|
419
|
+
"type": {
|
|
420
|
+
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
421
|
+
},
|
|
422
|
+
"default": "3",
|
|
423
|
+
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
424
|
+
"fieldName": "level",
|
|
425
|
+
"attribute": "level"
|
|
264
426
|
}
|
|
265
427
|
],
|
|
266
428
|
"superclass": {
|
|
267
429
|
"name": "HelixElement",
|
|
268
430
|
"module": "/src/base/index.js"
|
|
269
431
|
},
|
|
270
|
-
"tagName": "hx-accordion",
|
|
432
|
+
"tagName": "hx-accordion-item",
|
|
271
433
|
"customElement": true,
|
|
272
|
-
"summary": "Collapsible
|
|
273
|
-
}
|
|
274
|
-
],
|
|
275
|
-
"exports": [
|
|
276
|
-
{
|
|
277
|
-
"kind": "js",
|
|
278
|
-
"name": "HelixAccordion",
|
|
279
|
-
"declaration": {
|
|
280
|
-
"name": "HelixAccordion",
|
|
281
|
-
"module": "src/components/hx-accordion/hx-accordion.ts"
|
|
282
|
-
}
|
|
434
|
+
"summary": "Collapsible panel that can be expanded or collapsed."
|
|
283
435
|
},
|
|
284
436
|
{
|
|
285
|
-
"kind": "
|
|
286
|
-
"name": "
|
|
287
|
-
"
|
|
288
|
-
"
|
|
289
|
-
|
|
290
|
-
}
|
|
437
|
+
"kind": "variable",
|
|
438
|
+
"name": "detail",
|
|
439
|
+
"type": {
|
|
440
|
+
"text": "object"
|
|
441
|
+
},
|
|
442
|
+
"default": "{ expanded, itemId: this.id || '' }"
|
|
291
443
|
}
|
|
292
|
-
]
|
|
293
|
-
},
|
|
294
|
-
{
|
|
295
|
-
"kind": "javascript-module",
|
|
296
|
-
"path": "src/components/hx-accordion/index.ts",
|
|
297
|
-
"declarations": [],
|
|
444
|
+
],
|
|
298
445
|
"exports": [
|
|
299
|
-
{
|
|
300
|
-
"kind": "js",
|
|
301
|
-
"name": "HelixAccordion",
|
|
302
|
-
"declaration": {
|
|
303
|
-
"name": "HelixAccordion",
|
|
304
|
-
"module": "./hx-accordion.js"
|
|
305
|
-
}
|
|
306
|
-
},
|
|
307
446
|
{
|
|
308
447
|
"kind": "js",
|
|
309
448
|
"name": "HelixAccordionItem",
|
|
310
449
|
"declaration": {
|
|
311
450
|
"name": "HelixAccordionItem",
|
|
312
|
-
"module": "
|
|
451
|
+
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
313
452
|
}
|
|
314
453
|
},
|
|
315
454
|
{
|
|
316
|
-
"kind": "
|
|
317
|
-
"name": "
|
|
455
|
+
"kind": "custom-element-definition",
|
|
456
|
+
"name": "hx-accordion-item",
|
|
318
457
|
"declaration": {
|
|
319
|
-
"name": "
|
|
320
|
-
"module": "
|
|
458
|
+
"name": "HelixAccordionItem",
|
|
459
|
+
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
321
460
|
}
|
|
322
461
|
}
|
|
323
462
|
]
|
|
324
463
|
},
|
|
325
464
|
{
|
|
326
465
|
"kind": "javascript-module",
|
|
327
|
-
"path": "src/components/hx-
|
|
466
|
+
"path": "src/components/hx-accordion/hx-accordion.ts",
|
|
328
467
|
"declarations": [
|
|
329
468
|
{
|
|
330
469
|
"kind": "class",
|
|
331
|
-
"description": "
|
|
332
|
-
"name": "
|
|
470
|
+
"description": "An accordion container that manages collapsible content sections.",
|
|
471
|
+
"name": "HelixAccordion",
|
|
333
472
|
"cssProperties": [
|
|
334
473
|
{
|
|
335
|
-
"description": "
|
|
336
|
-
"name": "--hx-
|
|
337
|
-
"default": "
|
|
338
|
-
},
|
|
339
|
-
{
|
|
340
|
-
"description": "Bar border (default variant).",
|
|
341
|
-
"name": "--hx-action-bar-border",
|
|
342
|
-
"default": "none"
|
|
343
|
-
},
|
|
344
|
-
{
|
|
345
|
-
"description": "Inner padding.",
|
|
346
|
-
"name": "--hx-action-bar-padding",
|
|
347
|
-
"default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
|
|
348
|
-
},
|
|
349
|
-
{
|
|
350
|
-
"description": "Gap between slotted items.",
|
|
351
|
-
"name": "--hx-action-bar-gap",
|
|
352
|
-
"default": "var(--hx-space-2,0.5rem)"
|
|
353
|
-
},
|
|
354
|
-
{
|
|
355
|
-
"description": "Z-index when sticky or bottom position.",
|
|
356
|
-
"name": "--hx-action-bar-z-index",
|
|
357
|
-
"default": "10"
|
|
474
|
+
"description": "Outer border radius.",
|
|
475
|
+
"name": "--hx-accordion-border-radius",
|
|
476
|
+
"default": "var(--hx-border-radius-md)"
|
|
358
477
|
},
|
|
359
478
|
{
|
|
360
|
-
"description": "
|
|
361
|
-
"name": "--hx-
|
|
362
|
-
"default": "
|
|
479
|
+
"description": "CSS custom property.",
|
|
480
|
+
"name": "--hx-accordion-font-family",
|
|
481
|
+
"default": "var(--hx-font-family-sans)"
|
|
363
482
|
},
|
|
364
483
|
{
|
|
365
|
-
"description": "
|
|
366
|
-
"name": "--hx-
|
|
367
|
-
"default": "0px"
|
|
484
|
+
"description": "Font family.",
|
|
485
|
+
"name": "--hx-font-family-sans"
|
|
368
486
|
},
|
|
369
487
|
{
|
|
370
488
|
"description": "CSS custom property.",
|
|
371
489
|
"name": "--hx-border-radius-md"
|
|
372
|
-
},
|
|
373
|
-
{
|
|
374
|
-
"description": "Width.",
|
|
375
|
-
"name": "--hx-border-width-thin"
|
|
376
|
-
},
|
|
377
|
-
{
|
|
378
|
-
"description": "Color.",
|
|
379
|
-
"name": "--hx-color-neutral-0"
|
|
380
|
-
},
|
|
381
|
-
{
|
|
382
|
-
"description": "Color.",
|
|
383
|
-
"name": "--hx-color-neutral-200"
|
|
384
|
-
},
|
|
385
|
-
{
|
|
386
|
-
"description": "Color.",
|
|
387
|
-
"name": "--hx-color-neutral-50"
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"description": "Size token.",
|
|
391
|
-
"name": "--hx-size-8"
|
|
392
|
-
},
|
|
393
|
-
{
|
|
394
|
-
"description": "Size token.",
|
|
395
|
-
"name": "--hx-size-10"
|
|
396
|
-
},
|
|
397
|
-
{
|
|
398
|
-
"description": "Size token.",
|
|
399
|
-
"name": "--hx-size-12"
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"description": "Spacing token.",
|
|
403
|
-
"name": "--hx-space-1"
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
"description": "Spacing token.",
|
|
407
|
-
"name": "--hx-space-2"
|
|
408
|
-
},
|
|
409
|
-
{
|
|
410
|
-
"description": "Spacing token.",
|
|
411
|
-
"name": "--hx-space-3"
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
"description": "Spacing token.",
|
|
415
|
-
"name": "--hx-space-4"
|
|
416
490
|
}
|
|
417
491
|
],
|
|
418
492
|
"cssParts": [
|
|
419
493
|
{
|
|
420
|
-
"description": "The
|
|
421
|
-
"name": "
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"description": "The start (left) slot wrapper.",
|
|
425
|
-
"name": "start"
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"description": "The center (default) slot wrapper.",
|
|
429
|
-
"name": "center"
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"description": "The end (right) slot wrapper.",
|
|
433
|
-
"name": "end"
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
"description": "The overflow slot wrapper (hidden when no overflow content).",
|
|
437
|
-
"name": "overflow"
|
|
494
|
+
"description": "The outer container wrapping all accordion items.",
|
|
495
|
+
"name": "accordion"
|
|
438
496
|
}
|
|
439
497
|
],
|
|
440
498
|
"slots": [
|
|
441
499
|
{
|
|
442
|
-
"description": "
|
|
443
|
-
"name": "start"
|
|
444
|
-
},
|
|
445
|
-
{
|
|
446
|
-
"description": "Center content (default slot).",
|
|
500
|
+
"description": "Default slot for hx-accordion-item elements.",
|
|
447
501
|
"name": ""
|
|
448
|
-
},
|
|
449
|
-
{
|
|
450
|
-
"description": "Right-aligned actions.",
|
|
451
|
-
"name": "end"
|
|
452
|
-
},
|
|
453
|
-
{
|
|
454
|
-
"description": "Actions revealed when the bar is constrained for space.",
|
|
455
|
-
"name": "overflow"
|
|
456
502
|
}
|
|
457
503
|
],
|
|
458
504
|
"members": [
|
|
459
505
|
{
|
|
460
506
|
"kind": "field",
|
|
461
|
-
"name": "
|
|
462
|
-
"type": {
|
|
463
|
-
"text": "'sm' | 'md' | 'lg'"
|
|
464
|
-
},
|
|
465
|
-
"default": "'md'",
|
|
466
|
-
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
467
|
-
"attribute": "hx-size",
|
|
468
|
-
"reflects": true
|
|
469
|
-
},
|
|
470
|
-
{
|
|
471
|
-
"kind": "field",
|
|
472
|
-
"name": "variant",
|
|
473
|
-
"type": {
|
|
474
|
-
"text": "'default' | 'outlined' | 'filled'"
|
|
475
|
-
},
|
|
476
|
-
"default": "'default'",
|
|
477
|
-
"description": "Visual variant controlling the bar background.",
|
|
478
|
-
"attribute": "variant",
|
|
479
|
-
"reflects": true
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"kind": "field",
|
|
483
|
-
"name": "position",
|
|
507
|
+
"name": "mode",
|
|
484
508
|
"type": {
|
|
485
|
-
"text": "'
|
|
509
|
+
"text": "'single' | 'multi'"
|
|
486
510
|
},
|
|
487
|
-
"default": "'
|
|
488
|
-
"description": "
|
|
489
|
-
"attribute": "
|
|
511
|
+
"default": "'single'",
|
|
512
|
+
"description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
|
|
513
|
+
"attribute": "mode",
|
|
490
514
|
"reflects": true
|
|
491
|
-
},
|
|
492
|
-
{
|
|
493
|
-
"kind": "field",
|
|
494
|
-
"name": "accessibleLabel",
|
|
495
|
-
"type": {
|
|
496
|
-
"text": "string"
|
|
497
|
-
},
|
|
498
|
-
"default": "''",
|
|
499
|
-
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
500
|
-
"attribute": "accessible-label"
|
|
501
515
|
}
|
|
502
516
|
],
|
|
503
517
|
"attributes": [
|
|
504
518
|
{
|
|
505
|
-
"name": "
|
|
506
|
-
"type": {
|
|
507
|
-
"text": "'sm' | 'md' | 'lg'"
|
|
508
|
-
},
|
|
509
|
-
"default": "'md'",
|
|
510
|
-
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
511
|
-
"fieldName": "size",
|
|
512
|
-
"attribute": "hx-size"
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
"name": "variant",
|
|
516
|
-
"type": {
|
|
517
|
-
"text": "'default' | 'outlined' | 'filled'"
|
|
518
|
-
},
|
|
519
|
-
"default": "'default'",
|
|
520
|
-
"description": "Visual variant controlling the bar background.",
|
|
521
|
-
"fieldName": "variant",
|
|
522
|
-
"attribute": "variant"
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"name": "position",
|
|
526
|
-
"type": {
|
|
527
|
-
"text": "'top' | 'bottom' | 'sticky'"
|
|
528
|
-
},
|
|
529
|
-
"default": "'top'",
|
|
530
|
-
"description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
|
|
531
|
-
"fieldName": "position",
|
|
532
|
-
"attribute": "position"
|
|
533
|
-
},
|
|
534
|
-
{
|
|
535
|
-
"name": "accessible-label",
|
|
519
|
+
"name": "mode",
|
|
536
520
|
"type": {
|
|
537
|
-
"text": "
|
|
521
|
+
"text": "'single' | 'multi'"
|
|
538
522
|
},
|
|
539
|
-
"default": "''",
|
|
540
|
-
"description": "
|
|
541
|
-
"fieldName": "
|
|
542
|
-
"attribute": "
|
|
523
|
+
"default": "'single'",
|
|
524
|
+
"description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
|
|
525
|
+
"fieldName": "mode",
|
|
526
|
+
"attribute": "mode"
|
|
543
527
|
}
|
|
544
528
|
],
|
|
545
529
|
"superclass": {
|
|
546
530
|
"name": "HelixElement",
|
|
547
531
|
"module": "/src/base/index.js"
|
|
548
532
|
},
|
|
549
|
-
"tagName": "hx-
|
|
533
|
+
"tagName": "hx-accordion",
|
|
550
534
|
"customElement": true,
|
|
551
|
-
"summary": "
|
|
535
|
+
"summary": "Collapsible content sections with single or multi-expand modes."
|
|
552
536
|
}
|
|
553
537
|
],
|
|
554
538
|
"exports": [
|
|
555
539
|
{
|
|
556
540
|
"kind": "js",
|
|
557
|
-
"name": "
|
|
541
|
+
"name": "HelixAccordion",
|
|
558
542
|
"declaration": {
|
|
559
|
-
"name": "
|
|
560
|
-
"module": "src/components/hx-
|
|
543
|
+
"name": "HelixAccordion",
|
|
544
|
+
"module": "src/components/hx-accordion/hx-accordion.ts"
|
|
561
545
|
}
|
|
562
546
|
},
|
|
563
547
|
{
|
|
564
548
|
"kind": "custom-element-definition",
|
|
565
|
-
"name": "hx-
|
|
549
|
+
"name": "hx-accordion",
|
|
566
550
|
"declaration": {
|
|
567
|
-
"name": "
|
|
568
|
-
"module": "src/components/hx-
|
|
551
|
+
"name": "HelixAccordion",
|
|
552
|
+
"module": "src/components/hx-accordion/hx-accordion.ts"
|
|
569
553
|
}
|
|
570
554
|
}
|
|
571
555
|
]
|
|
572
556
|
},
|
|
573
557
|
{
|
|
574
558
|
"kind": "javascript-module",
|
|
575
|
-
"path": "src/components/hx-
|
|
559
|
+
"path": "src/components/hx-accordion/index.ts",
|
|
576
560
|
"declarations": [],
|
|
577
561
|
"exports": [
|
|
578
562
|
{
|
|
579
563
|
"kind": "js",
|
|
580
|
-
"name": "
|
|
564
|
+
"name": "HelixAccordion",
|
|
581
565
|
"declaration": {
|
|
582
|
-
"name": "
|
|
583
|
-
"module": "./hx-
|
|
566
|
+
"name": "HelixAccordion",
|
|
567
|
+
"module": "./hx-accordion.js"
|
|
568
|
+
}
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
"kind": "js",
|
|
572
|
+
"name": "HelixAccordionItem",
|
|
573
|
+
"declaration": {
|
|
574
|
+
"name": "HelixAccordionItem",
|
|
575
|
+
"module": "./hx-accordion-item.js"
|
|
576
|
+
}
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"kind": "js",
|
|
580
|
+
"name": "HxAccordionToggleDetail",
|
|
581
|
+
"declaration": {
|
|
582
|
+
"name": "HxAccordionToggleDetail",
|
|
583
|
+
"module": "./hx-accordion-item.js"
|
|
584
584
|
}
|
|
585
585
|
}
|
|
586
586
|
]
|