@helixui/library 3.9.0-next.149 → 3.9.0-next.151

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +111 -89
  2. package/custom-elements.json +415 -415
  3. package/dist/css/index.css +1 -1
  4. package/dist/css/manifest.json +1 -1
  5. package/package.json +2 -2
package/custom-elements.json CHANGED
@@ -4,632 +4,632 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "src/components/hx-accordion/hx-accordion-item.ts",
7
+ "path": "src/components/hx-action-bar/hx-action-bar.ts",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "An individual accordion item with collapsible content.\n\n## Architecture Note: Slot Projection vs. Host-Canonical (group-4 round-1)\n\n`hx-accordion-item` deliberately does NOT participate in the\nhost-canonical / `internals.ariaLabelledByElements` pattern used by every\nother group-2/3/4 component. Rationale:\n\n 1. The trigger label comes from `<slot name=\"trigger\">` — consumer\n light-DOM projected directly into the `<summary>` element. AT reads\n the slot-projected text natively because slot projection preserves\n accessible name (the `<summary>` IS the heading and consumes the\n slotted text in its own accessible name computation).\n 2. `aria-labelledby=\"${_uid}-trigger\"` on the inner content region and\n `aria-controls=\"${_uid}-content\"` on the summary BOTH resolve\n same-shadow-root, which works correctly across every AT — these\n IDREFs never cross a shadow boundary.\n 3. Pushing these ids through `internals.ariaLabelledByElements` would\n either duplicate the wiring (heading announced twice) or break the\n native `<details>/<summary>` toggle semantics (the host carrying\n `role=\"heading\"` would shadow the summary's own heading projection).\n\n`role=\"heading\"` on `<summary>` (with `aria-level=N`) is the APG-canonical\nAccordion pattern. Per the APG note, `<summary>` MUST be a direct child\nof `<details>` for the native toggle to function — wrapping it in an\n`<h3>` would forfeit native disclosure. The role-on-summary approach is\nthe authoritative compromise. NVDA, JAWS, and VoiceOver all announce the\nsummary as a heading at the configured level when this pattern is used.\n\n`aria-controls` on the summary points at the shadow-internal content\nregion; APG marks the relationship as implicit via the heading + region\nstructure, so AT not following the IDREF still announces correctly. The\nIDREF is a hint, not a requirement — and because both ids are in the\nsame shadow root, it resolves cleanly when AT does follow it. This\nmatches the popover/dropdown intentional `aria-controls` omission for\nthe cross-shadow case (see those components' code comments).",
12
- "name": "HelixAccordionItem",
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": "Border color between items.",
16
- "name": "--hx-accordion-border-color",
17
- "default": "var(--hx-color-neutral-200)"
15
+ "description": "Bar background color (default variant).",
16
+ "name": "--hx-action-bar-bg",
17
+ "default": "transparent"
18
18
  },
19
19
  {
20
- "description": "Trigger padding.",
21
- "name": "--hx-accordion-trigger-padding",
22
- "default": "var(--hx-space-4)"
20
+ "description": "Bar border (default variant).",
21
+ "name": "--hx-action-bar-border",
22
+ "default": "none"
23
23
  },
24
24
  {
25
- "description": "Trigger text color.",
26
- "name": "--hx-accordion-trigger-color",
27
- "default": "var(--hx-color-neutral-800)"
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": "Trigger background color.",
31
- "name": "--hx-accordion-trigger-bg",
32
- "default": "transparent"
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": "Trigger hover background.",
36
- "name": "--hx-accordion-trigger-hover-bg",
37
- "default": "var(--hx-color-neutral-50)"
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": "Icon color.",
41
- "name": "--hx-accordion-icon-color",
42
- "default": "var(--hx-color-neutral-500)"
40
+ "description": "Padding.",
41
+ "name": "--hx-action-bar-padding-block-start",
42
+ "default": "0px"
43
43
  },
44
44
  {
45
- "description": "Content padding.",
46
- "name": "--hx-accordion-content-padding",
47
- "default": "0 var(--hx-space-4) var(--hx-space-4)"
45
+ "description": "Padding.",
46
+ "name": "--hx-action-bar-padding-block-end",
47
+ "default": "0px"
48
48
  },
49
49
  {
50
- "description": "Content text color.",
51
- "name": "--hx-accordion-content-color",
52
- "default": "var(--hx-color-neutral-600)"
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 outer details element container.",
58
- "name": "item"
100
+ "description": "The root toolbar container element.",
101
+ "name": "base"
59
102
  },
60
103
  {
61
- "description": "The summary/trigger element.",
62
- "name": "trigger"
104
+ "description": "The start (left) slot wrapper.",
105
+ "name": "start"
63
106
  },
64
107
  {
65
- "description": "The collapsible content area.",
66
- "name": "content"
108
+ "description": "The center (default) slot wrapper.",
109
+ "name": "center"
67
110
  },
68
111
  {
69
- "description": "The expand/collapse icon.",
70
- "name": "icon"
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": "The heading/trigger content for this item.",
76
- "name": "trigger"
122
+ "description": "Left-aligned actions.",
123
+ "name": "start"
77
124
  },
78
125
  {
79
- "description": "Default slot for the collapsible body content.",
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": "expanded",
141
+ "name": "size",
87
142
  "type": {
88
- "text": "boolean"
143
+ "text": "'sm' | 'md' | 'lg'"
89
144
  },
90
- "default": "false",
91
- "description": "Whether this item is expanded.",
92
- "attribute": "expanded",
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": "disabled",
152
+ "name": "variant",
98
153
  "type": {
99
- "text": "boolean"
154
+ "text": "'default' | 'outlined' | 'filled'"
100
155
  },
101
- "default": "false",
102
- "description": "Whether this item is disabled (cannot be toggled).",
103
- "attribute": "disabled",
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": "level",
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": "CustomEvent<{expanded: boolean, itemId: string}>"
165
+ "text": "'top' | 'bottom' | 'sticky'"
122
166
  },
123
- "description": "Dispatched when the item is expanded."
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
- "name": "hx-collapse",
173
+ "kind": "field",
174
+ "name": "accessibleLabel",
127
175
  "type": {
128
- "text": "CustomEvent<{expanded: boolean, itemId: string}>"
176
+ "text": "string"
129
177
  },
130
- "description": "Dispatched when the item is collapsed."
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": "expanded",
185
+ "name": "hx-size",
136
186
  "type": {
137
- "text": "boolean"
187
+ "text": "'sm' | 'md' | 'lg'"
138
188
  },
139
- "default": "false",
140
- "description": "Whether this item is expanded.",
141
- "fieldName": "expanded",
142
- "attribute": "expanded"
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": "disabled",
195
+ "name": "variant",
146
196
  "type": {
147
- "text": "boolean"
197
+ "text": "'default' | 'outlined' | 'filled'"
148
198
  },
149
- "default": "false",
150
- "description": "Whether this item is disabled (cannot be toggled).",
151
- "fieldName": "disabled",
152
- "attribute": "disabled"
199
+ "default": "'default'",
200
+ "description": "Visual variant controlling the bar background.",
201
+ "fieldName": "variant",
202
+ "attribute": "variant"
153
203
  },
154
204
  {
155
- "name": "level",
205
+ "name": "position",
156
206
  "type": {
157
- "text": "1 | 2 | 3 | 4 | 5 | 6"
207
+ "text": "'top' | 'bottom' | 'sticky'"
158
208
  },
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"
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-accordion-item",
229
+ "tagName": "hx-action-bar",
170
230
  "customElement": true,
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 || '' }"
180
- }
181
- ],
182
- "exports": [
183
- {
184
- "kind": "js",
185
- "name": "HelixAccordionItem",
186
- "declaration": {
187
- "name": "HelixAccordionItem",
188
- "module": "src/components/hx-accordion/hx-accordion-item.ts"
189
- }
190
- },
191
- {
192
- "kind": "custom-element-definition",
193
- "name": "hx-accordion-item",
194
- "declaration": {
195
- "name": "HelixAccordionItem",
196
- "module": "src/components/hx-accordion/hx-accordion-item.ts"
197
- }
198
- }
199
- ]
200
- },
201
- {
202
- "kind": "javascript-module",
203
- "path": "src/components/hx-accordion/hx-accordion.ts",
204
- "declarations": [
205
- {
206
- "kind": "class",
207
- "description": "An accordion container that manages collapsible content sections.",
208
- "name": "HelixAccordion",
209
- "cssProperties": [
210
- {
211
- "description": "Outer border radius.",
212
- "name": "--hx-accordion-border-radius",
213
- "default": "var(--hx-border-radius-md)"
214
- },
215
- {
216
- "description": "CSS custom property.",
217
- "name": "--hx-accordion-font-family",
218
- "default": "var(--hx-font-family-sans)"
231
+ "summary": "Horizontal action bar for grouping related controls.",
232
+ "aaaCertified": true,
233
+ "aaaCertifiedDate": "2026-05-08",
234
+ "helixMeta": {
235
+ "keyboardContract": {
236
+ "navigate": [
237
+ "Arrow"
238
+ ],
239
+ "activate": [
240
+ "Enter",
241
+ "Space"
242
+ ],
243
+ "disabledSuppresses": true
219
244
  },
220
- {
221
- "description": "Font family.",
222
- "name": "--hx-font-family-sans"
245
+ "ariaPattern": "toolbar",
246
+ "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/",
247
+ "forcedColorsSupported": true,
248
+ "stability": "stable",
249
+ "since": "3.7.0",
250
+ "formAssociated": false,
251
+ "themeAware": true,
252
+ "brandAware": true,
253
+ "drupalSdcEligible": true,
254
+ "reactWrapperStatus": "complete",
255
+ "priorityTier": "P0",
256
+ "phiHandles": false,
257
+ "clinicalContext": "none",
258
+ "aaa": {
259
+ "certified": true,
260
+ "certifiedDate": "2026-05-08",
261
+ "criteria": [
262
+ "1.4.9",
263
+ "2.1.3",
264
+ "3.2.5",
265
+ "forced-colors",
266
+ "apg-keyboard",
267
+ "1.4.6",
268
+ "2.4.12",
269
+ "2.4.13",
270
+ "2.5.5"
271
+ ],
272
+ "auditUrl": "src/components/hx-action-bar/AAA-AUDIT.md"
223
273
  },
224
- {
225
- "description": "CSS custom property.",
226
- "name": "--hx-border-radius-md"
227
- }
228
- ],
229
- "cssParts": [
230
- {
231
- "description": "The outer container wrapping all accordion items.",
232
- "name": "accordion"
233
- }
234
- ],
235
- "slots": [
236
- {
237
- "description": "Default slot for hx-accordion-item elements.",
238
- "name": ""
239
- }
240
- ],
241
- "members": [
242
- {
243
- "kind": "field",
244
- "name": "mode",
245
- "type": {
246
- "text": "'single' | 'multi'"
247
- },
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",
251
- "reflects": true
252
- }
253
- ],
254
- "attributes": [
255
- {
256
- "name": "mode",
257
- "type": {
258
- "text": "'single' | 'multi'"
259
- },
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"
274
+ "figma": {
275
+ "componentName": "hx-action-bar"
264
276
  }
265
- ],
266
- "superclass": {
267
- "name": "HelixElement",
268
- "module": "/src/base/index.js"
269
- },
270
- "tagName": "hx-accordion",
271
- "customElement": true,
272
- "summary": "Collapsible content sections with single or multi-expand modes.",
273
- "helixMeta": {
274
- "priorityTier": "P2"
275
277
  }
276
278
  }
277
279
  ],
278
280
  "exports": [
279
281
  {
280
282
  "kind": "js",
281
- "name": "HelixAccordion",
283
+ "name": "HelixActionBar",
282
284
  "declaration": {
283
- "name": "HelixAccordion",
284
- "module": "src/components/hx-accordion/hx-accordion.ts"
285
+ "name": "HelixActionBar",
286
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
285
287
  }
286
288
  },
287
289
  {
288
290
  "kind": "custom-element-definition",
289
- "name": "hx-accordion",
291
+ "name": "hx-action-bar",
290
292
  "declaration": {
291
- "name": "HelixAccordion",
292
- "module": "src/components/hx-accordion/hx-accordion.ts"
293
+ "name": "HelixActionBar",
294
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
293
295
  }
294
296
  }
295
297
  ]
296
298
  },
297
299
  {
298
300
  "kind": "javascript-module",
299
- "path": "src/components/hx-accordion/index.ts",
301
+ "path": "src/components/hx-action-bar/index.ts",
300
302
  "declarations": [],
301
303
  "exports": [
302
304
  {
303
305
  "kind": "js",
304
- "name": "HelixAccordion",
305
- "declaration": {
306
- "name": "HelixAccordion",
307
- "module": "./hx-accordion.js"
308
- }
309
- },
310
- {
311
- "kind": "js",
312
- "name": "HelixAccordionItem",
313
- "declaration": {
314
- "name": "HelixAccordionItem",
315
- "module": "./hx-accordion-item.js"
316
- }
317
- },
318
- {
319
- "kind": "js",
320
- "name": "HxAccordionToggleDetail",
306
+ "name": "HelixActionBar",
321
307
  "declaration": {
322
- "name": "HxAccordionToggleDetail",
323
- "module": "./hx-accordion-item.js"
308
+ "name": "HelixActionBar",
309
+ "module": "./hx-action-bar.js"
324
310
  }
325
311
  }
326
312
  ]
327
313
  },
328
314
  {
329
315
  "kind": "javascript-module",
330
- "path": "src/components/hx-action-bar/hx-action-bar.ts",
316
+ "path": "src/components/hx-accordion/hx-accordion-item.ts",
331
317
  "declarations": [
332
318
  {
333
319
  "kind": "class",
334
- "description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
335
- "name": "HelixActionBar",
320
+ "description": "An individual accordion item with collapsible content.\n\n## Architecture Note: Slot Projection vs. Host-Canonical (group-4 round-1)\n\n`hx-accordion-item` deliberately does NOT participate in the\nhost-canonical / `internals.ariaLabelledByElements` pattern used by every\nother group-2/3/4 component. Rationale:\n\n 1. The trigger label comes from `<slot name=\"trigger\">` — consumer\n light-DOM projected directly into the `<summary>` element. AT reads\n the slot-projected text natively because slot projection preserves\n accessible name (the `<summary>` IS the heading and consumes the\n slotted text in its own accessible name computation).\n 2. `aria-labelledby=\"${_uid}-trigger\"` on the inner content region and\n `aria-controls=\"${_uid}-content\"` on the summary BOTH resolve\n same-shadow-root, which works correctly across every AT — these\n IDREFs never cross a shadow boundary.\n 3. Pushing these ids through `internals.ariaLabelledByElements` would\n either duplicate the wiring (heading announced twice) or break the\n native `<details>/<summary>` toggle semantics (the host carrying\n `role=\"heading\"` would shadow the summary's own heading projection).\n\n`role=\"heading\"` on `<summary>` (with `aria-level=N`) is the APG-canonical\nAccordion pattern. Per the APG note, `<summary>` MUST be a direct child\nof `<details>` for the native toggle to function — wrapping it in an\n`<h3>` would forfeit native disclosure. The role-on-summary approach is\nthe authoritative compromise. NVDA, JAWS, and VoiceOver all announce the\nsummary as a heading at the configured level when this pattern is used.\n\n`aria-controls` on the summary points at the shadow-internal content\nregion; APG marks the relationship as implicit via the heading + region\nstructure, so AT not following the IDREF still announces correctly. The\nIDREF is a hint, not a requirement — and because both ids are in the\nsame shadow root, it resolves cleanly when AT does follow it. This\nmatches the popover/dropdown intentional `aria-controls` omission for\nthe cross-shadow case (see those components' code comments).",
321
+ "name": "HelixAccordionItem",
336
322
  "cssProperties": [
337
323
  {
338
- "description": "Bar background color (default variant).",
339
- "name": "--hx-action-bar-bg",
340
- "default": "transparent"
341
- },
342
- {
343
- "description": "Bar border (default variant).",
344
- "name": "--hx-action-bar-border",
345
- "default": "none"
324
+ "description": "Border color between items.",
325
+ "name": "--hx-accordion-border-color",
326
+ "default": "var(--hx-color-neutral-200)"
346
327
  },
347
328
  {
348
- "description": "Inner padding.",
349
- "name": "--hx-action-bar-padding",
350
- "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
329
+ "description": "Trigger padding.",
330
+ "name": "--hx-accordion-trigger-padding",
331
+ "default": "var(--hx-space-4)"
351
332
  },
352
333
  {
353
- "description": "Gap between slotted items.",
354
- "name": "--hx-action-bar-gap",
355
- "default": "var(--hx-space-2,0.5rem)"
334
+ "description": "Trigger text color.",
335
+ "name": "--hx-accordion-trigger-color",
336
+ "default": "var(--hx-color-neutral-800)"
356
337
  },
357
338
  {
358
- "description": "Z-index when sticky or bottom position.",
359
- "name": "--hx-action-bar-z-index",
360
- "default": "10"
339
+ "description": "Trigger background color.",
340
+ "name": "--hx-accordion-trigger-bg",
341
+ "default": "transparent"
361
342
  },
362
343
  {
363
- "description": "Padding.",
364
- "name": "--hx-action-bar-padding-block-start",
365
- "default": "0px"
344
+ "description": "Trigger hover background.",
345
+ "name": "--hx-accordion-trigger-hover-bg",
346
+ "default": "var(--hx-color-neutral-50)"
366
347
  },
367
348
  {
368
- "description": "Padding.",
369
- "name": "--hx-action-bar-padding-block-end",
370
- "default": "0px"
349
+ "description": "Icon color.",
350
+ "name": "--hx-accordion-icon-color",
351
+ "default": "var(--hx-color-neutral-500)"
371
352
  },
372
353
  {
373
- "description": "CSS custom property.",
374
- "name": "--hx-border-radius-md"
354
+ "description": "Content padding.",
355
+ "name": "--hx-accordion-content-padding",
356
+ "default": "0 var(--hx-space-4) var(--hx-space-4)"
375
357
  },
376
358
  {
377
- "description": "Width.",
378
- "name": "--hx-border-width-thin"
379
- },
359
+ "description": "Content text color.",
360
+ "name": "--hx-accordion-content-color",
361
+ "default": "var(--hx-color-neutral-600)"
362
+ }
363
+ ],
364
+ "cssParts": [
380
365
  {
381
- "description": "Color.",
382
- "name": "--hx-color-neutral-0"
366
+ "description": "The outer details element container.",
367
+ "name": "item"
383
368
  },
384
369
  {
385
- "description": "Color.",
386
- "name": "--hx-color-neutral-200"
370
+ "description": "The summary/trigger element.",
371
+ "name": "trigger"
387
372
  },
388
373
  {
389
- "description": "Color.",
390
- "name": "--hx-color-neutral-50"
374
+ "description": "The collapsible content area.",
375
+ "name": "content"
391
376
  },
392
377
  {
393
- "description": "Size token.",
394
- "name": "--hx-size-8"
395
- },
378
+ "description": "The expand/collapse icon.",
379
+ "name": "icon"
380
+ }
381
+ ],
382
+ "slots": [
396
383
  {
397
- "description": "Size token.",
398
- "name": "--hx-size-10"
384
+ "description": "The heading/trigger content for this item.",
385
+ "name": "trigger"
399
386
  },
400
387
  {
401
- "description": "Size token.",
402
- "name": "--hx-size-12"
403
- },
388
+ "description": "Default slot for the collapsible body content.",
389
+ "name": ""
390
+ }
391
+ ],
392
+ "members": [
404
393
  {
405
- "description": "Spacing token.",
406
- "name": "--hx-space-1"
394
+ "kind": "field",
395
+ "name": "expanded",
396
+ "type": {
397
+ "text": "boolean"
398
+ },
399
+ "default": "false",
400
+ "description": "Whether this item is expanded.",
401
+ "attribute": "expanded",
402
+ "reflects": true
407
403
  },
408
404
  {
409
- "description": "Spacing token.",
410
- "name": "--hx-space-2"
411
- },
412
- {
413
- "description": "Spacing token.",
414
- "name": "--hx-space-3"
405
+ "kind": "field",
406
+ "name": "disabled",
407
+ "type": {
408
+ "text": "boolean"
409
+ },
410
+ "default": "false",
411
+ "description": "Whether this item is disabled (cannot be toggled).",
412
+ "attribute": "disabled",
413
+ "reflects": true
415
414
  },
416
415
  {
417
- "description": "Spacing token.",
418
- "name": "--hx-space-4"
416
+ "kind": "field",
417
+ "name": "level",
418
+ "type": {
419
+ "text": "1 | 2 | 3 | 4 | 5 | 6"
420
+ },
421
+ "default": "3",
422
+ "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.",
423
+ "attribute": "level"
419
424
  }
420
425
  ],
421
- "cssParts": [
426
+ "events": [
422
427
  {
423
- "description": "The root toolbar container element.",
424
- "name": "base"
428
+ "name": "hx-expand",
429
+ "type": {
430
+ "text": "CustomEvent<{expanded: boolean, itemId: string}>"
431
+ },
432
+ "description": "Dispatched when the item is expanded."
425
433
  },
426
434
  {
427
- "description": "The start (left) slot wrapper.",
428
- "name": "start"
429
- },
435
+ "name": "hx-collapse",
436
+ "type": {
437
+ "text": "CustomEvent<{expanded: boolean, itemId: string}>"
438
+ },
439
+ "description": "Dispatched when the item is collapsed."
440
+ }
441
+ ],
442
+ "attributes": [
430
443
  {
431
- "description": "The center (default) slot wrapper.",
432
- "name": "center"
444
+ "name": "expanded",
445
+ "type": {
446
+ "text": "boolean"
447
+ },
448
+ "default": "false",
449
+ "description": "Whether this item is expanded.",
450
+ "fieldName": "expanded",
451
+ "attribute": "expanded"
433
452
  },
434
453
  {
435
- "description": "The end (right) slot wrapper.",
436
- "name": "end"
454
+ "name": "disabled",
455
+ "type": {
456
+ "text": "boolean"
457
+ },
458
+ "default": "false",
459
+ "description": "Whether this item is disabled (cannot be toggled).",
460
+ "fieldName": "disabled",
461
+ "attribute": "disabled"
437
462
  },
438
463
  {
439
- "description": "The overflow slot wrapper (hidden when no overflow content).",
440
- "name": "overflow"
464
+ "name": "level",
465
+ "type": {
466
+ "text": "1 | 2 | 3 | 4 | 5 | 6"
467
+ },
468
+ "default": "3",
469
+ "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.",
470
+ "fieldName": "level",
471
+ "attribute": "level"
441
472
  }
442
473
  ],
443
- "slots": [
474
+ "superclass": {
475
+ "name": "HelixElement",
476
+ "module": "/src/base/index.js"
477
+ },
478
+ "tagName": "hx-accordion-item",
479
+ "customElement": true,
480
+ "summary": "Collapsible panel that can be expanded or collapsed."
481
+ },
482
+ {
483
+ "kind": "variable",
484
+ "name": "detail",
485
+ "type": {
486
+ "text": "object"
487
+ },
488
+ "default": "{ expanded, itemId: this.id || '' }"
489
+ }
490
+ ],
491
+ "exports": [
492
+ {
493
+ "kind": "js",
494
+ "name": "HelixAccordionItem",
495
+ "declaration": {
496
+ "name": "HelixAccordionItem",
497
+ "module": "src/components/hx-accordion/hx-accordion-item.ts"
498
+ }
499
+ },
500
+ {
501
+ "kind": "custom-element-definition",
502
+ "name": "hx-accordion-item",
503
+ "declaration": {
504
+ "name": "HelixAccordionItem",
505
+ "module": "src/components/hx-accordion/hx-accordion-item.ts"
506
+ }
507
+ }
508
+ ]
509
+ },
510
+ {
511
+ "kind": "javascript-module",
512
+ "path": "src/components/hx-accordion/hx-accordion.ts",
513
+ "declarations": [
514
+ {
515
+ "kind": "class",
516
+ "description": "An accordion container that manages collapsible content sections.",
517
+ "name": "HelixAccordion",
518
+ "cssProperties": [
444
519
  {
445
- "description": "Left-aligned actions.",
446
- "name": "start"
520
+ "description": "Outer border radius.",
521
+ "name": "--hx-accordion-border-radius",
522
+ "default": "var(--hx-border-radius-md)"
447
523
  },
448
524
  {
449
- "description": "Center content (default slot).",
450
- "name": ""
525
+ "description": "CSS custom property.",
526
+ "name": "--hx-accordion-font-family",
527
+ "default": "var(--hx-font-family-sans)"
451
528
  },
452
529
  {
453
- "description": "Right-aligned actions.",
454
- "name": "end"
530
+ "description": "Font family.",
531
+ "name": "--hx-font-family-sans"
455
532
  },
456
533
  {
457
- "description": "Actions revealed when the bar is constrained for space.",
458
- "name": "overflow"
534
+ "description": "CSS custom property.",
535
+ "name": "--hx-border-radius-md"
459
536
  }
460
537
  ],
461
- "members": [
538
+ "cssParts": [
462
539
  {
463
- "kind": "field",
464
- "name": "size",
465
- "type": {
466
- "text": "'sm' | 'md' | 'lg'"
467
- },
468
- "default": "'md'",
469
- "description": "Size of the action bar — propagated as a data attribute to slotted children.",
470
- "attribute": "hx-size",
471
- "reflects": true
472
- },
540
+ "description": "The outer container wrapping all accordion items.",
541
+ "name": "accordion"
542
+ }
543
+ ],
544
+ "slots": [
473
545
  {
474
- "kind": "field",
475
- "name": "variant",
476
- "type": {
477
- "text": "'default' | 'outlined' | 'filled'"
478
- },
479
- "default": "'default'",
480
- "description": "Visual variant controlling the bar background.",
481
- "attribute": "variant",
482
- "reflects": true
483
- },
546
+ "description": "Default slot for hx-accordion-item elements.",
547
+ "name": ""
548
+ }
549
+ ],
550
+ "members": [
484
551
  {
485
552
  "kind": "field",
486
- "name": "position",
553
+ "name": "mode",
487
554
  "type": {
488
- "text": "'top' | 'bottom' | 'sticky'"
555
+ "text": "'single' | 'multi'"
489
556
  },
490
- "default": "'top'",
491
- "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",
492
- "attribute": "position",
557
+ "default": "'single'",
558
+ "description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
559
+ "attribute": "mode",
493
560
  "reflects": true
494
- },
495
- {
496
- "kind": "field",
497
- "name": "accessibleLabel",
498
- "type": {
499
- "text": "string"
500
- },
501
- "default": "''",
502
- "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.",
503
- "attribute": "accessible-label"
504
561
  }
505
562
  ],
506
563
  "attributes": [
507
564
  {
508
- "name": "hx-size",
509
- "type": {
510
- "text": "'sm' | 'md' | 'lg'"
511
- },
512
- "default": "'md'",
513
- "description": "Size of the action bar — propagated as a data attribute to slotted children.",
514
- "fieldName": "size",
515
- "attribute": "hx-size"
516
- },
517
- {
518
- "name": "variant",
519
- "type": {
520
- "text": "'default' | 'outlined' | 'filled'"
521
- },
522
- "default": "'default'",
523
- "description": "Visual variant controlling the bar background.",
524
- "fieldName": "variant",
525
- "attribute": "variant"
526
- },
527
- {
528
- "name": "position",
529
- "type": {
530
- "text": "'top' | 'bottom' | 'sticky'"
531
- },
532
- "default": "'top'",
533
- "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",
534
- "fieldName": "position",
535
- "attribute": "position"
536
- },
537
- {
538
- "name": "accessible-label",
565
+ "name": "mode",
539
566
  "type": {
540
- "text": "string"
567
+ "text": "'single' | 'multi'"
541
568
  },
542
- "default": "''",
543
- "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.",
544
- "fieldName": "accessibleLabel",
545
- "attribute": "accessible-label"
569
+ "default": "'single'",
570
+ "description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
571
+ "fieldName": "mode",
572
+ "attribute": "mode"
546
573
  }
547
574
  ],
548
575
  "superclass": {
549
576
  "name": "HelixElement",
550
577
  "module": "/src/base/index.js"
551
578
  },
552
- "tagName": "hx-action-bar",
579
+ "tagName": "hx-accordion",
553
580
  "customElement": true,
554
- "summary": "Horizontal action bar for grouping related controls.",
555
- "aaaCertified": true,
556
- "aaaCertifiedDate": "2026-05-08",
581
+ "summary": "Collapsible content sections with single or multi-expand modes.",
557
582
  "helixMeta": {
558
- "keyboardContract": {
559
- "navigate": [
560
- "Arrow"
561
- ],
562
- "activate": [
563
- "Enter",
564
- "Space"
565
- ],
566
- "disabledSuppresses": true
567
- },
568
- "ariaPattern": "toolbar",
569
- "ariaPatternSource": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/",
570
- "forcedColorsSupported": true,
571
- "stability": "stable",
572
- "since": "3.7.0",
573
- "formAssociated": false,
574
- "themeAware": true,
575
- "brandAware": true,
576
- "drupalSdcEligible": true,
577
- "reactWrapperStatus": "complete",
578
- "priorityTier": "P0",
579
- "phiHandles": false,
580
- "clinicalContext": "none",
581
- "aaa": {
582
- "certified": true,
583
- "certifiedDate": "2026-05-08",
584
- "criteria": [
585
- "1.4.9",
586
- "2.1.3",
587
- "3.2.5",
588
- "forced-colors",
589
- "apg-keyboard",
590
- "1.4.6",
591
- "2.4.12",
592
- "2.4.13",
593
- "2.5.5"
594
- ],
595
- "auditUrl": "src/components/hx-action-bar/AAA-AUDIT.md"
596
- },
597
- "figma": {
598
- "componentName": "hx-action-bar"
599
- }
583
+ "priorityTier": "P2"
600
584
  }
601
585
  }
602
586
  ],
603
587
  "exports": [
604
588
  {
605
589
  "kind": "js",
606
- "name": "HelixActionBar",
590
+ "name": "HelixAccordion",
607
591
  "declaration": {
608
- "name": "HelixActionBar",
609
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
592
+ "name": "HelixAccordion",
593
+ "module": "src/components/hx-accordion/hx-accordion.ts"
610
594
  }
611
595
  },
612
596
  {
613
597
  "kind": "custom-element-definition",
614
- "name": "hx-action-bar",
598
+ "name": "hx-accordion",
615
599
  "declaration": {
616
- "name": "HelixActionBar",
617
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
600
+ "name": "HelixAccordion",
601
+ "module": "src/components/hx-accordion/hx-accordion.ts"
618
602
  }
619
603
  }
620
604
  ]
621
605
  },
622
606
  {
623
607
  "kind": "javascript-module",
624
- "path": "src/components/hx-action-bar/index.ts",
608
+ "path": "src/components/hx-accordion/index.ts",
625
609
  "declarations": [],
626
610
  "exports": [
627
611
  {
628
612
  "kind": "js",
629
- "name": "HelixActionBar",
613
+ "name": "HelixAccordion",
630
614
  "declaration": {
631
- "name": "HelixActionBar",
632
- "module": "./hx-action-bar.js"
615
+ "name": "HelixAccordion",
616
+ "module": "./hx-accordion.js"
617
+ }
618
+ },
619
+ {
620
+ "kind": "js",
621
+ "name": "HelixAccordionItem",
622
+ "declaration": {
623
+ "name": "HelixAccordionItem",
624
+ "module": "./hx-accordion-item.js"
625
+ }
626
+ },
627
+ {
628
+ "kind": "js",
629
+ "name": "HxAccordionToggleDetail",
630
+ "declaration": {
631
+ "name": "HxAccordionToggleDetail",
632
+ "module": "./hx-accordion-item.js"
633
633
  }
634
634
  }
635
635
  ]