@pnx-mixtape/mxds 0.0.19 → 0.0.21

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 (120) hide show
  1. package/README.md +18 -6
  2. package/dist/build/accordion.entry.js +2 -2
  3. package/dist/build/accordion.entry.js.map +1 -1
  4. package/dist/build/base.css +2 -1
  5. package/dist/build/button.css +4 -4
  6. package/dist/build/card.css +6 -5
  7. package/dist/build/chunks/{Accordion-deu4CCT-.js → Accordion-O-huO4At.js} +2 -2
  8. package/dist/build/chunks/{Accordion-deu4CCT-.js.map → Accordion-O-huO4At.js.map} +1 -1
  9. package/dist/build/chunks/{disclosure-widget-WwE5XplD.js → disclosure-widget-DVpnRsTI.js} +2 -2
  10. package/dist/build/chunks/{disclosure-widget-WwE5XplD.js.map → disclosure-widget-DVpnRsTI.js.map} +1 -1
  11. package/dist/build/chunks/{drop-menu.entry-e1iZ4ERw.js → drop-menu.entry-B4TtnC50.js} +2 -2
  12. package/dist/build/chunks/{drop-menu.entry-e1iZ4ERw.js.map → drop-menu.entry-B4TtnC50.js.map} +1 -1
  13. package/dist/build/chunks/{utilities-BeWkujCZ.js → utilities-DXELy_An.js} +91 -1
  14. package/dist/build/chunks/utilities-DXELy_An.js.map +1 -0
  15. package/dist/build/constants.css +6 -4
  16. package/dist/build/dialog.css +1 -9
  17. package/dist/build/dialog.entry.js +1 -1
  18. package/dist/build/drop-menu.entry.js +1 -1
  19. package/dist/build/filters.entry.js +1 -1
  20. package/dist/build/global-alert.entry.js +1 -1
  21. package/dist/build/header.css +49 -63
  22. package/dist/build/header.entry.js +1107 -21
  23. package/dist/build/header.entry.js.map +1 -1
  24. package/dist/build/hero-banner.css +12 -6
  25. package/dist/build/in-page-navigation.entry.js +1 -1
  26. package/dist/build/navigation.entry.js +2 -2
  27. package/dist/build/page.css +2 -2
  28. package/dist/build/pagination.css +15 -21
  29. package/dist/build/steps.css +11 -11
  30. package/dist/build/sticky.entry.js +1 -1
  31. package/dist/build/tabs.entry.js +2 -2
  32. package/dist/build/utilities.css +9 -1
  33. package/package.json +18 -29
  34. package/src/Atom/Button/_buttons-styles.css +3 -3
  35. package/src/Atom/Heading/Heading.tsx +1 -1
  36. package/src/Atom/Icon/Icon.tsx +1 -1
  37. package/src/Atom/Link/Link.stories.tsx +2 -6
  38. package/src/Atom/Link/Link.tsx +9 -4
  39. package/src/Atom/Link/_links.css +1 -0
  40. package/src/Component/Accordion/Accordion.stories.tsx +39 -9
  41. package/src/Component/Accordion/Accordion.tsx +28 -50
  42. package/src/Component/Accordion/Components/AccordionContent.tsx +24 -0
  43. package/src/Component/Accordion/Components/AccordionTitle.tsx +34 -0
  44. package/src/Component/Accordion/Components/AccordionTitleIcon.tsx +22 -0
  45. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +26 -0
  46. package/src/Component/Breadcrumb/Breadcrumb.tsx +8 -2
  47. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +7 -3
  48. package/src/Component/Card/Card.stories.tsx +22 -19
  49. package/src/Component/Card/Card.tsx +6 -28
  50. package/src/Component/Card/Components/CardContent.tsx +12 -0
  51. package/src/Component/Card/Components/CardMedia.tsx +17 -0
  52. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +9 -9
  53. package/src/Component/Card/card.css +3 -2
  54. package/src/Component/ContentBlock/Components/ContentBlockContent.tsx +14 -0
  55. package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx +20 -0
  56. package/src/Component/ContentBlock/ContentBlock.stories.tsx +16 -13
  57. package/src/Component/ContentBlock/ContentBlock.tsx +5 -28
  58. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +0 -2
  59. package/src/Component/Dialog/Components/DialogCloseButton.tsx +18 -0
  60. package/src/Component/Dialog/Components/DialogContent.tsx +7 -0
  61. package/src/Component/Dialog/Dialog.stories.tsx +19 -24
  62. package/src/Component/Dialog/Dialog.tsx +31 -25
  63. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +14 -21
  64. package/src/Component/Dialog/dialog.css +0 -8
  65. package/src/Component/HeroBanner/HeroBanner.stories.ts +23 -12
  66. package/src/Component/HeroBanner/HeroBanner.stories.tsx +26 -7
  67. package/src/Component/HeroBanner/HeroBanner.tsx +2 -20
  68. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +51 -3
  69. package/src/Component/HeroBanner/hero-banner.css +8 -4
  70. package/src/Component/HeroBanner/hero-banner.twig +2 -2
  71. package/src/Component/HeroSearch/HeroSearch.stories.ts +105 -0
  72. package/src/Component/HeroSearch/HeroSearch.stories.tsx +48 -0
  73. package/src/Component/HeroSearch/HeroSearch.tsx +32 -0
  74. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +176 -0
  75. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +36 -0
  76. package/src/Component/HeroSearch/hero-search.twig +43 -0
  77. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +1 -1
  78. package/src/Component/InPageNavigation/InPageNavigation.tsx +1 -0
  79. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +1 -1
  80. package/src/Component/LinkList/LinkList.stories.ts +12 -0
  81. package/src/Component/LinkList/LinkList.stories.tsx +0 -6
  82. package/src/Component/LinkList/LinkList.tsx +5 -16
  83. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +37 -0
  84. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +9 -29
  85. package/src/Component/LinkList/link-list.twig +1 -0
  86. package/src/Component/ListItem/Components/ListItemContent.tsx +12 -0
  87. package/src/Component/ListItem/Components/ListItemMedia.tsx +20 -0
  88. package/src/Component/ListItem/ListItem.stories.tsx +22 -19
  89. package/src/Component/ListItem/ListItem.tsx +3 -32
  90. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +3 -0
  91. package/src/Component/Pagination/Components/PaginationContext.tsx +10 -4
  92. package/src/Component/Pagination/Components/PaginationItem.tsx +10 -10
  93. package/src/Component/Pagination/Pagination.tsx +6 -2
  94. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +10 -4
  95. package/src/Component/Pagination/pagination.css +13 -18
  96. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +12 -12
  97. package/src/Component/Steps/step-item.twig +1 -1
  98. package/src/Component/Steps/steps.css +1 -2
  99. package/src/Component/Tabs/Components/TabPanel.tsx +1 -1
  100. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -0
  101. package/src/Component/Tile/Tile.stories.tsx +20 -15
  102. package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +18 -23
  103. package/src/Layout/Header/Elements/GlobalToggle.ts +55 -21
  104. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +14 -14
  105. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -2
  106. package/src/Layout/Header/_header.css +2 -47
  107. package/src/Layout/Header/_toggles.css +37 -1
  108. package/src/Layout/Header/header.twig +5 -5
  109. package/src/Layout/Page/Page.stories.tsx +13 -4
  110. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -2
  111. package/src/Layout/Page/page.css +1 -1
  112. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +3 -3
  113. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +2 -2
  114. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +3 -3
  115. package/src/Utility/utilities.css +8 -0
  116. package/src/constants.css +5 -3
  117. package/src/react.ts +30 -7
  118. package/src/tokens.js +3 -1
  119. package/dist/build/chunks/utilities-BeWkujCZ.js.map +0 -1
  120. package/src/Component/Tile/Tile.tsx +0 -53
@@ -1,17 +1,1079 @@
1
- import { D as DisclosureWidget } from "./chunks/disclosure-widget-WwE5XplD.js";
2
- import "./chunks/utilities-BeWkujCZ.js";
1
+ import { D as DisclosureWidget } from "./chunks/disclosure-widget-DVpnRsTI.js";
2
+ import "./chunks/utilities-DXELy_An.js";
3
+ /*!
4
+ * tabbable 6.2.0
5
+ * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
6
+ */
7
+ var candidateSelectors = ["input:not([inert])", "select:not([inert])", "textarea:not([inert])", "a[href]:not([inert])", "button:not([inert])", "[tabindex]:not(slot):not([inert])", "audio[controls]:not([inert])", "video[controls]:not([inert])", '[contenteditable]:not([contenteditable="false"]):not([inert])', "details>summary:first-of-type:not([inert])", "details:not([inert])"];
8
+ var candidateSelector = /* @__PURE__ */ candidateSelectors.join(",");
9
+ var NoElement = typeof Element === "undefined";
10
+ var matches = NoElement ? function() {
11
+ } : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
12
+ var getRootNode = !NoElement && Element.prototype.getRootNode ? function(element) {
13
+ var _element$getRootNode;
14
+ return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
15
+ } : function(element) {
16
+ return element === null || element === void 0 ? void 0 : element.ownerDocument;
17
+ };
18
+ var isInert = function isInert2(node, lookUp) {
19
+ var _node$getAttribute;
20
+ if (lookUp === void 0) {
21
+ lookUp = true;
22
+ }
23
+ var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, "inert");
24
+ var inert = inertAtt === "" || inertAtt === "true";
25
+ var result = inert || lookUp && node && isInert2(node.parentNode);
26
+ return result;
27
+ };
28
+ var isContentEditable = function isContentEditable2(node) {
29
+ var _node$getAttribute2;
30
+ var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, "contenteditable");
31
+ return attValue === "" || attValue === "true";
32
+ };
33
+ var getCandidates = function getCandidates2(el, includeContainer, filter) {
34
+ if (isInert(el)) {
35
+ return [];
36
+ }
37
+ var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
38
+ if (includeContainer && matches.call(el, candidateSelector)) {
39
+ candidates.unshift(el);
40
+ }
41
+ candidates = candidates.filter(filter);
42
+ return candidates;
43
+ };
44
+ var getCandidatesIteratively = function getCandidatesIteratively2(elements, includeContainer, options) {
45
+ var candidates = [];
46
+ var elementsToCheck = Array.from(elements);
47
+ while (elementsToCheck.length) {
48
+ var element = elementsToCheck.shift();
49
+ if (isInert(element, false)) {
50
+ continue;
51
+ }
52
+ if (element.tagName === "SLOT") {
53
+ var assigned = element.assignedElements();
54
+ var content = assigned.length ? assigned : element.children;
55
+ var nestedCandidates = getCandidatesIteratively2(content, true, options);
56
+ if (options.flatten) {
57
+ candidates.push.apply(candidates, nestedCandidates);
58
+ } else {
59
+ candidates.push({
60
+ scopeParent: element,
61
+ candidates: nestedCandidates
62
+ });
63
+ }
64
+ } else {
65
+ var validCandidate = matches.call(element, candidateSelector);
66
+ if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
67
+ candidates.push(element);
68
+ }
69
+ var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
70
+ typeof options.getShadowRoot === "function" && options.getShadowRoot(element);
71
+ var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
72
+ if (shadowRoot && validShadowRoot) {
73
+ var _nestedCandidates = getCandidatesIteratively2(shadowRoot === true ? element.children : shadowRoot.children, true, options);
74
+ if (options.flatten) {
75
+ candidates.push.apply(candidates, _nestedCandidates);
76
+ } else {
77
+ candidates.push({
78
+ scopeParent: element,
79
+ candidates: _nestedCandidates
80
+ });
81
+ }
82
+ } else {
83
+ elementsToCheck.unshift.apply(elementsToCheck, element.children);
84
+ }
85
+ }
86
+ }
87
+ return candidates;
88
+ };
89
+ var hasTabIndex = function hasTabIndex2(node) {
90
+ return !isNaN(parseInt(node.getAttribute("tabindex"), 10));
91
+ };
92
+ var getTabIndex = function getTabIndex2(node) {
93
+ if (!node) {
94
+ throw new Error("No node provided");
95
+ }
96
+ if (node.tabIndex < 0) {
97
+ if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
98
+ return 0;
99
+ }
100
+ }
101
+ return node.tabIndex;
102
+ };
103
+ var getSortOrderTabIndex = function getSortOrderTabIndex2(node, isScope) {
104
+ var tabIndex = getTabIndex(node);
105
+ if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
106
+ return 0;
107
+ }
108
+ return tabIndex;
109
+ };
110
+ var sortOrderedTabbables = function sortOrderedTabbables2(a, b) {
111
+ return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
112
+ };
113
+ var isInput = function isInput2(node) {
114
+ return node.tagName === "INPUT";
115
+ };
116
+ var isHiddenInput = function isHiddenInput2(node) {
117
+ return isInput(node) && node.type === "hidden";
118
+ };
119
+ var isDetailsWithSummary = function isDetailsWithSummary2(node) {
120
+ var r = node.tagName === "DETAILS" && Array.prototype.slice.apply(node.children).some(function(child) {
121
+ return child.tagName === "SUMMARY";
122
+ });
123
+ return r;
124
+ };
125
+ var getCheckedRadio = function getCheckedRadio2(nodes, form) {
126
+ for (var i = 0; i < nodes.length; i++) {
127
+ if (nodes[i].checked && nodes[i].form === form) {
128
+ return nodes[i];
129
+ }
130
+ }
131
+ };
132
+ var isTabbableRadio = function isTabbableRadio2(node) {
133
+ if (!node.name) {
134
+ return true;
135
+ }
136
+ var radioScope = node.form || getRootNode(node);
137
+ var queryRadios = function queryRadios2(name) {
138
+ return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
139
+ };
140
+ var radioSet;
141
+ if (typeof window !== "undefined" && typeof window.CSS !== "undefined" && typeof window.CSS.escape === "function") {
142
+ radioSet = queryRadios(window.CSS.escape(node.name));
143
+ } else {
144
+ try {
145
+ radioSet = queryRadios(node.name);
146
+ } catch (err) {
147
+ console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", err.message);
148
+ return false;
149
+ }
150
+ }
151
+ var checked = getCheckedRadio(radioSet, node.form);
152
+ return !checked || checked === node;
153
+ };
154
+ var isRadio = function isRadio2(node) {
155
+ return isInput(node) && node.type === "radio";
156
+ };
157
+ var isNonTabbableRadio = function isNonTabbableRadio2(node) {
158
+ return isRadio(node) && !isTabbableRadio(node);
159
+ };
160
+ var isNodeAttached = function isNodeAttached2(node) {
161
+ var _nodeRoot;
162
+ var nodeRoot = node && getRootNode(node);
163
+ var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
164
+ var attached = false;
165
+ if (nodeRoot && nodeRoot !== node) {
166
+ var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
167
+ attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
168
+ while (!attached && nodeRootHost) {
169
+ var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
170
+ nodeRoot = getRootNode(nodeRootHost);
171
+ nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
172
+ attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
173
+ }
174
+ }
175
+ return attached;
176
+ };
177
+ var isZeroArea = function isZeroArea2(node) {
178
+ var _node$getBoundingClie = node.getBoundingClientRect(), width = _node$getBoundingClie.width, height = _node$getBoundingClie.height;
179
+ return width === 0 && height === 0;
180
+ };
181
+ var isHidden = function isHidden2(node, _ref) {
182
+ var displayCheck = _ref.displayCheck, getShadowRoot = _ref.getShadowRoot;
183
+ if (getComputedStyle(node).visibility === "hidden") {
184
+ return true;
185
+ }
186
+ var isDirectSummary = matches.call(node, "details>summary:first-of-type");
187
+ var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
188
+ if (matches.call(nodeUnderDetails, "details:not([open]) *")) {
189
+ return true;
190
+ }
191
+ if (!displayCheck || displayCheck === "full" || displayCheck === "legacy-full") {
192
+ if (typeof getShadowRoot === "function") {
193
+ var originalNode = node;
194
+ while (node) {
195
+ var parentElement = node.parentElement;
196
+ var rootNode = getRootNode(node);
197
+ if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true) {
198
+ return isZeroArea(node);
199
+ } else if (node.assignedSlot) {
200
+ node = node.assignedSlot;
201
+ } else if (!parentElement && rootNode !== node.ownerDocument) {
202
+ node = rootNode.host;
203
+ } else {
204
+ node = parentElement;
205
+ }
206
+ }
207
+ node = originalNode;
208
+ }
209
+ if (isNodeAttached(node)) {
210
+ return !node.getClientRects().length;
211
+ }
212
+ if (displayCheck !== "legacy-full") {
213
+ return true;
214
+ }
215
+ } else if (displayCheck === "non-zero-area") {
216
+ return isZeroArea(node);
217
+ }
218
+ return false;
219
+ };
220
+ var isDisabledFromFieldset = function isDisabledFromFieldset2(node) {
221
+ if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
222
+ var parentNode = node.parentElement;
223
+ while (parentNode) {
224
+ if (parentNode.tagName === "FIELDSET" && parentNode.disabled) {
225
+ for (var i = 0; i < parentNode.children.length; i++) {
226
+ var child = parentNode.children.item(i);
227
+ if (child.tagName === "LEGEND") {
228
+ return matches.call(parentNode, "fieldset[disabled] *") ? true : !child.contains(node);
229
+ }
230
+ }
231
+ return true;
232
+ }
233
+ parentNode = parentNode.parentElement;
234
+ }
235
+ }
236
+ return false;
237
+ };
238
+ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable2(options, node) {
239
+ if (node.disabled || // we must do an inert look up to filter out any elements inside an inert ancestor
240
+ // because we're limited in the type of selectors we can use in JSDom (see related
241
+ // note related to `candidateSelectors`)
242
+ isInert(node) || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
243
+ isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
244
+ return false;
245
+ }
246
+ return true;
247
+ };
248
+ var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable2(options, node) {
249
+ if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
250
+ return false;
251
+ }
252
+ return true;
253
+ };
254
+ var isValidShadowRootTabbable = function isValidShadowRootTabbable2(shadowHostNode) {
255
+ var tabIndex = parseInt(shadowHostNode.getAttribute("tabindex"), 10);
256
+ if (isNaN(tabIndex) || tabIndex >= 0) {
257
+ return true;
258
+ }
259
+ return false;
260
+ };
261
+ var sortByOrder = function sortByOrder2(candidates) {
262
+ var regularTabbables = [];
263
+ var orderedTabbables = [];
264
+ candidates.forEach(function(item, i) {
265
+ var isScope = !!item.scopeParent;
266
+ var element = isScope ? item.scopeParent : item;
267
+ var candidateTabindex = getSortOrderTabIndex(element, isScope);
268
+ var elements = isScope ? sortByOrder2(item.candidates) : element;
269
+ if (candidateTabindex === 0) {
270
+ isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
271
+ } else {
272
+ orderedTabbables.push({
273
+ documentOrder: i,
274
+ tabIndex: candidateTabindex,
275
+ item,
276
+ isScope,
277
+ content: elements
278
+ });
279
+ }
280
+ });
281
+ return orderedTabbables.sort(sortOrderedTabbables).reduce(function(acc, sortable) {
282
+ sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
283
+ return acc;
284
+ }, []).concat(regularTabbables);
285
+ };
286
+ var tabbable = function tabbable2(container, options) {
287
+ options = options || {};
288
+ var candidates;
289
+ if (options.getShadowRoot) {
290
+ candidates = getCandidatesIteratively([container], options.includeContainer, {
291
+ filter: isNodeMatchingSelectorTabbable.bind(null, options),
292
+ flatten: false,
293
+ getShadowRoot: options.getShadowRoot,
294
+ shadowRootFilter: isValidShadowRootTabbable
295
+ });
296
+ } else {
297
+ candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
298
+ }
299
+ return sortByOrder(candidates);
300
+ };
301
+ var focusable = function focusable2(container, options) {
302
+ options = options || {};
303
+ var candidates;
304
+ if (options.getShadowRoot) {
305
+ candidates = getCandidatesIteratively([container], options.includeContainer, {
306
+ filter: isNodeMatchingSelectorFocusable.bind(null, options),
307
+ flatten: true,
308
+ getShadowRoot: options.getShadowRoot
309
+ });
310
+ } else {
311
+ candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
312
+ }
313
+ return candidates;
314
+ };
315
+ var isTabbable = function isTabbable2(node, options) {
316
+ options = options || {};
317
+ if (!node) {
318
+ throw new Error("No node provided");
319
+ }
320
+ if (matches.call(node, candidateSelector) === false) {
321
+ return false;
322
+ }
323
+ return isNodeMatchingSelectorTabbable(options, node);
324
+ };
325
+ var focusableCandidateSelector = /* @__PURE__ */ candidateSelectors.concat("iframe").join(",");
326
+ var isFocusable = function isFocusable2(node, options) {
327
+ options = options || {};
328
+ if (!node) {
329
+ throw new Error("No node provided");
330
+ }
331
+ if (matches.call(node, focusableCandidateSelector) === false) {
332
+ return false;
333
+ }
334
+ return isNodeMatchingSelectorFocusable(options, node);
335
+ };
336
+ /*!
337
+ * focus-trap 7.6.5
338
+ * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
339
+ */
340
+ function _arrayLikeToArray(r, a) {
341
+ (null == a || a > r.length) && (a = r.length);
342
+ for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
343
+ return n;
344
+ }
345
+ function _arrayWithoutHoles(r) {
346
+ if (Array.isArray(r)) return _arrayLikeToArray(r);
347
+ }
348
+ function _defineProperty(e, r, t) {
349
+ return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
350
+ value: t,
351
+ enumerable: true,
352
+ configurable: true,
353
+ writable: true
354
+ }) : e[r] = t, e;
355
+ }
356
+ function _iterableToArray(r) {
357
+ if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
358
+ }
359
+ function _nonIterableSpread() {
360
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
361
+ }
362
+ function ownKeys(e, r) {
363
+ var t = Object.keys(e);
364
+ if (Object.getOwnPropertySymbols) {
365
+ var o = Object.getOwnPropertySymbols(e);
366
+ r && (o = o.filter(function(r2) {
367
+ return Object.getOwnPropertyDescriptor(e, r2).enumerable;
368
+ })), t.push.apply(t, o);
369
+ }
370
+ return t;
371
+ }
372
+ function _objectSpread2(e) {
373
+ for (var r = 1; r < arguments.length; r++) {
374
+ var t = null != arguments[r] ? arguments[r] : {};
375
+ r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
376
+ _defineProperty(e, r2, t[r2]);
377
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
378
+ Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
379
+ });
380
+ }
381
+ return e;
382
+ }
383
+ function _toConsumableArray(r) {
384
+ return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
385
+ }
386
+ function _toPrimitive(t, r) {
387
+ if ("object" != typeof t || !t) return t;
388
+ var e = t[Symbol.toPrimitive];
389
+ if (void 0 !== e) {
390
+ var i = e.call(t, r);
391
+ if ("object" != typeof i) return i;
392
+ throw new TypeError("@@toPrimitive must return a primitive value.");
393
+ }
394
+ return ("string" === r ? String : Number)(t);
395
+ }
396
+ function _toPropertyKey(t) {
397
+ var i = _toPrimitive(t, "string");
398
+ return "symbol" == typeof i ? i : i + "";
399
+ }
400
+ function _unsupportedIterableToArray(r, a) {
401
+ if (r) {
402
+ if ("string" == typeof r) return _arrayLikeToArray(r, a);
403
+ var t = {}.toString.call(r).slice(8, -1);
404
+ return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
405
+ }
406
+ }
407
+ var activeFocusTraps = {
408
+ activateTrap: function activateTrap(trapStack, trap) {
409
+ if (trapStack.length > 0) {
410
+ var activeTrap = trapStack[trapStack.length - 1];
411
+ if (activeTrap !== trap) {
412
+ activeTrap._setPausedState(true);
413
+ }
414
+ }
415
+ var trapIndex = trapStack.indexOf(trap);
416
+ if (trapIndex === -1) {
417
+ trapStack.push(trap);
418
+ } else {
419
+ trapStack.splice(trapIndex, 1);
420
+ trapStack.push(trap);
421
+ }
422
+ },
423
+ deactivateTrap: function deactivateTrap(trapStack, trap) {
424
+ var trapIndex = trapStack.indexOf(trap);
425
+ if (trapIndex !== -1) {
426
+ trapStack.splice(trapIndex, 1);
427
+ }
428
+ if (trapStack.length > 0 && !trapStack[trapStack.length - 1]._isManuallyPaused()) {
429
+ trapStack[trapStack.length - 1]._setPausedState(false);
430
+ }
431
+ }
432
+ };
433
+ var isSelectableInput = function isSelectableInput2(node) {
434
+ return node.tagName && node.tagName.toLowerCase() === "input" && typeof node.select === "function";
435
+ };
436
+ var isEscapeEvent = function isEscapeEvent2(e) {
437
+ return (e === null || e === void 0 ? void 0 : e.key) === "Escape" || (e === null || e === void 0 ? void 0 : e.key) === "Esc" || (e === null || e === void 0 ? void 0 : e.keyCode) === 27;
438
+ };
439
+ var isTabEvent = function isTabEvent2(e) {
440
+ return (e === null || e === void 0 ? void 0 : e.key) === "Tab" || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;
441
+ };
442
+ var isKeyForward = function isKeyForward2(e) {
443
+ return isTabEvent(e) && !e.shiftKey;
444
+ };
445
+ var isKeyBackward = function isKeyBackward2(e) {
446
+ return isTabEvent(e) && e.shiftKey;
447
+ };
448
+ var delay = function delay2(fn) {
449
+ return setTimeout(fn, 0);
450
+ };
451
+ var valueOrHandler = function valueOrHandler2(value) {
452
+ for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
453
+ params[_key - 1] = arguments[_key];
454
+ }
455
+ return typeof value === "function" ? value.apply(void 0, params) : value;
456
+ };
457
+ var getActualTarget = function getActualTarget2(event) {
458
+ return event.target.shadowRoot && typeof event.composedPath === "function" ? event.composedPath()[0] : event.target;
459
+ };
460
+ var internalTrapStack = [];
461
+ var createFocusTrap = function createFocusTrap2(elements, userOptions) {
462
+ var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
463
+ var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
464
+ var config = _objectSpread2({
465
+ returnFocusOnDeactivate: true,
466
+ escapeDeactivates: true,
467
+ delayInitialFocus: true,
468
+ isKeyForward,
469
+ isKeyBackward
470
+ }, userOptions);
471
+ var state = {
472
+ // containers given to createFocusTrap()
473
+ // @type {Array<HTMLElement>}
474
+ containers: [],
475
+ // list of objects identifying tabbable nodes in `containers` in the trap
476
+ // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
477
+ // is active, but the trap should never get to a state where there isn't at least one group
478
+ // with at least one tabbable node in it (that would lead to an error condition that would
479
+ // result in an error being thrown)
480
+ // @type {Array<{
481
+ // container: HTMLElement,
482
+ // tabbableNodes: Array<HTMLElement>, // empty if none
483
+ // focusableNodes: Array<HTMLElement>, // empty if none
484
+ // posTabIndexesFound: boolean,
485
+ // firstTabbableNode: HTMLElement|undefined,
486
+ // lastTabbableNode: HTMLElement|undefined,
487
+ // firstDomTabbableNode: HTMLElement|undefined,
488
+ // lastDomTabbableNode: HTMLElement|undefined,
489
+ // nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
490
+ // }>}
491
+ containerGroups: [],
492
+ // same order/length as `containers` list
493
+ // references to objects in `containerGroups`, but only those that actually have
494
+ // tabbable nodes in them
495
+ // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
496
+ // the same length
497
+ tabbableGroups: [],
498
+ nodeFocusedBeforeActivation: null,
499
+ mostRecentlyFocusedNode: null,
500
+ active: false,
501
+ paused: false,
502
+ manuallyPaused: false,
503
+ // timer ID for when delayInitialFocus is true and initial focus in this trap
504
+ // has been delayed during activation
505
+ delayInitialFocusTimer: void 0,
506
+ // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any
507
+ recentNavEvent: void 0
508
+ };
509
+ var trap;
510
+ var getOption = function getOption2(configOverrideOptions, optionName, configOptionName) {
511
+ return configOverrideOptions && configOverrideOptions[optionName] !== void 0 ? configOverrideOptions[optionName] : config[configOptionName || optionName];
512
+ };
513
+ var findContainerIndex = function findContainerIndex2(element, event) {
514
+ var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === "function" ? event.composedPath() : void 0;
515
+ return state.containerGroups.findIndex(function(_ref) {
516
+ var container = _ref.container, tabbableNodes = _ref.tabbableNodes;
517
+ return container.contains(element) || // fall back to explicit tabbable search which will take into consideration any
518
+ // web components if the `tabbableOptions.getShadowRoot` option was used for
519
+ // the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
520
+ // look inside web components even if open)
521
+ (composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function(node) {
522
+ return node === element;
523
+ });
524
+ });
525
+ };
526
+ var getNodeForOption = function getNodeForOption2(optionName) {
527
+ var _ref2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, _ref2$hasFallback = _ref2.hasFallback, hasFallback = _ref2$hasFallback === void 0 ? false : _ref2$hasFallback, _ref2$params = _ref2.params, params = _ref2$params === void 0 ? [] : _ref2$params;
528
+ var optionValue = config[optionName];
529
+ if (typeof optionValue === "function") {
530
+ optionValue = optionValue.apply(void 0, _toConsumableArray(params));
531
+ }
532
+ if (optionValue === true) {
533
+ optionValue = void 0;
534
+ }
535
+ if (!optionValue) {
536
+ if (optionValue === void 0 || optionValue === false) {
537
+ return optionValue;
538
+ }
539
+ throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
540
+ }
541
+ var node = optionValue;
542
+ if (typeof optionValue === "string") {
543
+ try {
544
+ node = doc.querySelector(optionValue);
545
+ } catch (err) {
546
+ throw new Error("`".concat(optionName, '` appears to be an invalid selector; error="').concat(err.message, '"'));
547
+ }
548
+ if (!node) {
549
+ if (!hasFallback) {
550
+ throw new Error("`".concat(optionName, "` as selector refers to no known node"));
551
+ }
552
+ }
553
+ }
554
+ return node;
555
+ };
556
+ var getInitialFocusNode = function getInitialFocusNode2() {
557
+ var node = getNodeForOption("initialFocus", {
558
+ hasFallback: true
559
+ });
560
+ if (node === false) {
561
+ return false;
562
+ }
563
+ if (node === void 0 || node && !isFocusable(node, config.tabbableOptions)) {
564
+ if (findContainerIndex(doc.activeElement) >= 0) {
565
+ node = doc.activeElement;
566
+ } else {
567
+ var firstTabbableGroup = state.tabbableGroups[0];
568
+ var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
569
+ node = firstTabbableNode || getNodeForOption("fallbackFocus");
570
+ }
571
+ } else if (node === null) {
572
+ node = getNodeForOption("fallbackFocus");
573
+ }
574
+ if (!node) {
575
+ throw new Error("Your focus-trap needs to have at least one focusable element");
576
+ }
577
+ return node;
578
+ };
579
+ var updateTabbableNodes = function updateTabbableNodes2() {
580
+ state.containerGroups = state.containers.map(function(container) {
581
+ var tabbableNodes = tabbable(container, config.tabbableOptions);
582
+ var focusableNodes = focusable(container, config.tabbableOptions);
583
+ var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : void 0;
584
+ var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : void 0;
585
+ var firstDomTabbableNode = focusableNodes.find(function(node) {
586
+ return isTabbable(node);
587
+ });
588
+ var lastDomTabbableNode = focusableNodes.slice().reverse().find(function(node) {
589
+ return isTabbable(node);
590
+ });
591
+ var posTabIndexesFound = !!tabbableNodes.find(function(node) {
592
+ return getTabIndex(node) > 0;
593
+ });
594
+ return {
595
+ container,
596
+ tabbableNodes,
597
+ focusableNodes,
598
+ /** True if at least one node with positive `tabindex` was found in this container. */
599
+ posTabIndexesFound,
600
+ /** First tabbable node in container, __tabindex__ order; `undefined` if none. */
601
+ firstTabbableNode,
602
+ /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */
603
+ lastTabbableNode,
604
+ // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out
605
+ // would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
606
+ // because that API doesn't work with Shadow DOM as well as it should (@see
607
+ // https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far,
608
+ // to address an edge case related to positive tabindex support, this seems like a much easier,
609
+ // "close enough most of the time" alternative for positive tabindexes which should generally
610
+ // be avoided anyway...
611
+ /** First tabbable node in container, __DOM__ order; `undefined` if none. */
612
+ firstDomTabbableNode,
613
+ /** Last tabbable node in container, __DOM__ order; `undefined` if none. */
614
+ lastDomTabbableNode,
615
+ /**
616
+ * Finds the __tabbable__ node that follows the given node in the specified direction,
617
+ * in this container, if any.
618
+ * @param {HTMLElement} node
619
+ * @param {boolean} [forward] True if going in forward tab order; false if going
620
+ * in reverse.
621
+ * @returns {HTMLElement|undefined} The next tabbable node, if any.
622
+ */
623
+ nextTabbableNode: function nextTabbableNode(node) {
624
+ var forward = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
625
+ var nodeIdx = tabbableNodes.indexOf(node);
626
+ if (nodeIdx < 0) {
627
+ if (forward) {
628
+ return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function(el) {
629
+ return isTabbable(el);
630
+ });
631
+ }
632
+ return focusableNodes.slice(0, focusableNodes.indexOf(node)).reverse().find(function(el) {
633
+ return isTabbable(el);
634
+ });
635
+ }
636
+ return tabbableNodes[nodeIdx + (forward ? 1 : -1)];
637
+ }
638
+ };
639
+ });
640
+ state.tabbableGroups = state.containerGroups.filter(function(group) {
641
+ return group.tabbableNodes.length > 0;
642
+ });
643
+ if (state.tabbableGroups.length <= 0 && !getNodeForOption("fallbackFocus")) {
644
+ throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");
645
+ }
646
+ if (state.containerGroups.find(function(g) {
647
+ return g.posTabIndexesFound;
648
+ }) && state.containerGroups.length > 1) {
649
+ throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
650
+ }
651
+ };
652
+ var _getActiveElement = function getActiveElement(el) {
653
+ var activeElement = el.activeElement;
654
+ if (!activeElement) {
655
+ return;
656
+ }
657
+ if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
658
+ return _getActiveElement(activeElement.shadowRoot);
659
+ }
660
+ return activeElement;
661
+ };
662
+ var _tryFocus = function tryFocus(node) {
663
+ if (node === false) {
664
+ return;
665
+ }
666
+ if (node === _getActiveElement(document)) {
667
+ return;
668
+ }
669
+ if (!node || !node.focus) {
670
+ _tryFocus(getInitialFocusNode());
671
+ return;
672
+ }
673
+ node.focus({
674
+ preventScroll: !!config.preventScroll
675
+ });
676
+ state.mostRecentlyFocusedNode = node;
677
+ if (isSelectableInput(node)) {
678
+ node.select();
679
+ }
680
+ };
681
+ var getReturnFocusNode = function getReturnFocusNode2(previousActiveElement) {
682
+ var node = getNodeForOption("setReturnFocus", {
683
+ params: [previousActiveElement]
684
+ });
685
+ return node ? node : node === false ? false : previousActiveElement;
686
+ };
687
+ var findNextNavNode = function findNextNavNode2(_ref3) {
688
+ var target = _ref3.target, event = _ref3.event, _ref3$isBackward = _ref3.isBackward, isBackward = _ref3$isBackward === void 0 ? false : _ref3$isBackward;
689
+ target = target || getActualTarget(event);
690
+ updateTabbableNodes();
691
+ var destinationNode = null;
692
+ if (state.tabbableGroups.length > 0) {
693
+ var containerIndex = findContainerIndex(target, event);
694
+ var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : void 0;
695
+ if (containerIndex < 0) {
696
+ if (isBackward) {
697
+ destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
698
+ } else {
699
+ destinationNode = state.tabbableGroups[0].firstTabbableNode;
700
+ }
701
+ } else if (isBackward) {
702
+ var startOfGroupIndex = state.tabbableGroups.findIndex(function(_ref4) {
703
+ var firstTabbableNode = _ref4.firstTabbableNode;
704
+ return target === firstTabbableNode;
705
+ });
706
+ if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
707
+ startOfGroupIndex = containerIndex;
708
+ }
709
+ if (startOfGroupIndex >= 0) {
710
+ var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
711
+ var destinationGroup = state.tabbableGroups[destinationGroupIndex];
712
+ destinationNode = getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode;
713
+ } else if (!isTabEvent(event)) {
714
+ destinationNode = containerGroup.nextTabbableNode(target, false);
715
+ }
716
+ } else {
717
+ var lastOfGroupIndex = state.tabbableGroups.findIndex(function(_ref5) {
718
+ var lastTabbableNode = _ref5.lastTabbableNode;
719
+ return target === lastTabbableNode;
720
+ });
721
+ if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
722
+ lastOfGroupIndex = containerIndex;
723
+ }
724
+ if (lastOfGroupIndex >= 0) {
725
+ var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
726
+ var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
727
+ destinationNode = getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode;
728
+ } else if (!isTabEvent(event)) {
729
+ destinationNode = containerGroup.nextTabbableNode(target);
730
+ }
731
+ }
732
+ } else {
733
+ destinationNode = getNodeForOption("fallbackFocus");
734
+ }
735
+ return destinationNode;
736
+ };
737
+ var checkPointerDown = function checkPointerDown2(e) {
738
+ var target = getActualTarget(e);
739
+ if (findContainerIndex(target, e) >= 0) {
740
+ return;
741
+ }
742
+ if (valueOrHandler(config.clickOutsideDeactivates, e)) {
743
+ trap.deactivate({
744
+ // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
745
+ // which will result in the outside click setting focus to the node
746
+ // that was clicked (and if not focusable, to "nothing"); by setting
747
+ // `returnFocus: true`, we'll attempt to re-focus the node originally-focused
748
+ // on activation (or the configured `setReturnFocus` node), whether the
749
+ // outside click was on a focusable node or not
750
+ returnFocus: config.returnFocusOnDeactivate
751
+ });
752
+ return;
753
+ }
754
+ if (valueOrHandler(config.allowOutsideClick, e)) {
755
+ return;
756
+ }
757
+ e.preventDefault();
758
+ };
759
+ var checkFocusIn = function checkFocusIn2(event) {
760
+ var target = getActualTarget(event);
761
+ var targetContained = findContainerIndex(target, event) >= 0;
762
+ if (targetContained || target instanceof Document) {
763
+ if (targetContained) {
764
+ state.mostRecentlyFocusedNode = target;
765
+ }
766
+ } else {
767
+ event.stopImmediatePropagation();
768
+ var nextNode;
769
+ var navAcrossContainers = true;
770
+ if (state.mostRecentlyFocusedNode) {
771
+ if (getTabIndex(state.mostRecentlyFocusedNode) > 0) {
772
+ var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode);
773
+ var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes;
774
+ if (tabbableNodes.length > 0) {
775
+ var mruTabIdx = tabbableNodes.findIndex(function(node) {
776
+ return node === state.mostRecentlyFocusedNode;
777
+ });
778
+ if (mruTabIdx >= 0) {
779
+ if (config.isKeyForward(state.recentNavEvent)) {
780
+ if (mruTabIdx + 1 < tabbableNodes.length) {
781
+ nextNode = tabbableNodes[mruTabIdx + 1];
782
+ navAcrossContainers = false;
783
+ }
784
+ } else {
785
+ if (mruTabIdx - 1 >= 0) {
786
+ nextNode = tabbableNodes[mruTabIdx - 1];
787
+ navAcrossContainers = false;
788
+ }
789
+ }
790
+ }
791
+ }
792
+ } else {
793
+ if (!state.containerGroups.some(function(g) {
794
+ return g.tabbableNodes.some(function(n) {
795
+ return getTabIndex(n) > 0;
796
+ });
797
+ })) {
798
+ navAcrossContainers = false;
799
+ }
800
+ }
801
+ } else {
802
+ navAcrossContainers = false;
803
+ }
804
+ if (navAcrossContainers) {
805
+ nextNode = findNextNavNode({
806
+ // move FROM the MRU node, not event-related node (which will be the node that is
807
+ // outside the trap causing the focus escape we're trying to fix)
808
+ target: state.mostRecentlyFocusedNode,
809
+ isBackward: config.isKeyBackward(state.recentNavEvent)
810
+ });
811
+ }
812
+ if (nextNode) {
813
+ _tryFocus(nextNode);
814
+ } else {
815
+ _tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
816
+ }
817
+ }
818
+ state.recentNavEvent = void 0;
819
+ };
820
+ var checkKeyNav = function checkKeyNav2(event) {
821
+ var isBackward = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
822
+ state.recentNavEvent = event;
823
+ var destinationNode = findNextNavNode({
824
+ event,
825
+ isBackward
826
+ });
827
+ if (destinationNode) {
828
+ if (isTabEvent(event)) {
829
+ event.preventDefault();
830
+ }
831
+ _tryFocus(destinationNode);
832
+ }
833
+ };
834
+ var checkTabKey = function checkTabKey2(event) {
835
+ if (config.isKeyForward(event) || config.isKeyBackward(event)) {
836
+ checkKeyNav(event, config.isKeyBackward(event));
837
+ }
838
+ };
839
+ var checkEscapeKey = function checkEscapeKey2(event) {
840
+ if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
841
+ event.preventDefault();
842
+ trap.deactivate();
843
+ }
844
+ };
845
+ var checkClick = function checkClick2(e) {
846
+ var target = getActualTarget(e);
847
+ if (findContainerIndex(target, e) >= 0) {
848
+ return;
849
+ }
850
+ if (valueOrHandler(config.clickOutsideDeactivates, e)) {
851
+ return;
852
+ }
853
+ if (valueOrHandler(config.allowOutsideClick, e)) {
854
+ return;
855
+ }
856
+ e.preventDefault();
857
+ e.stopImmediatePropagation();
858
+ };
859
+ var addListeners = function addListeners2() {
860
+ if (!state.active) {
861
+ return;
862
+ }
863
+ activeFocusTraps.activateTrap(trapStack, trap);
864
+ state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function() {
865
+ _tryFocus(getInitialFocusNode());
866
+ }) : _tryFocus(getInitialFocusNode());
867
+ doc.addEventListener("focusin", checkFocusIn, true);
868
+ doc.addEventListener("mousedown", checkPointerDown, {
869
+ capture: true,
870
+ passive: false
871
+ });
872
+ doc.addEventListener("touchstart", checkPointerDown, {
873
+ capture: true,
874
+ passive: false
875
+ });
876
+ doc.addEventListener("click", checkClick, {
877
+ capture: true,
878
+ passive: false
879
+ });
880
+ doc.addEventListener("keydown", checkTabKey, {
881
+ capture: true,
882
+ passive: false
883
+ });
884
+ doc.addEventListener("keydown", checkEscapeKey);
885
+ return trap;
886
+ };
887
+ var removeListeners = function removeListeners2() {
888
+ if (!state.active) {
889
+ return;
890
+ }
891
+ doc.removeEventListener("focusin", checkFocusIn, true);
892
+ doc.removeEventListener("mousedown", checkPointerDown, true);
893
+ doc.removeEventListener("touchstart", checkPointerDown, true);
894
+ doc.removeEventListener("click", checkClick, true);
895
+ doc.removeEventListener("keydown", checkTabKey, true);
896
+ doc.removeEventListener("keydown", checkEscapeKey);
897
+ return trap;
898
+ };
899
+ var checkDomRemoval = function checkDomRemoval2(mutations) {
900
+ var isFocusedNodeRemoved = mutations.some(function(mutation) {
901
+ var removedNodes = Array.from(mutation.removedNodes);
902
+ return removedNodes.some(function(node) {
903
+ return node === state.mostRecentlyFocusedNode;
904
+ });
905
+ });
906
+ if (isFocusedNodeRemoved) {
907
+ _tryFocus(getInitialFocusNode());
908
+ }
909
+ };
910
+ var mutationObserver = typeof window !== "undefined" && "MutationObserver" in window ? new MutationObserver(checkDomRemoval) : void 0;
911
+ var updateObservedNodes = function updateObservedNodes2() {
912
+ if (!mutationObserver) {
913
+ return;
914
+ }
915
+ mutationObserver.disconnect();
916
+ if (state.active && !state.paused) {
917
+ state.containers.map(function(container) {
918
+ mutationObserver.observe(container, {
919
+ subtree: true,
920
+ childList: true
921
+ });
922
+ });
923
+ }
924
+ };
925
+ trap = {
926
+ get active() {
927
+ return state.active;
928
+ },
929
+ get paused() {
930
+ return state.paused;
931
+ },
932
+ activate: function activate(activateOptions) {
933
+ if (state.active) {
934
+ return this;
935
+ }
936
+ var onActivate = getOption(activateOptions, "onActivate");
937
+ var onPostActivate = getOption(activateOptions, "onPostActivate");
938
+ var checkCanFocusTrap = getOption(activateOptions, "checkCanFocusTrap");
939
+ if (!checkCanFocusTrap) {
940
+ updateTabbableNodes();
941
+ }
942
+ state.active = true;
943
+ state.paused = false;
944
+ state.nodeFocusedBeforeActivation = _getActiveElement(doc);
945
+ onActivate === null || onActivate === void 0 || onActivate();
946
+ var finishActivation = function finishActivation2() {
947
+ if (checkCanFocusTrap) {
948
+ updateTabbableNodes();
949
+ }
950
+ addListeners();
951
+ updateObservedNodes();
952
+ onPostActivate === null || onPostActivate === void 0 || onPostActivate();
953
+ };
954
+ if (checkCanFocusTrap) {
955
+ checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
956
+ return this;
957
+ }
958
+ finishActivation();
959
+ return this;
960
+ },
961
+ deactivate: function deactivate(deactivateOptions) {
962
+ if (!state.active) {
963
+ return this;
964
+ }
965
+ var options = _objectSpread2({
966
+ onDeactivate: config.onDeactivate,
967
+ onPostDeactivate: config.onPostDeactivate,
968
+ checkCanReturnFocus: config.checkCanReturnFocus
969
+ }, deactivateOptions);
970
+ clearTimeout(state.delayInitialFocusTimer);
971
+ state.delayInitialFocusTimer = void 0;
972
+ removeListeners();
973
+ state.active = false;
974
+ state.paused = false;
975
+ updateObservedNodes();
976
+ activeFocusTraps.deactivateTrap(trapStack, trap);
977
+ var onDeactivate = getOption(options, "onDeactivate");
978
+ var onPostDeactivate = getOption(options, "onPostDeactivate");
979
+ var checkCanReturnFocus = getOption(options, "checkCanReturnFocus");
980
+ var returnFocus = getOption(options, "returnFocus", "returnFocusOnDeactivate");
981
+ onDeactivate === null || onDeactivate === void 0 || onDeactivate();
982
+ var finishDeactivation = function finishDeactivation2() {
983
+ delay(function() {
984
+ if (returnFocus) {
985
+ _tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
986
+ }
987
+ onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
988
+ });
989
+ };
990
+ if (returnFocus && checkCanReturnFocus) {
991
+ checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
992
+ return this;
993
+ }
994
+ finishDeactivation();
995
+ return this;
996
+ },
997
+ pause: function pause(pauseOptions) {
998
+ if (!state.active) {
999
+ return this;
1000
+ }
1001
+ state.manuallyPaused = true;
1002
+ return this._setPausedState(true, pauseOptions);
1003
+ },
1004
+ unpause: function unpause(unpauseOptions) {
1005
+ if (!state.active) {
1006
+ return this;
1007
+ }
1008
+ state.manuallyPaused = false;
1009
+ if (trapStack[trapStack.length - 1] !== this) {
1010
+ return this;
1011
+ }
1012
+ return this._setPausedState(false, unpauseOptions);
1013
+ },
1014
+ updateContainerElements: function updateContainerElements(containerElements) {
1015
+ var elementsAsArray = [].concat(containerElements).filter(Boolean);
1016
+ state.containers = elementsAsArray.map(function(element) {
1017
+ return typeof element === "string" ? doc.querySelector(element) : element;
1018
+ });
1019
+ if (state.active) {
1020
+ updateTabbableNodes();
1021
+ }
1022
+ updateObservedNodes();
1023
+ return this;
1024
+ }
1025
+ };
1026
+ Object.defineProperties(trap, {
1027
+ _isManuallyPaused: {
1028
+ value: function value() {
1029
+ return state.manuallyPaused;
1030
+ }
1031
+ },
1032
+ _setPausedState: {
1033
+ value: function value(paused, options) {
1034
+ if (state.paused === paused) {
1035
+ return this;
1036
+ }
1037
+ state.paused = paused;
1038
+ if (paused) {
1039
+ var onPause = getOption(options, "onPause");
1040
+ var onPostPause = getOption(options, "onPostPause");
1041
+ onPause === null || onPause === void 0 || onPause();
1042
+ removeListeners();
1043
+ updateObservedNodes();
1044
+ onPostPause === null || onPostPause === void 0 || onPostPause();
1045
+ } else {
1046
+ var onUnpause = getOption(options, "onUnpause");
1047
+ var onPostUnpause = getOption(options, "onPostUnpause");
1048
+ onUnpause === null || onUnpause === void 0 || onUnpause();
1049
+ updateTabbableNodes();
1050
+ addListeners();
1051
+ updateObservedNodes();
1052
+ onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
1053
+ }
1054
+ return this;
1055
+ }
1056
+ }
1057
+ });
1058
+ trap.updateContainerElements(elements);
1059
+ return trap;
1060
+ };
3
1061
  class GlobalToggle extends HTMLElement {
4
1062
  constructor() {
5
1063
  super();
6
- this.closeIconClass = "icon--close";
7
- this.menuIconClass = "icon--menu";
8
- this.searchIconClass = "icon--search";
1064
+ this.isOpen = false;
1065
+ this.closeIconClass = "mx-icon--close";
1066
+ this.menuIconClass = "mx-icon--menu";
1067
+ this.searchIconClass = "mx-icon--search";
1068
+ this.backgroundClass = "mx-background--primary";
1069
+ this.scrollLockClass = "body--scroll-lock";
1070
+ this.hideOther = true;
9
1071
  this.handleBreakpoint = ({
10
- matches
1072
+ matches: matches2
11
1073
  }) => {
12
1074
  if (!this.trigger) return;
13
1075
  const { signal } = this.controller;
14
- if (matches) {
1076
+ if (matches2) {
15
1077
  this.widget.attach();
16
1078
  this.target.setAttribute("inert", "");
17
1079
  this.trigger.addEventListener(
@@ -22,10 +1084,12 @@ class GlobalToggle extends HTMLElement {
22
1084
  } else {
23
1085
  this.widget.detach();
24
1086
  this.target.removeAttribute("inert");
1087
+ this.target.classList.remove(this.scrollLockClass);
25
1088
  this.trigger.removeEventListener(
26
1089
  "disclosure-toggle",
27
1090
  this.handleDisclosure
28
1091
  );
1092
+ this.focusTrap.deactivate();
29
1093
  }
30
1094
  };
31
1095
  this.handleDisclosure = ({ detail }) => {
@@ -33,23 +1097,22 @@ class GlobalToggle extends HTMLElement {
33
1097
  const origText = !isOpen ? "Close" : "Open";
34
1098
  const replaceText = !isOpen ? "Open" : "Close";
35
1099
  this.trigger.textContent = this.triggerText.replace(origText, replaceText);
36
- const isSearch = this.controls === "primary-search";
37
- if (isSearch) this.handleSearchDisclosure(isOpen);
1100
+ isOpen ? this.focusTrap.activate() : this.focusTrap.deactivate();
1101
+ if (isOpen && this.hideOther && this.otherTrigger) {
1102
+ if (this.otherTrigger.getAttribute("aria-expanded") === "true") {
1103
+ this.otherTrigger.click();
1104
+ }
1105
+ }
38
1106
  this.trigger.classList.toggle(
39
- isSearch ? this.searchIconClass : this.menuIconClass
1107
+ this.isSearch ? this.searchIconClass : this.menuIconClass
40
1108
  );
41
1109
  this.trigger.classList.toggle(this.closeIconClass);
1110
+ this.target.classList.toggle(this.backgroundClass);
1111
+ this.trigger.removeAttribute("no-focus");
1112
+ this.isOpen = isOpen;
42
1113
  };
43
- this.handleSearchDisclosure = (isOpen) => {
44
- if (this.hideMenu) {
45
- const menuTrigger = document.querySelector(`.${this.menuIconClass}`);
46
- menuTrigger.toggleAttribute("hidden");
47
- }
48
- if (!isOpen) {
49
- this.trigger.focus();
50
- } else {
51
- this.target.querySelector("input")?.focus();
52
- }
1114
+ this.handleKeyDown = (event) => {
1115
+ if (this.isOpen && event.key === "Escape") this.widget.handleToggle();
53
1116
  };
54
1117
  this.internals_ = this.attachInternals();
55
1118
  this.controller = new AbortController();
@@ -58,13 +1121,35 @@ class GlobalToggle extends HTMLElement {
58
1121
  connectedCallback() {
59
1122
  if (!this.trigger || !this.target) return;
60
1123
  this.target?.setAttribute("role", "region");
1124
+ const hideOther = this.trigger.getAttribute("hideOther");
1125
+ if (hideOther === "false") this.hideOther = false;
1126
+ this.isSearch = this.controls.includes("search");
1127
+ this.otherTrigger = document.querySelector(
1128
+ this.isSearch ? `.${this.menuIconClass}` : `.${this.searchIconClass}`
1129
+ );
61
1130
  this.widget = new DisclosureWidget(this.trigger, this.target);
62
1131
  this.widget.init();
1132
+ this.focusTrap = createFocusTrap(this.target, {
1133
+ escapeDeactivates: false,
1134
+ setReturnFocus: this.trigger,
1135
+ allowOutsideClick: true,
1136
+ onActivate: () => document.body.classList.add(this.scrollLockClass),
1137
+ onDeactivate: () => document.body.classList.remove(this.scrollLockClass),
1138
+ checkCanFocusTrap: ([trapContainer]) => new Promise((resolve) => {
1139
+ const interval = setInterval(() => {
1140
+ if (getComputedStyle(trapContainer).visibility !== "hidden") {
1141
+ resolve();
1142
+ clearInterval(interval);
1143
+ }
1144
+ }, 5);
1145
+ })
1146
+ });
63
1147
  const { signal } = this.controller;
64
1148
  this.handleBreakpoint(this.breakpoint);
65
1149
  this.breakpoint.addEventListener("change", this.handleBreakpoint, {
66
1150
  signal
67
1151
  });
1152
+ document.addEventListener("keydown", this.handleKeyDown, { signal });
68
1153
  }
69
1154
  disconnectedCallback() {
70
1155
  this.widget.detach();
@@ -99,5 +1184,6 @@ class GlobalToggle extends HTMLElement {
99
1184
  return window.matchMedia(this.mq);
100
1185
  }
101
1186
  }
102
- customElements.define("mx-global-toggle", GlobalToggle);
1187
+ if (!customElements.get("mx-global-toggle"))
1188
+ customElements.define("mx-global-toggle", GlobalToggle);
103
1189
  //# sourceMappingURL=header.entry.js.map