@helixui/library 3.9.0-next.151 → 3.9.1

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/custom-elements.json +393 -393
  2. package/dist/css/index.css +1 -1
  3. package/dist/css/manifest.json +1 -1
  4. package/figma-inventory.json +3 -3
  5. package/package.json +4 -4
package/custom-elements.json CHANGED
@@ -4,478 +4,169 @@
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.\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",
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",
230
- "customElement": true,
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
244
- },
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"
273
- },
274
- "figma": {
275
- "componentName": "hx-action-bar"
276
- }
277
- }
278
- }
279
- ],
280
- "exports": [
281
- {
282
- "kind": "js",
283
- "name": "HelixActionBar",
284
- "declaration": {
285
- "name": "HelixActionBar",
286
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
287
- }
288
- },
289
- {
290
- "kind": "custom-element-definition",
291
- "name": "hx-action-bar",
292
- "declaration": {
293
- "name": "HelixActionBar",
294
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
295
- }
296
- }
297
- ]
298
- },
299
- {
300
- "kind": "javascript-module",
301
- "path": "src/components/hx-action-bar/index.ts",
302
- "declarations": [],
303
- "exports": [
304
- {
305
- "kind": "js",
306
- "name": "HelixActionBar",
307
- "declaration": {
308
- "name": "HelixActionBar",
309
- "module": "./hx-action-bar.js"
310
- }
311
- }
312
- ]
313
- },
314
- {
315
- "kind": "javascript-module",
316
- "path": "src/components/hx-accordion/hx-accordion-item.ts",
317
- "declarations": [
318
- {
319
- "kind": "class",
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",
322
- "cssProperties": [
323
- {
324
- "description": "Border color between items.",
325
- "name": "--hx-accordion-border-color",
326
- "default": "var(--hx-color-neutral-200)"
327
- },
328
- {
329
- "description": "Trigger padding.",
330
- "name": "--hx-accordion-trigger-padding",
331
- "default": "var(--hx-space-4)"
332
- },
333
- {
334
- "description": "Trigger text color.",
335
- "name": "--hx-accordion-trigger-color",
336
- "default": "var(--hx-color-neutral-800)"
337
- },
338
- {
339
- "description": "Trigger background color.",
340
- "name": "--hx-accordion-trigger-bg",
341
- "default": "transparent"
342
- },
343
- {
344
- "description": "Trigger hover background.",
345
- "name": "--hx-accordion-trigger-hover-bg",
346
- "default": "var(--hx-color-neutral-50)"
347
- },
348
- {
349
- "description": "Icon color.",
350
- "name": "--hx-accordion-icon-color",
351
- "default": "var(--hx-color-neutral-500)"
352
- },
353
- {
354
- "description": "Content padding.",
355
- "name": "--hx-accordion-content-padding",
356
- "default": "0 var(--hx-space-4) var(--hx-space-4)"
357
- },
358
- {
359
- "description": "Content text color.",
360
- "name": "--hx-accordion-content-color",
361
- "default": "var(--hx-color-neutral-600)"
362
- }
363
- ],
364
- "cssParts": [
365
- {
366
- "description": "The outer details element container.",
367
- "name": "item"
368
- },
369
- {
370
- "description": "The summary/trigger element.",
371
- "name": "trigger"
372
- },
373
- {
374
- "description": "The collapsible content area.",
375
- "name": "content"
376
- },
377
- {
378
- "description": "The expand/collapse icon.",
379
- "name": "icon"
380
- }
381
- ],
382
- "slots": [
383
- {
384
- "description": "The heading/trigger content for this item.",
385
- "name": "trigger"
386
- },
387
- {
388
- "description": "Default slot for the collapsible body content.",
389
- "name": ""
390
- }
391
- ],
392
- "members": [
393
- {
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
403
- },
404
- {
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
414
- },
415
- {
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"
424
- }
425
- ],
426
- "events": [
427
- {
428
- "name": "hx-expand",
429
- "type": {
430
- "text": "CustomEvent<{expanded: boolean, itemId: string}>"
431
- },
432
- "description": "Dispatched when the item is expanded."
433
- },
434
- {
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": [
443
- {
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"
452
- },
453
- {
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"
462
- },
463
- {
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"
472
- }
473
- ],
474
- "superclass": {
475
- "name": "HelixElement",
476
- "module": "/src/base/index.js"
477
- },
478
- "tagName": "hx-accordion-item",
169
+ "tagName": "hx-accordion-item",
479
170
  "customElement": true,
480
171
  "summary": "Collapsible panel that can be expanded or collapsed."
481
172
  },
@@ -634,6 +325,315 @@
634
325
  }
635
326
  ]
636
327
  },
328
+ {
329
+ "kind": "javascript-module",
330
+ "path": "src/components/hx-action-bar/hx-action-bar.ts",
331
+ "declarations": [
332
+ {
333
+ "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",
336
+ "cssProperties": [
337
+ {
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"
346
+ },
347
+ {
348
+ "description": "Inner padding.",
349
+ "name": "--hx-action-bar-padding",
350
+ "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
351
+ },
352
+ {
353
+ "description": "Gap between slotted items.",
354
+ "name": "--hx-action-bar-gap",
355
+ "default": "var(--hx-space-2,0.5rem)"
356
+ },
357
+ {
358
+ "description": "Z-index when sticky or bottom position.",
359
+ "name": "--hx-action-bar-z-index",
360
+ "default": "10"
361
+ },
362
+ {
363
+ "description": "Padding.",
364
+ "name": "--hx-action-bar-padding-block-start",
365
+ "default": "0px"
366
+ },
367
+ {
368
+ "description": "Padding.",
369
+ "name": "--hx-action-bar-padding-block-end",
370
+ "default": "0px"
371
+ },
372
+ {
373
+ "description": "CSS custom property.",
374
+ "name": "--hx-border-radius-md"
375
+ },
376
+ {
377
+ "description": "Width.",
378
+ "name": "--hx-border-width-thin"
379
+ },
380
+ {
381
+ "description": "Color.",
382
+ "name": "--hx-color-neutral-0"
383
+ },
384
+ {
385
+ "description": "Color.",
386
+ "name": "--hx-color-neutral-200"
387
+ },
388
+ {
389
+ "description": "Color.",
390
+ "name": "--hx-color-neutral-50"
391
+ },
392
+ {
393
+ "description": "Size token.",
394
+ "name": "--hx-size-8"
395
+ },
396
+ {
397
+ "description": "Size token.",
398
+ "name": "--hx-size-10"
399
+ },
400
+ {
401
+ "description": "Size token.",
402
+ "name": "--hx-size-12"
403
+ },
404
+ {
405
+ "description": "Spacing token.",
406
+ "name": "--hx-space-1"
407
+ },
408
+ {
409
+ "description": "Spacing token.",
410
+ "name": "--hx-space-2"
411
+ },
412
+ {
413
+ "description": "Spacing token.",
414
+ "name": "--hx-space-3"
415
+ },
416
+ {
417
+ "description": "Spacing token.",
418
+ "name": "--hx-space-4"
419
+ }
420
+ ],
421
+ "cssParts": [
422
+ {
423
+ "description": "The root toolbar container element.",
424
+ "name": "base"
425
+ },
426
+ {
427
+ "description": "The start (left) slot wrapper.",
428
+ "name": "start"
429
+ },
430
+ {
431
+ "description": "The center (default) slot wrapper.",
432
+ "name": "center"
433
+ },
434
+ {
435
+ "description": "The end (right) slot wrapper.",
436
+ "name": "end"
437
+ },
438
+ {
439
+ "description": "The overflow slot wrapper (hidden when no overflow content).",
440
+ "name": "overflow"
441
+ }
442
+ ],
443
+ "slots": [
444
+ {
445
+ "description": "Left-aligned actions.",
446
+ "name": "start"
447
+ },
448
+ {
449
+ "description": "Center content (default slot).",
450
+ "name": ""
451
+ },
452
+ {
453
+ "description": "Right-aligned actions.",
454
+ "name": "end"
455
+ },
456
+ {
457
+ "description": "Actions revealed when the bar is constrained for space.",
458
+ "name": "overflow"
459
+ }
460
+ ],
461
+ "members": [
462
+ {
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
+ },
473
+ {
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
+ },
484
+ {
485
+ "kind": "field",
486
+ "name": "position",
487
+ "type": {
488
+ "text": "'top' | 'bottom' | 'sticky'"
489
+ },
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",
493
+ "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
+ }
505
+ ],
506
+ "attributes": [
507
+ {
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",
539
+ "type": {
540
+ "text": "string"
541
+ },
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"
546
+ }
547
+ ],
548
+ "superclass": {
549
+ "name": "HelixElement",
550
+ "module": "/src/base/index.js"
551
+ },
552
+ "tagName": "hx-action-bar",
553
+ "customElement": true,
554
+ "summary": "Horizontal action bar for grouping related controls.",
555
+ "aaaCertified": true,
556
+ "aaaCertifiedDate": "2026-05-08",
557
+ "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
+ }
600
+ }
601
+ }
602
+ ],
603
+ "exports": [
604
+ {
605
+ "kind": "js",
606
+ "name": "HelixActionBar",
607
+ "declaration": {
608
+ "name": "HelixActionBar",
609
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
610
+ }
611
+ },
612
+ {
613
+ "kind": "custom-element-definition",
614
+ "name": "hx-action-bar",
615
+ "declaration": {
616
+ "name": "HelixActionBar",
617
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
618
+ }
619
+ }
620
+ ]
621
+ },
622
+ {
623
+ "kind": "javascript-module",
624
+ "path": "src/components/hx-action-bar/index.ts",
625
+ "declarations": [],
626
+ "exports": [
627
+ {
628
+ "kind": "js",
629
+ "name": "HelixActionBar",
630
+ "declaration": {
631
+ "name": "HelixActionBar",
632
+ "module": "./hx-action-bar.js"
633
+ }
634
+ }
635
+ ]
636
+ },
637
637
  {
638
638
  "kind": "javascript-module",
639
639
  "path": "src/components/hx-alert/hx-alert.ts",
package/dist/css/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* index.css — generated 2026-05-13T02:08:33.552Z */
1
+ /* index.css — generated 2026-05-13T02:32:16.261Z */
2
2
  /* Imports all per-component CSS files for Drupal asset pipeline */
3
3
 
4
4
  @import './hx-accordion.css';
package/dist/css/manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generated": "2026-05-13T02:08:33.551Z",
2
+ "generated": "2026-05-13T02:32:16.260Z",
3
3
  "components": [
4
4
  {
5
5
  "name": "hx-accordion",
package/figma-inventory.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
- "generatedAt": "2026-05-11T11:45:04.904Z",
3
+ "generatedAt": "2026-05-13T02:10:28.065Z",
4
4
  "sourceCem": "custom-elements.json",
5
- "helixVersion": "3.9.0",
6
- "tokensVersion": "3.9.0",
5
+ "helixVersion": "3.9.1",
6
+ "tokensVersion": "3.9.1",
7
7
  "components": [
8
8
  {
9
9
  "tag": "hx-accordion",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/library",
3
- "version": "3.9.0-next.151",
3
+ "version": "3.9.1",
4
4
  "description": "Enterprise Web Component Library built with Lit 3.x",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -61,11 +61,11 @@
61
61
  "customElements": "custom-elements.json",
62
62
  "dependencies": {
63
63
  "lit": "^3.3.2",
64
- "@helixui/tokens": "3.9.0-next.151"
64
+ "@helixui/tokens": "3.9.1"
65
65
  },
66
66
  "peerDependencies": {
67
67
  "@floating-ui/dom": "^1.7.6",
68
- "@helixui/icons": "1.0.0"
68
+ "@helixui/icons": "1.0.1"
69
69
  },
70
70
  "repository": {
71
71
  "type": "git",
@@ -103,7 +103,7 @@
103
103
  "vite": "^6.2.0",
104
104
  "vite-plugin-dts": "^4.5.4",
105
105
  "vitest": "^3.0.0",
106
- "@helixui/icons": "1.0.0"
106
+ "@helixui/icons": "1.0.1"
107
107
  },
108
108
  "scripts": {
109
109
  "dev": "vite build --watch",