@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.
@@ -4,583 +4,583 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "src/components/hx-action-bar/hx-action-bar.ts",
7
+ "path": "src/components/hx-accordion/hx-accordion-item.ts",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
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",
11
+ "description": "An individual accordion item with collapsible content.",
12
+ "name": "HelixAccordionItem",
13
13
  "cssProperties": [
14
14
  {
15
- "description": "Bar background color (default variant).",
16
- "name": "--hx-action-bar-bg",
17
- "default": "transparent"
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": "Size token.",
71
- "name": "--hx-size-8"
20
+ "description": "Trigger padding.",
21
+ "name": "--hx-accordion-trigger-padding",
22
+ "default": "var(--hx-space-4)"
72
23
  },
73
24
  {
74
- "description": "Size token.",
75
- "name": "--hx-size-10"
25
+ "description": "Trigger text color.",
26
+ "name": "--hx-accordion-trigger-color",
27
+ "default": "var(--hx-color-neutral-800)"
76
28
  },
77
29
  {
78
- "description": "Size token.",
79
- "name": "--hx-size-12"
30
+ "description": "Trigger background color.",
31
+ "name": "--hx-accordion-trigger-bg",
32
+ "default": "transparent"
80
33
  },
81
34
  {
82
- "description": "Spacing token.",
83
- "name": "--hx-space-1"
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": "Spacing token.",
87
- "name": "--hx-space-2"
40
+ "description": "Icon color.",
41
+ "name": "--hx-accordion-icon-color",
42
+ "default": "var(--hx-color-neutral-500)"
88
43
  },
89
44
  {
90
- "description": "Spacing token.",
91
- "name": "--hx-space-3"
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": "Spacing token.",
95
- "name": "--hx-space-4"
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 root toolbar container element.",
101
- "name": "base"
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 center (default) slot wrapper.",
109
- "name": "center"
61
+ "description": "The summary/trigger element.",
62
+ "name": "trigger"
110
63
  },
111
64
  {
112
- "description": "The end (right) slot wrapper.",
113
- "name": "end"
65
+ "description": "The collapsible content area.",
66
+ "name": "content"
114
67
  },
115
68
  {
116
- "description": "The overflow slot wrapper (hidden when no overflow content).",
117
- "name": "overflow"
69
+ "description": "The expand/collapse icon.",
70
+ "name": "icon"
118
71
  }
119
72
  ],
120
73
  "slots": [
121
74
  {
122
- "description": "Left-aligned actions.",
123
- "name": "start"
75
+ "description": "The heading/trigger content for this item.",
76
+ "name": "trigger"
124
77
  },
125
78
  {
126
- "description": "Center content (default slot).",
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": "size",
86
+ "name": "expanded",
142
87
  "type": {
143
- "text": "'sm' | 'md' | 'lg'"
88
+ "text": "boolean"
144
89
  },
145
- "default": "'md'",
146
- "description": "Size of the action bar — propagated as a data attribute to slotted children.",
147
- "attribute": "hx-size",
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": "variant",
97
+ "name": "disabled",
153
98
  "type": {
154
- "text": "'default' | 'outlined' | 'filled'"
99
+ "text": "boolean"
155
100
  },
156
- "default": "'default'",
157
- "description": "Visual variant controlling the bar background.",
158
- "attribute": "variant",
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": "position",
108
+ "name": "level",
164
109
  "type": {
165
- "text": "'top' | 'bottom' | 'sticky'"
110
+ "text": "1 | 2 | 3 | 4 | 5 | 6"
166
111
  },
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
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
- "kind": "field",
174
- "name": "accessibleLabel",
126
+ "name": "hx-collapse",
175
127
  "type": {
176
- "text": "string"
128
+ "text": "CustomEvent<{expanded: boolean, itemId: string}>"
177
129
  },
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"
130
+ "description": "Dispatched when the item is collapsed."
181
131
  }
182
132
  ],
183
133
  "attributes": [
184
134
  {
185
- "name": "hx-size",
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": "'default' | 'outlined' | 'filled'"
137
+ "text": "boolean"
198
138
  },
199
- "default": "'default'",
200
- "description": "Visual variant controlling the bar background.",
201
- "fieldName": "variant",
202
- "attribute": "variant"
139
+ "default": "false",
140
+ "description": "Whether this item is expanded.",
141
+ "fieldName": "expanded",
142
+ "attribute": "expanded"
203
143
  },
204
144
  {
205
- "name": "position",
145
+ "name": "disabled",
206
146
  "type": {
207
- "text": "'top' | 'bottom' | 'sticky'"
147
+ "text": "boolean"
208
148
  },
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"
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": "accessible-label",
155
+ "name": "level",
216
156
  "type": {
217
- "text": "string"
157
+ "text": "1 | 2 | 3 | 4 | 5 | 6"
218
158
  },
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"
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-action-bar",
169
+ "tagName": "hx-accordion-item",
230
170
  "customElement": true,
231
- "summary": "Horizontal action bar for grouping related controls."
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": "HelixActionBar",
185
+ "name": "HelixAccordionItem",
238
186
  "declaration": {
239
- "name": "HelixActionBar",
240
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
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-action-bar",
193
+ "name": "hx-accordion-item",
246
194
  "declaration": {
247
- "name": "HelixActionBar",
248
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
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-action-bar/index.ts",
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 individual accordion item with collapsible content.",
275
- "name": "HelixAccordionItem",
207
+ "description": "An accordion container that manages collapsible content sections.",
208
+ "name": "HelixAccordion",
276
209
  "cssProperties": [
277
210
  {
278
- "description": "Border color between items.",
279
- "name": "--hx-accordion-border-color",
280
- "default": "var(--hx-color-neutral-200)"
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": "Icon color.",
304
- "name": "--hx-accordion-icon-color",
305
- "default": "var(--hx-color-neutral-500)"
216
+ "description": "CSS custom property.",
217
+ "name": "--hx-accordion-font-family",
218
+ "default": "var(--hx-font-family-sans)"
306
219
  },
307
220
  {
308
- "description": "Content padding.",
309
- "name": "--hx-accordion-content-padding",
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": "Content text color.",
314
- "name": "--hx-accordion-content-color",
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 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"
231
+ "description": "The outer container wrapping all accordion items.",
232
+ "name": "accordion"
334
233
  }
335
234
  ],
336
235
  "slots": [
337
236
  {
338
- "description": "The heading/trigger content for this item.",
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": "expanded",
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": "boolean"
246
+ "text": "'single' | 'multi'"
363
247
  },
364
- "default": "false",
365
- "description": "Whether this item is disabled (cannot be toggled).",
366
- "attribute": "disabled",
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": "expanded",
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": "1 | 2 | 3 | 4 | 5 | 6"
258
+ "text": "'single' | 'multi'"
421
259
  },
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"
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-item",
270
+ "tagName": "hx-accordion",
433
271
  "customElement": true,
434
- "summary": "Collapsible panel that can be expanded or collapsed."
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": "variable",
438
- "name": "detail",
439
- "type": {
440
- "text": "object"
441
- },
442
- "default": "{ expanded, itemId: this.id || '' }"
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": "src/components/hx-accordion/hx-accordion-item.ts"
312
+ "module": "./hx-accordion-item.js"
452
313
  }
453
314
  },
454
315
  {
455
- "kind": "custom-element-definition",
456
- "name": "hx-accordion-item",
316
+ "kind": "js",
317
+ "name": "HxAccordionToggleDetail",
457
318
  "declaration": {
458
- "name": "HelixAccordionItem",
459
- "module": "src/components/hx-accordion/hx-accordion-item.ts"
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-accordion/hx-accordion.ts",
327
+ "path": "src/components/hx-action-bar/hx-action-bar.ts",
467
328
  "declarations": [
468
329
  {
469
330
  "kind": "class",
470
- "description": "An accordion container that manages collapsible content sections.",
471
- "name": "HelixAccordion",
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": "Outer border radius.",
475
- "name": "--hx-accordion-border-radius",
476
- "default": "var(--hx-border-radius-md)"
335
+ "description": "Bar background color (default variant).",
336
+ "name": "--hx-action-bar-bg",
337
+ "default": "transparent"
477
338
  },
478
339
  {
479
- "description": "CSS custom property.",
480
- "name": "--hx-accordion-font-family",
481
- "default": "var(--hx-font-family-sans)"
340
+ "description": "Bar border (default variant).",
341
+ "name": "--hx-action-bar-border",
342
+ "default": "none"
482
343
  },
483
344
  {
484
- "description": "Font family.",
485
- "name": "--hx-font-family-sans"
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 outer container wrapping all accordion items.",
495
- "name": "accordion"
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": "Default slot for hx-accordion-item elements.",
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": "mode",
461
+ "name": "size",
508
462
  "type": {
509
- "text": "'single' | 'multi'"
463
+ "text": "'sm' | 'md' | 'lg'"
510
464
  },
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",
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": "mode",
505
+ "name": "hx-size",
520
506
  "type": {
521
- "text": "'single' | 'multi'"
507
+ "text": "'sm' | 'md' | 'lg'"
522
508
  },
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"
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-accordion",
549
+ "tagName": "hx-action-bar",
534
550
  "customElement": true,
535
- "summary": "Collapsible content sections with single or multi-expand modes."
551
+ "summary": "Horizontal action bar for grouping related controls."
536
552
  }
537
553
  ],
538
554
  "exports": [
539
555
  {
540
556
  "kind": "js",
541
- "name": "HelixAccordion",
557
+ "name": "HelixActionBar",
542
558
  "declaration": {
543
- "name": "HelixAccordion",
544
- "module": "src/components/hx-accordion/hx-accordion.ts"
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-accordion",
565
+ "name": "hx-action-bar",
550
566
  "declaration": {
551
- "name": "HelixAccordion",
552
- "module": "src/components/hx-accordion/hx-accordion.ts"
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-accordion/index.ts",
575
+ "path": "src/components/hx-action-bar/index.ts",
560
576
  "declarations": [],
561
577
  "exports": [
562
578
  {
563
579
  "kind": "js",
564
- "name": "HelixAccordion",
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": "HxAccordionToggleDetail",
583
- "module": "./hx-accordion-item.js"
582
+ "name": "HelixActionBar",
583
+ "module": "./hx-action-bar.js"
584
584
  }
585
585
  }
586
586
  ]