@pnx-mixtape/mxds 0.0.26 → 0.0.27

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 (34) hide show
  1. package/.storybook/main.ts +4 -1
  2. package/.storybook/vitest.setup.ts +37 -1
  3. package/dist/build/accordion.css +1 -103
  4. package/dist/build/accordion.entry.js +1 -1
  5. package/dist/build/chunks/{DropMenu-plGsgySm.js → DropMenu-LnJEp-sg.js} +1 -1
  6. package/dist/build/constants.css +1 -100
  7. package/dist/build/drop-menu.entry.js +2 -2
  8. package/dist/build/filters.entry.js +1 -1
  9. package/dist/build/header.entry.js +450 -330
  10. package/dist/build/popover.entry.js +1 -1
  11. package/dist/build/tabs.entry.js +2 -2
  12. package/package.json +9 -11
  13. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +1 -1
  14. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +6 -6
  15. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +4 -4
  16. package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +2 -2
  17. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +8 -8
  18. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +2 -2
  19. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +22 -3
  20. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +10 -0
  21. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +24 -19
  22. package/src/Component/InPageNavigation/in-page-navigation.css +3 -1
  23. package/src/Component/InPageNavigation/in-page-navigation.twig +3 -2
  24. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +18 -18
  25. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +26 -26
  26. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +8 -8
  27. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +6 -6
  28. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +8 -8
  29. package/src/Form/Search/search-form.twig +2 -1
  30. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +1 -1
  31. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +1 -1
  32. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +23 -23
  33. /package/dist/build/chunks/{Accordion-Dwh42fp7.js → Accordion-BzKLBuWL.js} +0 -0
  34. /package/dist/build/chunks/{Popover-Bws25suh.js → Popover-C4gisyxr.js} +0 -0
package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap CHANGED
@@ -4,7 +4,7 @@ exports[`Bottom 1`] = `
4
4
  "<mx-popover>
5
5
 
6
6
 
7
- <button id="popover-bottom-target" popovertarget="popover-bottom" style="anchor-name: --popover-bottom" class="mx-button" type="button">
7
+ <button id="unique-0" popovertarget="popover-bottom" style="anchor-name: --popover-bottom" class="mx-button" type="button">
8
8
 
9
9
  <span>Popover trigger</span>
10
10
 
@@ -12,7 +12,7 @@ exports[`Bottom 1`] = `
12
12
 
13
13
  </button>
14
14
 
15
- <div class="mx-popover" id="popover-bottom" aria-describedby="popover-bottom-target" style="position-anchor: --popover-bottom" data-placement="bottom" role="tooltip" popover="">
15
+ <div class="mx-popover" id="popover-bottom" aria-describedby="unique-0" style="position-anchor: --popover-bottom" data-placement="bottom" role="tooltip" popover="">
16
16
  <div class="mx-rich-text mx-vertical-flow">
17
17
 
18
18
  <h2>Popover heading</h2>
@@ -35,7 +35,7 @@ exports[`Bottom End 1`] = `
35
35
  "<mx-popover>
36
36
 
37
37
 
38
- <button id="popover-bottom-end-target" popovertarget="popover-bottom-end" style="anchor-name: --popover-bottom-end" class="mx-button" type="button">
38
+ <button id="unique-0" popovertarget="popover-bottom-end" style="anchor-name: --popover-bottom-end" class="mx-button" type="button">
39
39
 
40
40
  <span>Popover trigger</span>
41
41
 
@@ -43,7 +43,7 @@ exports[`Bottom End 1`] = `
43
43
 
44
44
  </button>
45
45
 
46
- <div class="mx-popover" id="popover-bottom-end" aria-describedby="popover-bottom-end-target" style="position-anchor: --popover-bottom-end" data-placement="bottom-end" role="tooltip" popover="">
46
+ <div class="mx-popover" id="popover-bottom-end" aria-describedby="unique-0" style="position-anchor: --popover-bottom-end" data-placement="bottom-end" role="tooltip" popover="">
47
47
  <div class="mx-rich-text mx-vertical-flow">
48
48
 
49
49
  <h2>Popover heading</h2>
@@ -66,7 +66,7 @@ exports[`Bottom Start 1`] = `
66
66
  "<mx-popover>
67
67
 
68
68
 
69
- <button id="popover-bottom-start-target" popovertarget="popover-bottom-start" style="anchor-name: --popover-bottom-start" class="mx-button" type="button">
69
+ <button id="unique-0" popovertarget="popover-bottom-start" style="anchor-name: --popover-bottom-start" class="mx-button" type="button">
70
70
 
71
71
  <span>Popover trigger</span>
72
72
 
@@ -74,7 +74,7 @@ exports[`Bottom Start 1`] = `
74
74
 
75
75
  </button>
76
76
 
77
- <div class="mx-popover" id="popover-bottom-start" aria-describedby="popover-bottom-start-target" style="position-anchor: --popover-bottom-start" data-placement="bottom-start" role="tooltip" popover="">
77
+ <div class="mx-popover" id="popover-bottom-start" aria-describedby="unique-0" style="position-anchor: --popover-bottom-start" data-placement="bottom-start" role="tooltip" popover="">
78
78
  <div class="mx-rich-text mx-vertical-flow">
79
79
 
80
80
  <h2>Popover heading</h2>
@@ -97,7 +97,7 @@ exports[`Left 1`] = `
97
97
  "<mx-popover>
98
98
 
99
99
 
100
- <button id="popover-left-target" popovertarget="popover-left" style="anchor-name: --popover-left" class="mx-button" type="button">
100
+ <button id="unique-0" popovertarget="popover-left" style="anchor-name: --popover-left" class="mx-button" type="button">
101
101
 
102
102
  <span>Popover trigger</span>
103
103
 
@@ -105,7 +105,7 @@ exports[`Left 1`] = `
105
105
 
106
106
  </button>
107
107
 
108
- <div class="mx-popover" id="popover-left" aria-describedby="popover-left-target" style="position-anchor: --popover-left" data-placement="left" role="tooltip" popover="">
108
+ <div class="mx-popover" id="popover-left" aria-describedby="unique-0" style="position-anchor: --popover-left" data-placement="left" role="tooltip" popover="">
109
109
  <div class="mx-rich-text mx-vertical-flow">
110
110
 
111
111
  <h2>Popover heading</h2>
@@ -128,7 +128,7 @@ exports[`Left End 1`] = `
128
128
  "<mx-popover>
129
129
 
130
130
 
131
- <button id="popover-left-end-target" popovertarget="popover-left-end" style="anchor-name: --popover-left-end" class="mx-button" type="button">
131
+ <button id="unique-0" popovertarget="popover-left-end" style="anchor-name: --popover-left-end" class="mx-button" type="button">
132
132
 
133
133
  <span>Popover trigger</span>
134
134
 
@@ -136,7 +136,7 @@ exports[`Left End 1`] = `
136
136
 
137
137
  </button>
138
138
 
139
- <div class="mx-popover" id="popover-left-end" aria-describedby="popover-left-end-target" style="position-anchor: --popover-left-end" data-placement="left-end" role="tooltip" popover="">
139
+ <div class="mx-popover" id="popover-left-end" aria-describedby="unique-0" style="position-anchor: --popover-left-end" data-placement="left-end" role="tooltip" popover="">
140
140
  <div class="mx-rich-text mx-vertical-flow">
141
141
 
142
142
  <h2>Popover heading</h2>
@@ -159,7 +159,7 @@ exports[`Left Start 1`] = `
159
159
  "<mx-popover>
160
160
 
161
161
 
162
- <button id="popover-left-start-target" popovertarget="popover-left-start" style="anchor-name: --popover-left-start" class="mx-button" type="button">
162
+ <button id="unique-0" popovertarget="popover-left-start" style="anchor-name: --popover-left-start" class="mx-button" type="button">
163
163
 
164
164
  <span>Popover trigger</span>
165
165
 
@@ -167,7 +167,7 @@ exports[`Left Start 1`] = `
167
167
 
168
168
  </button>
169
169
 
170
- <div class="mx-popover" id="popover-left-start" aria-describedby="popover-left-start-target" style="position-anchor: --popover-left-start" data-placement="left-start" role="tooltip" popover="">
170
+ <div class="mx-popover" id="popover-left-start" aria-describedby="unique-0" style="position-anchor: --popover-left-start" data-placement="left-start" role="tooltip" popover="">
171
171
  <div class="mx-rich-text mx-vertical-flow">
172
172
 
173
173
  <h2>Popover heading</h2>
@@ -190,7 +190,7 @@ exports[`Popover 1`] = `
190
190
  "<mx-popover>
191
191
 
192
192
 
193
- <button id="popover-target" popovertarget="popover" style="anchor-name: --popover" class="mx-button" type="button">
193
+ <button id="unique-0" popovertarget="popover" style="anchor-name: --popover" class="mx-button" type="button">
194
194
 
195
195
  <span>Popover trigger</span>
196
196
 
@@ -198,7 +198,7 @@ exports[`Popover 1`] = `
198
198
 
199
199
  </button>
200
200
 
201
- <div class="mx-popover" id="popover" aria-describedby="popover-target" style="position-anchor: --popover" data-placement="bottom" role="tooltip" popover="">
201
+ <div class="mx-popover" id="popover" aria-describedby="unique-0" style="position-anchor: --popover" data-placement="bottom" role="tooltip" popover="">
202
202
  <div class="mx-rich-text mx-vertical-flow">
203
203
 
204
204
  <h2>Popover heading</h2>
@@ -221,7 +221,7 @@ exports[`Right 1`] = `
221
221
  "<mx-popover>
222
222
 
223
223
 
224
- <button id="popover-right-target" popovertarget="popover-right" style="anchor-name: --popover-right" class="mx-button" type="button">
224
+ <button id="unique-0" popovertarget="popover-right" style="anchor-name: --popover-right" class="mx-button" type="button">
225
225
 
226
226
  <span>Popover trigger</span>
227
227
 
@@ -229,7 +229,7 @@ exports[`Right 1`] = `
229
229
 
230
230
  </button>
231
231
 
232
- <div class="mx-popover" id="popover-right" aria-describedby="popover-right-target" style="position-anchor: --popover-right" data-placement="right" role="tooltip" popover="">
232
+ <div class="mx-popover" id="popover-right" aria-describedby="unique-0" style="position-anchor: --popover-right" data-placement="right" role="tooltip" popover="">
233
233
  <div class="mx-rich-text mx-vertical-flow">
234
234
 
235
235
  <h2>Popover heading</h2>
@@ -252,7 +252,7 @@ exports[`Right End 1`] = `
252
252
  "<mx-popover>
253
253
 
254
254
 
255
- <button id="popover-right-end-target" popovertarget="popover-right-end" style="anchor-name: --popover-right-end" class="mx-button" type="button">
255
+ <button id="unique-0" popovertarget="popover-right-end" style="anchor-name: --popover-right-end" class="mx-button" type="button">
256
256
 
257
257
  <span>Popover trigger</span>
258
258
 
@@ -260,7 +260,7 @@ exports[`Right End 1`] = `
260
260
 
261
261
  </button>
262
262
 
263
- <div class="mx-popover" id="popover-right-end" aria-describedby="popover-right-end-target" style="position-anchor: --popover-right-end" data-placement="right-end" role="tooltip" popover="">
263
+ <div class="mx-popover" id="popover-right-end" aria-describedby="unique-0" style="position-anchor: --popover-right-end" data-placement="right-end" role="tooltip" popover="">
264
264
  <div class="mx-rich-text mx-vertical-flow">
265
265
 
266
266
  <h2>Popover heading</h2>
@@ -283,7 +283,7 @@ exports[`Right Start 1`] = `
283
283
  "<mx-popover>
284
284
 
285
285
 
286
- <button id="popover-right-start-target" popovertarget="popover-right-start" style="anchor-name: --popover-right-start" class="mx-button" type="button">
286
+ <button id="unique-0" popovertarget="popover-right-start" style="anchor-name: --popover-right-start" class="mx-button" type="button">
287
287
 
288
288
  <span>Popover trigger</span>
289
289
 
@@ -291,7 +291,7 @@ exports[`Right Start 1`] = `
291
291
 
292
292
  </button>
293
293
 
294
- <div class="mx-popover" id="popover-right-start" aria-describedby="popover-right-start-target" style="position-anchor: --popover-right-start" data-placement="right-start" role="tooltip" popover="">
294
+ <div class="mx-popover" id="popover-right-start" aria-describedby="unique-0" style="position-anchor: --popover-right-start" data-placement="right-start" role="tooltip" popover="">
295
295
  <div class="mx-rich-text mx-vertical-flow">
296
296
 
297
297
  <h2>Popover heading</h2>
@@ -314,7 +314,7 @@ exports[`Top 1`] = `
314
314
  "<mx-popover>
315
315
 
316
316
 
317
- <button id="popover-top-target" popovertarget="popover-top" style="anchor-name: --popover-top" class="mx-button" type="button">
317
+ <button id="unique-0" popovertarget="popover-top" style="anchor-name: --popover-top" class="mx-button" type="button">
318
318
 
319
319
  <span>Popover trigger</span>
320
320
 
@@ -322,7 +322,7 @@ exports[`Top 1`] = `
322
322
 
323
323
  </button>
324
324
 
325
- <div class="mx-popover" id="popover-top" aria-describedby="popover-top-target" style="position-anchor: --popover-top" data-placement="top" role="tooltip" popover="">
325
+ <div class="mx-popover" id="popover-top" aria-describedby="unique-0" style="position-anchor: --popover-top" data-placement="top" role="tooltip" popover="">
326
326
  <div class="mx-rich-text mx-vertical-flow">
327
327
 
328
328
  <h2>Popover heading</h2>
@@ -345,7 +345,7 @@ exports[`Top End 1`] = `
345
345
  "<mx-popover>
346
346
 
347
347
 
348
- <button id="popover-top-end-target" popovertarget="popover-top-end" style="anchor-name: --popover-top-end" class="mx-button" type="button">
348
+ <button id="unique-0" popovertarget="popover-top-end" style="anchor-name: --popover-top-end" class="mx-button" type="button">
349
349
 
350
350
  <span>Popover trigger</span>
351
351
 
@@ -353,7 +353,7 @@ exports[`Top End 1`] = `
353
353
 
354
354
  </button>
355
355
 
356
- <div class="mx-popover" id="popover-top-end" aria-describedby="popover-top-end-target" style="position-anchor: --popover-top-end" data-placement="top-end" role="tooltip" popover="">
356
+ <div class="mx-popover" id="popover-top-end" aria-describedby="unique-0" style="position-anchor: --popover-top-end" data-placement="top-end" role="tooltip" popover="">
357
357
  <div class="mx-rich-text mx-vertical-flow">
358
358
 
359
359
  <h2>Popover heading</h2>
@@ -376,7 +376,7 @@ exports[`Top Start 1`] = `
376
376
  "<mx-popover>
377
377
 
378
378
 
379
- <button id="popover-top-start-target" popovertarget="popover-top-start" style="anchor-name: --popover-top-start" class="mx-button" type="button">
379
+ <button id="unique-0" popovertarget="popover-top-start" style="anchor-name: --popover-top-start" class="mx-button" type="button">
380
380
 
381
381
  <span>Popover trigger</span>
382
382
 
@@ -384,7 +384,7 @@ exports[`Top Start 1`] = `
384
384
 
385
385
  </button>
386
386
 
387
- <div class="mx-popover" id="popover-top-start" aria-describedby="popover-top-start-target" style="position-anchor: --popover-top-start" data-placement="top-start" role="tooltip" popover="">
387
+ <div class="mx-popover" id="popover-top-start" aria-describedby="unique-0" style="position-anchor: --popover-top-start" data-placement="top-start" role="tooltip" popover="">
388
388
  <div class="mx-rich-text mx-vertical-flow">
389
389
 
390
390
  <h2>Popover heading</h2>
package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap CHANGED
@@ -3,16 +3,16 @@
3
3
  exports[`Tabs 1`] = `
4
4
  "
5
5
 
6
- <mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="tab-example-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="tab-example-target" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false" tab-index="-1">Motown</button></div>
7
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
6
+ <mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tab-index="-1">Motown</button></div>
7
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
8
8
  Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
9
9
  </div>
10
10
 
11
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-2" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
11
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-1" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
12
12
  Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
13
13
  </div>
14
14
 
15
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-3" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
15
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-2" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
16
16
  Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
17
17
  </div>
18
18
 
@@ -25,16 +25,16 @@ exports[`With Heading 1`] = `
25
25
 
26
26
  <h2>Tabs heading</h2>
27
27
 
28
- <mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="tab-example-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="tab-example-target" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="tab-1" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="tab-2" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="tab-3" aria-selected="false" tab-index="-1">Motown</button></div>
29
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
28
+ <mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tab-index="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tab-index="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tab-index="-1">Motown</button></div>
29
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="0" aria-label="Funk">
30
30
  Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
31
31
  </div>
32
32
 
33
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-2" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
33
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-1" data-tab="Soul" role="tabpanel" tabindex="0" aria-label="Soul" inert="">
34
34
  Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
35
35
  </div>
36
36
 
37
- <div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-3" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
37
+ <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-2" data-tab="Motown" role="tabpanel" tabindex="0" aria-label="Motown" inert="">
38
38
  Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
39
39
  </div>
40
40
 
package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap CHANGED
@@ -19,12 +19,12 @@ exports[`Horizontal 1`] = `
19
19
  </li>
20
20
  <li>
21
21
  <mx-popover>
22
- <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
22
+ <button type="button" id="unique-0" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
23
23
  <span class="mx-icon mx-icon--share"></span>
24
24
  <span class="mx-utility-list__label">Share this page</span>
25
25
  <span class="mx-icon mx-icon--chevron-down"></span>
26
26
  </button>
27
- <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
27
+ <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="unique-0" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
28
28
 
29
29
  <nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
30
30
 
@@ -73,12 +73,12 @@ exports[`PDF 1`] = `
73
73
  </li>
74
74
  <li>
75
75
  <mx-popover>
76
- <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
76
+ <button type="button" id="unique-0" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
77
77
  <span class="mx-icon mx-icon--share"></span>
78
78
  <span class="mx-utility-list__label">Share this page</span>
79
79
  <span class="mx-icon mx-icon--chevron-down"></span>
80
80
  </button>
81
- <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
81
+ <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="unique-0" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
82
82
 
83
83
  <nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
84
84
 
@@ -121,12 +121,12 @@ exports[`Utility List 1`] = `
121
121
  </li>
122
122
  <li>
123
123
  <mx-popover>
124
- <button type="button" id="utility-list-share-target" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
124
+ <button type="button" id="unique-0" class="mx-popover__trigger mx-button mx-button--small mx-button--light" popovertarget="utility-list-share" style="anchor-name: --utility-list-share">
125
125
  <span class="mx-icon mx-icon--share"></span>
126
126
  <span class="mx-utility-list__label">Share this page</span>
127
127
  <span class="mx-icon mx-icon--chevron-down"></span>
128
128
  </button>
129
- <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="utility-list-share-target" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
129
+ <div class="mx-popover mx-utility-list__share" id="utility-list-share" aria-describedby="unique-0" style="position-anchor: --utility-list-share" data-placement="bottom" popover="">
130
130
 
131
131
  <nav class="mx-social-share flex gap--s" aria-label="Social share buttons">
132
132
 
package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap CHANGED
@@ -6,12 +6,12 @@ exports[`Description Before 1`] = `
6
6
 
7
7
  <label class="mx-label" for="form-item">What's your favourite music?</label>
8
8
 
9
- <div class="mx-description" id="help-form-item" role="tooltip">
9
+ <div class="mx-description" id="unique-0" role="tooltip">
10
10
  Help text that provides additional information about the field.
11
11
  </div>
12
12
 
13
13
 
14
- <input class="mx-input__text" id="form-item" name="example-form-item" type="text" value="" placeholder="eg. Funk, Soul, Blues.." aria-describedby="help-form-item">
14
+ <input class="mx-input__text" id="form-item" name="unique-0" type="text" value="" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0">
15
15
 
16
16
 
17
17
 
@@ -27,7 +27,7 @@ exports[`Error 1`] = `
27
27
 
28
28
 
29
29
 
30
- <input class="mx-input__text error" id="form-item" name="example-form-item" type="text" value="Musicals" placeholder="eg. Funk, Soul, Blues.." aria-describedby="help-form-item status-form-item" aria-invalid="true">
30
+ <input class="mx-input__text error" id="form-item" name="unique-0" type="text" value="Musicals" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0" aria-invalid="true">
31
31
 
32
32
  <div class="mx-description" id="help-form-item" role="tooltip">
33
33
  Help text that provides additional information about the field.
@@ -49,9 +49,9 @@ exports[`Fieldset 1`] = `
49
49
 
50
50
 
51
51
 
52
- <input class="mx-input__text" id="form-item" name="example-form-item" type="text" value="" aria-label="Visually hidden label" placeholder="eg. Funk, Soul, Blues.." aria-describedby="help-form-item">
52
+ <input class="mx-input__text" id="form-item" name="unique-0" type="text" value="" aria-label="Visually hidden label" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0">
53
53
 
54
- <div class="mx-description" id="help-form-item" role="tooltip">
54
+ <div class="mx-description" id="unique-0" role="tooltip">
55
55
  Help text that provides additional information about the field.
56
56
  </div>
57
57
 
@@ -68,9 +68,9 @@ exports[`Form Item 1`] = `
68
68
 
69
69
 
70
70
 
71
- <input class="mx-input__text" id="form-item" name="example-form-item" type="text" value="" placeholder="eg. Funk, Soul, Blues.." aria-describedby="help-form-item">
71
+ <input class="mx-input__text" id="form-item" name="unique-0" type="text" value="" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0">
72
72
 
73
- <div class="mx-description" id="help-form-item" role="tooltip">
73
+ <div class="mx-description" id="unique-0" role="tooltip">
74
74
  Help text that provides additional information about the field.
75
75
  </div>
76
76
 
@@ -87,7 +87,7 @@ exports[`Success 1`] = `
87
87
 
88
88
 
89
89
 
90
- <input class="mx-input__text success" id="form-item" name="example-form-item" type="text" value="Jazz" placeholder="eg. Funk, Soul, Blues.." aria-describedby="help-form-item status-form-item">
90
+ <input class="mx-input__text success" id="form-item" name="unique-0" type="text" value="Jazz" placeholder="eg. Funk, Soul, Blues.." aria-describedby="unique-0">
91
91
 
92
92
  <div class="mx-description" id="help-form-item" role="tooltip">
93
93
  Help text that provides additional information about the field.
package/src/Form/Search/search-form.twig CHANGED
@@ -4,9 +4,10 @@
4
4
  baseClass~"--inline-button"
5
5
  ] %}
6
6
  {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
7
+ {% set name = name ?? "search-form" %}
7
8
 
8
9
  <form{{ attributes }} role="search" action="{{ action }}">
9
- <input class="mx-input__text " id="{{ id }}" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords..." />
10
+ <input class="mx-input__text " id="{{ id }}" name={{ name }} type="search" value="" aria-label="Search by keywords" placeholder="Keywords..." />
10
11
  <button class="mx-button mx-button--icon-only" type="submit">
11
12
  <span class="mx-icon mx-icon--search"></span>
12
13
  <span class="sr-only">Search</span>
package/src/Form/Select/__snapshots__/Select.stories.ts.snap CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  exports[`Select 1`] = `
4
4
  "
5
- <select class="mx-input__select" id="form-input-select" name="example-form-input" aria-label="Visually hidden label" aria-describedby="status-form-input-select">
5
+ <select class="mx-input__select" id="form-input-select" name="unique-0" aria-label="Visually hidden label" aria-describedby="unique-0">
6
6
  <option value="1">Option 1</option>
7
7
  <option value="2">Option 2</option>
8
8
  <option value="3">Option 3</option>
package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
  exports[`Text Area 1`] = `
4
4
  "
5
- <textarea class="mx-input__textarea" id="form-input-textarea" name="example-form-input" aria-label="Visually hidden label" aria-describedby="status-form-input-textarea"></textarea>
5
+ <textarea class="mx-input__textarea" id="form-input-textarea" name="unique-0" aria-label="Visually hidden label" aria-describedby="unique-0"></textarea>
6
6
  "
7
7
  `;
package/src/Layout/Header/__snapshots__/Header.stories.ts.snap CHANGED
@@ -8,10 +8,10 @@ exports[`Controls 1`] = `
8
8
 
9
9
  </div>
10
10
  <div class="mx-header__toggles">
11
- <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
11
+ <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
12
12
  </div>
13
13
  <div class="mx-header__main">
14
- <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
14
+ <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
15
15
 
16
16
 
17
17
  <mx-nav flyout="">
@@ -66,10 +66,10 @@ exports[`Header 1`] = `
66
66
 
67
67
  </div>
68
68
  <div class="mx-header__toggles">
69
- <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
69
+ <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
70
70
  </div>
71
71
  <div class="mx-header__main">
72
- <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
72
+ <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
73
73
 
74
74
 
75
75
  <mx-nav flyout="">
@@ -115,11 +115,11 @@ exports[`Search 1`] = `
115
115
 
116
116
  </div>
117
117
  <div class="mx-header__toggles">
118
- <mx-global-toggle><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
119
- <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
118
+ <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
119
+ <mx-global-toggle><button aria-controls="unique-1" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
120
120
  </div>
121
121
  <div class="mx-header__main">
122
- <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
122
+ <div id="unique-1" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
123
123
 
124
124
 
125
125
  <mx-nav flyout="">
@@ -151,7 +151,7 @@ exports[`Search 1`] = `
151
151
  </mx-nav>
152
152
 
153
153
  </div>
154
- <div id="primary-search" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
154
+ <div id="unique-0" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
155
155
 
156
156
  <form class="mx-form mx-form--inline-button" role="search" action="#search">
157
157
  <input class="mx-input__text " id="search-keyword" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords...">
@@ -176,11 +176,11 @@ exports[`Stacked 1`] = `
176
176
 
177
177
  </div>
178
178
  <div class="mx-header__toggles">
179
- <mx-global-toggle><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
180
- <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
179
+ <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
180
+ <mx-global-toggle><button aria-controls="unique-1" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
181
181
  </div>
182
182
  <div class="mx-header__main">
183
- <div id="primary-search" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
183
+ <div id="unique-0" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
184
184
 
185
185
  <form class="mx-form mx-form--inline-button" role="search" action="#search">
186
186
  <input class="mx-input__text " id="search-keyword" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords...">
@@ -194,7 +194,7 @@ exports[`Stacked 1`] = `
194
194
  </div>
195
195
  </div>
196
196
  </header>
197
- <div id="primary-nav" class="mx-header__nav mx-page mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
197
+ <div id="unique-1" class="mx-header__nav mx-page mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
198
198
  <div class="mx-header__nav-inner">
199
199
 
200
200
 
@@ -207,17 +207,17 @@ exports[`Stacked 1`] = `
207
207
  </a>
208
208
  </li>
209
209
  <li class="mx-nav__has-subnav">
210
- <a href="#" id="list-label-subnav-0--about-us">
210
+ <a href="#" id="unique-5">
211
211
  About us
212
212
  </a>
213
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--about-us">Sub-navigation</button>
214
- <ul class="mx-nav__level-2" inert="" id="subnav-0--about-us" aria-labelledby="list-label-subnav-0--about-us">
213
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
214
+ <ul class="mx-nav__level-2" inert="" id="unique-2" aria-labelledby="unique-3">
215
215
  <li class="mx-nav__has-subnav">
216
- <a href="#" aria-current="page" id="list-label-subnav-1--who">
216
+ <a href="#" aria-current="page" id="unique-6">
217
217
  Who
218
218
  </a>
219
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who">Sub-navigation</button>
220
- <ul class="mx-nav__level-3" inert="" id="subnav-1--who" aria-labelledby="list-label-subnav-1--who">
219
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
220
+ <ul class="mx-nav__level-3" inert="" id="unique-3" aria-labelledby="unique-5">
221
221
  <li>
222
222
  <a href="#" aria-current="page">
223
223
  How come?
@@ -250,11 +250,11 @@ exports[`Stacked 1`] = `
250
250
 
251
251
  </li>
252
252
  <li class="mx-nav__has-subnav">
253
- <a href="#" id="list-label-subnav-2--contact">
253
+ <a href="#" id="unique-7">
254
254
  Contact
255
255
  </a>
256
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-2--contact">Sub-navigation</button>
257
- <ul class="mx-nav__level-2" inert="" id="subnav-2--contact" aria-labelledby="list-label-subnav-2--contact">
256
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-6">Sub-navigation</button>
257
+ <ul class="mx-nav__level-2" inert="" id="unique-4" aria-labelledby="unique-7">
258
258
  <li>
259
259
  <a href="#" aria-current="page">
260
260
  How
@@ -310,10 +310,10 @@ exports[`With Title 1`] = `
310
310
  </div>
311
311
  </div>
312
312
  <div class="mx-header__toggles">
313
- <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
313
+ <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
314
314
  </div>
315
315
  <div class="mx-header__main">
316
- <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
316
+ <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
317
317
 
318
318
 
319
319
  <mx-nav flyout="">