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