@pnx-mixtape/mxds 0.0.7 → 0.0.8
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.
- package/dist/build/accordion.css +108 -0
- package/dist/build/accordion.entry.js +139 -0
- package/dist/build/accordion.entry.js.map +1 -0
- package/dist/build/base.css +996 -0
- package/dist/build/breadcrumb.css +51 -0
- package/dist/build/button.css +132 -0
- package/dist/build/callout.css +11 -0
- package/dist/build/card.css +149 -0
- package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js +124 -0
- package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js.map +1 -0
- package/dist/build/chunks/drop-menu.entry-BC6x9vst.js +132 -0
- package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map +1 -0
- package/dist/build/chunks/keyboard-C73DHu0c.js +101 -0
- package/dist/build/chunks/keyboard-C73DHu0c.js.map +1 -0
- package/dist/build/chunks/polyfills-CJ5uTmUJ.js +749 -0
- package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +1 -0
- package/dist/build/chunks/popover-wbPSyFRj.js +654 -0
- package/dist/build/chunks/popover-wbPSyFRj.js.map +1 -0
- package/dist/build/chunks/utilities-B4YZb689.js +243 -0
- package/dist/build/chunks/utilities-B4YZb689.js.map +1 -0
- package/dist/build/constants.css +120 -0
- package/dist/build/container-grid.css +208 -0
- package/dist/build/content-block.css +36 -0
- package/dist/build/dialog.css +98 -0
- package/dist/build/dialog.entry.js +113 -0
- package/dist/build/dialog.entry.js.map +1 -0
- package/dist/build/drop-menu.css +78 -0
- package/dist/build/drop-menu.entry.js +2 -0
- package/dist/build/drop-menu.entry.js.map +1 -0
- package/dist/build/drupal.css +74 -0
- package/dist/build/footer.css +151 -0
- package/dist/build/form.css +517 -0
- package/dist/build/global-alert.css +60 -0
- package/dist/build/global-alert.entry.js +68 -0
- package/dist/build/global-alert.entry.js.map +1 -0
- package/dist/build/grid.css +200 -0
- package/dist/build/header.css +138 -0
- package/dist/build/header.entry.js +103 -0
- package/dist/build/header.entry.js.map +1 -0
- package/dist/build/hero-banner.css +62 -0
- package/dist/build/icon.css +399 -0
- package/dist/build/in-page-alert.css +94 -0
- package/dist/build/in-page-navigation.css +17 -0
- package/dist/build/in-page-navigation.entry.js +89 -0
- package/dist/build/in-page-navigation.entry.js.map +1 -0
- package/dist/build/link-list.css +72 -0
- package/dist/build/list-item.css +114 -0
- package/dist/build/masthead.css +30 -0
- package/dist/build/navigation.css +392 -0
- package/dist/build/navigation.entry.js +124 -0
- package/dist/build/navigation.entry.js.map +1 -0
- package/dist/build/page.css +80 -0
- package/dist/build/pagination.css +130 -0
- package/dist/build/section.css +163 -0
- package/dist/build/side-navigation.css +88 -0
- package/dist/build/sidebar.css +105 -0
- package/dist/build/social-links.css +20 -0
- package/dist/build/steps.css +118 -0
- package/dist/build/steps.entry.js +2 -0
- package/dist/build/steps.entry.js.map +1 -0
- package/dist/build/sticky.css +47 -0
- package/dist/build/sticky.entry.js +60 -0
- package/dist/build/sticky.entry.js.map +1 -0
- package/dist/build/tabs.css +109 -0
- package/dist/build/tabs.entry.js +202 -0
- package/dist/build/tabs.entry.js.map +1 -0
- package/dist/build/tag.css +67 -0
- package/dist/build/tiles.css +61 -0
- package/dist/build/utilities.css +178 -0
- package/package.json +2 -2
- package/src/Component/Card/Card.tsx +7 -7
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +1 -1
- package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +5 -5
- package/src/Component/Card/card.css +3 -3
- package/src/Component/ContentBlock/ContentBlock.tsx +1 -1
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +1 -1
- package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +1 -1
- package/src/Component/ListItem/list-item.css +1 -1
- package/src/Layout/Footer/Footer.stories.ts +1 -1
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dynamic Grid
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.layouts {
|
|
6
|
+
.mx-grid {
|
|
7
|
+
--grid-repeat: auto-fit;
|
|
8
|
+
--grid-min: 20ch;
|
|
9
|
+
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-columns: repeat(
|
|
12
|
+
auto-fit,
|
|
13
|
+
minmax(min(100%, 20ch), 1fr)
|
|
14
|
+
);
|
|
15
|
+
grid-template-columns: repeat(
|
|
16
|
+
var(--grid-repeat),
|
|
17
|
+
minmax(min(100%, var(--grid-min)), 1fr)
|
|
18
|
+
);
|
|
19
|
+
grid-template-rows: 1fr;
|
|
20
|
+
grid-gap: var(--grid-gap, var(--gap));
|
|
21
|
+
gap: var(--grid-gap, var(--gap));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@media (min-width: 946px) {
|
|
25
|
+
.mx-grid {
|
|
26
|
+
--grid-gap: var(--gap-l);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.mx-grid:is(ul, ol) {
|
|
31
|
+
list-style: none;
|
|
32
|
+
padding-inline-start: unset;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[class*="mx-grid--cols-"] {
|
|
36
|
+
--grid-repeat: 1;
|
|
37
|
+
}
|
|
38
|
+
@media (min-width: 420px) {
|
|
39
|
+
|
|
40
|
+
.mx-grid--cols-xs-2 {
|
|
41
|
+
--grid-repeat: 2;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
@media (min-width: 540px) {
|
|
45
|
+
|
|
46
|
+
.mx-grid--cols-sm-2 {
|
|
47
|
+
--grid-repeat: 2;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
@media (min-width: 720px) {
|
|
51
|
+
|
|
52
|
+
.mx-grid--cols-md-2 {
|
|
53
|
+
--grid-repeat: 2;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
@media (min-width: 946px) {
|
|
57
|
+
|
|
58
|
+
.mx-grid--cols-lg-2 {
|
|
59
|
+
--grid-repeat: 2;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
@media (min-width: 1100px) {
|
|
63
|
+
|
|
64
|
+
.mx-grid--cols-xl-2 {
|
|
65
|
+
--grid-repeat: 2;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
@media (min-width: 720px) {
|
|
69
|
+
|
|
70
|
+
.mx-grid--cols-md-3 {
|
|
71
|
+
--grid-repeat: 3;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
@media (min-width: 946px) {
|
|
75
|
+
|
|
76
|
+
.mx-grid--cols-lg-3 {
|
|
77
|
+
--grid-repeat: 3;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
@media (min-width: 1100px) {
|
|
81
|
+
|
|
82
|
+
.mx-grid--cols-xl-3 {
|
|
83
|
+
--grid-repeat: 3;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
@media (min-width: 720px) {
|
|
87
|
+
|
|
88
|
+
.mx-grid--cols-md-4 {
|
|
89
|
+
--grid-repeat: 4;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
@media (min-width: 946px) {
|
|
93
|
+
|
|
94
|
+
.mx-grid--cols-lg-4 {
|
|
95
|
+
--grid-repeat: 4;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
@media (min-width: 1100px) {
|
|
99
|
+
|
|
100
|
+
.mx-grid--cols-xl-4 {
|
|
101
|
+
--grid-repeat: 4;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.mx-grid--collapse {
|
|
106
|
+
--grid-gap: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.mx-grid--collapse-cols {
|
|
110
|
+
grid-column-gap: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.mx-grid--collapse-rows {
|
|
114
|
+
grid-row-gap: 0;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Grid items.
|
|
120
|
+
*/
|
|
121
|
+
@layer design-system.layouts {
|
|
122
|
+
[class*="mx-grid-item__span-"] {
|
|
123
|
+
grid-column: auto / auto;
|
|
124
|
+
grid-column: auto / var(--grid-span, auto);
|
|
125
|
+
}
|
|
126
|
+
@media (min-width: 420px) {
|
|
127
|
+
|
|
128
|
+
.mx-grid-item__span-xs-2 {
|
|
129
|
+
--grid-span: span 2;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
@media (min-width: 540px) {
|
|
133
|
+
|
|
134
|
+
.mx-grid-item__span-sm-2 {
|
|
135
|
+
--grid-span: span 2;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
@media (min-width: 720px) {
|
|
139
|
+
|
|
140
|
+
.mx-grid-item__span-md-2 {
|
|
141
|
+
--grid-span: span 2;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
@media (min-width: 946px) {
|
|
145
|
+
|
|
146
|
+
.mx-grid-item__span-lg-2 {
|
|
147
|
+
--grid-span: span 2;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
@media (min-width: 1100px) {
|
|
151
|
+
|
|
152
|
+
.mx-grid-item__span-xl-2 {
|
|
153
|
+
--grid-span: span 2;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
@media (min-width: 720px) {
|
|
157
|
+
|
|
158
|
+
.mx-grid-item__span-md-3 {
|
|
159
|
+
--grid-span: span 3;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
@media (min-width: 946px) {
|
|
163
|
+
|
|
164
|
+
.mx-grid-item__span-lg-3 {
|
|
165
|
+
--grid-span: span 3;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
@media (min-width: 1100px) {
|
|
169
|
+
|
|
170
|
+
.mx-grid-item__span-xl-3 {
|
|
171
|
+
--grid-span: span 3;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
@media (min-width: 720px) {
|
|
175
|
+
|
|
176
|
+
.mx-grid-item__span-md-4 {
|
|
177
|
+
--grid-span: span 4;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
@media (min-width: 946px) {
|
|
181
|
+
|
|
182
|
+
.mx-grid-item__span-lg-4 {
|
|
183
|
+
--grid-span: span 4;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
@media (min-width: 1100px) {
|
|
187
|
+
|
|
188
|
+
.mx-grid-item__span-xl-4 {
|
|
189
|
+
--grid-span: span 4;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@media print {
|
|
195
|
+
.mx-grid {
|
|
196
|
+
display: block;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdyaWQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSx1QkFBdUI7SUFDdkIsZ0JBQWdCOztJQUVoQixhQUFhO0lBQ2I7OztLQUdDO0lBSEQ7OztLQUdDO0lBQ0QsdUJBQXVCO0lBQ3ZCLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUFVbEM7O0lBUkU7RUFaRjtNQWFJLHdCQUF3QjtFQU81QjtJQU5FOztJQUVBO01BQ0UsZ0JBQWdCO01BQ2hCLDJCQUEyQjtJQUM3Qjs7RUFHRjtJQUNFLGdCQUFnQjtFQUNsQjtJQUdFOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFOztFQUdGO0lBQ0UsYUFBYTtFQUNmOztFQUVBO0lBQ0Usa0JBQWtCO0VBQ3BCOztFQUVBO0lBQ0UsZUFBZTtFQUNqQjtBQUNGOztBQUVBOztFQUVFO0FBQ0Y7RUFDRTtJQUNFLHdCQUEwQztJQUExQywwQ0FBMEM7RUFDNUM7SUFHRTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtBQUVKOztBQUVBO0VBQ0U7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoiZ3JpZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIER5bmFtaWMgR3JpZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtZ3JpZCB7XG4gICAgLS1ncmlkLXJlcGVhdDogYXV0by1maXQ7XG4gICAgLS1ncmlkLW1pbjogMjBjaDtcblxuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoXG4gICAgICB2YXIoLS1ncmlkLXJlcGVhdCksXG4gICAgICBtaW5tYXgobWluKDEwMCUsIHZhcigtLWdyaWQtbWluKSksIDFmcilcbiAgICApO1xuICAgIGdyaWQtdGVtcGxhdGUtcm93czogMWZyO1xuICAgIGdhcDogdmFyKC0tZ3JpZC1nYXAsIHZhcigtLWdhcCkpO1xuXG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtZ2FwOiB2YXIoLS1nYXAtbCk7XG4gICAgfVxuXG4gICAgJjppcyh1bCwgb2wpIHtcbiAgICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdW5zZXQ7XG4gICAgfVxuICB9XG5cbiAgW2NsYXNzKj1cIm14LWdyaWQtLWNvbHMtXCJdIHtcbiAgICAtLWdyaWQtcmVwZWF0OiAxO1xuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMteHMtMiB7XG4gICAgQG1lZGlhICgtLXgtc21hbGwtdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtc20tMiB7XG4gICAgQG1lZGlhICgtLXNtYWxsLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTIge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctMiB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTIge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTMge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDM7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctMyB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTMge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTQge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctNCB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTQge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xsYXBzZSB7XG4gICAgLS1ncmlkLWdhcDogMDtcbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xsYXBzZS1jb2xzIHtcbiAgICBncmlkLWNvbHVtbi1nYXA6IDA7XG4gIH1cblxuICAubXgtZ3JpZC0tY29sbGFwc2Utcm93cyB7XG4gICAgZ3JpZC1yb3ctZ2FwOiAwO1xuICB9XG59XG5cbi8qKlxuICogR3JpZCBpdGVtcy5cbiAqL1xuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIFtjbGFzcyo9XCJteC1ncmlkLWl0ZW1fX3NwYW4tXCJdIHtcbiAgICBncmlkLWNvbHVtbjogYXV0byAvIHZhcigtLWdyaWQtc3BhbiwgYXV0byk7XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLXhzLTIge1xuICAgIEBtZWRpYSAoLS14LXNtYWxsLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tc20tMiB7XG4gICAgQG1lZGlhICgtLXNtYWxsLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbWQtMiB7XG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gMjtcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLWxnLTIge1xuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gMjtcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLXhsLTIge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbWQtMyB7XG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gMztcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLWxnLTMge1xuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gMztcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLXhsLTMge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbWQtNCB7XG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gNDtcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLWxnLTQge1xuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgLS1ncmlkLXNwYW46IHNwYW4gNDtcbiAgICB9XG4gIH1cblxuICAubXgtZ3JpZC1pdGVtX19zcGFuLXhsLTQge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiA0O1xuICAgIH1cbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtZ3JpZCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global Header
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.layouts {
|
|
6
|
+
.mx-header__toggles {
|
|
7
|
+
display: flex;
|
|
8
|
+
gap: var(--toggle-gap, var(--spacing-xs));
|
|
9
|
+
padding-inline-end: 0.125rem;
|
|
10
|
+
position: relative;
|
|
11
|
+
z-index: 1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@media (min-width: 720px) {
|
|
15
|
+
.mx-header__toggles {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mx-header__toggles .mx-button--secondary {
|
|
21
|
+
border-color: transparent;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.mx-header__toggles [hidden] {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
@media (max-width: 719.98px) {
|
|
28
|
+
|
|
29
|
+
.global-nav-up-only {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Primary Header
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
@layer design-system.layouts {
|
|
40
|
+
.mx-header__inner {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: 1fr auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.mx-header__brand {
|
|
47
|
+
display: flex;
|
|
48
|
+
gap: var(--brand-gap, var(--gap));
|
|
49
|
+
align-items: center;
|
|
50
|
+
margin-inline-end: auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.mx-header__name {
|
|
54
|
+
display: grid;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mx-header__main {
|
|
58
|
+
display: flex;
|
|
59
|
+
gap: var(--main-gap, var(--gap));
|
|
60
|
+
align-items: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.mx-header__nav {
|
|
64
|
+
inline-size: 100%;
|
|
65
|
+
transition:
|
|
66
|
+
0.2s opacity var(--ease),
|
|
67
|
+
0.2s visibility var(--ease);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (min-width: 720px) {
|
|
71
|
+
|
|
72
|
+
.mx-header__nav {
|
|
73
|
+
z-index: 2;
|
|
74
|
+
position: relative;
|
|
75
|
+
inline-size: auto;
|
|
76
|
+
block-size: auto;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.mx-header__nav[inert] {
|
|
81
|
+
block-size: 0;
|
|
82
|
+
opacity: 0;
|
|
83
|
+
visibility: hidden;
|
|
84
|
+
transition:
|
|
85
|
+
0.2s opacity var(--ease),
|
|
86
|
+
0.2s visibility var(--ease);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.mx-header__search {
|
|
90
|
+
position: absolute;
|
|
91
|
+
inset-block-start: 2px;
|
|
92
|
+
inset-inline-start: 0;
|
|
93
|
+
inline-size: 100%;
|
|
94
|
+
transition:
|
|
95
|
+
0.2s opacity var(--ease),
|
|
96
|
+
0.2s visibility var(--ease);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (min-width: 720px) {
|
|
100
|
+
|
|
101
|
+
.mx-header__search {
|
|
102
|
+
display: flex;
|
|
103
|
+
position: relative;
|
|
104
|
+
inline-size: auto;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.mx-header__search[inert] {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
visibility: hidden;
|
|
111
|
+
transition:
|
|
112
|
+
0.2s opacity var(--ease),
|
|
113
|
+
0.2s visibility var(--ease);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.mx-header__search input {
|
|
117
|
+
max-inline-size: 150px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Primary Header Stacked
|
|
122
|
+
*/
|
|
123
|
+
.mx-header__nav-inner {
|
|
124
|
+
display: flex;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.mx-header__nav-right {
|
|
128
|
+
margin-inline-start: auto;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@media print {
|
|
133
|
+
.mx-header .mx-header__nav {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYiwrQkFBK0I7RUFDakM7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsaUNBQWlDO0lBQ2pDLG1CQUFtQjtJQUNuQix1QkFBdUI7RUFDekI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsZ0NBQWdDO0lBQ2hDLG1CQUFtQjtFQUNyQjs7RUFFQTtJQUNFLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBaUIvQjs7SUFmRTs7RUFORjtNQU9JLFVBQVU7TUFDVixrQkFBa0I7TUFDbEIsaUJBQWlCO01BQ2pCLGdCQUFnQjtFQVdwQjtJQVZFOztJQUVBO01BQ0UsYUFBYTtNQUNiLFVBQVU7TUFDVixrQkFBa0I7TUFDbEI7O21DQUU2QjtJQUMvQjs7RUFHRjtJQUNFLGtCQUFrQjtJQUNsQixzQkFBc0I7SUFDdEIscUJBQXFCO0lBQ3JCLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBbUIvQjs7SUFqQkU7O0VBVEY7TUFVSSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLGlCQUFpQjtFQWNyQjtJQWJFOztJQUVBO01BQ0UsVUFBVTtNQUNWLGtCQUFrQjtNQUNsQjs7bUNBRTZCO0lBQy9COztJQUVBO01BQ0Usc0JBQXNCO0lBQ3hCOztFQUdGOztJQUVFO0VBQ0Y7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoiaGVhZGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2xvYmFsIEhlYWRlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtaGVhZGVyX190b2dnbGVzIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tdG9nZ2xlLWdhcCwgdmFyKC0tc3BhY2luZy14cykpO1xuICAgIHBhZGRpbmctaW5saW5lLWVuZDogMnB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuXG4gICAgJiAubXgtYnV0dG9uLS1zZWNvbmRhcnkge1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmIFtoaWRkZW5dIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLmdsb2JhbC1uYXYtdXAtb25seSB7XG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtZG93bikge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogUHJpbWFyeSBIZWFkZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWhlYWRlcl9faW5uZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyIGF1dG87XG4gIH1cblxuICAubXgtaGVhZGVyX19icmFuZCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWJyYW5kLWdhcCwgdmFyKC0tZ2FwKSk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hbWUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gIH1cblxuICAubXgtaGVhZGVyX19tYWluIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tbWFpbi1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgei1pbmRleDogMjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgICAgYmxvY2stc2l6ZTogYXV0bztcbiAgICB9XG5cbiAgICAmW2luZXJ0XSB7XG4gICAgICBibG9jay1zaXplOiAwO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgICAgMC4ycyB2aXNpYmlsaXR5IHZhcigtLWVhc2UpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZWFkZXJfX3NlYXJjaCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGluc2V0LWJsb2NrLXN0YXJ0OiAycHg7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgICB0cmFuc2l0aW9uOlxuICAgICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcbiAgICB9XG5cbiAgICAmIGlucHV0IHtcbiAgICAgIG1heC1pbmxpbmUtc2l6ZTogMTUwcHg7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFByaW1hcnkgSGVhZGVyIFN0YWNrZWRcbiAgICovXG4gIC5teC1oZWFkZXJfX25hdi1pbm5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hdi1yaWdodCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtaGVhZGVyIC5teC1oZWFkZXJfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { D as DisclosureWidget } from "./chunks/disclosure-widget-CQLPJ8Ta.js";
|
|
2
|
+
import "./chunks/utilities-B4YZb689.js";
|
|
3
|
+
class GlobalToggle extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super();
|
|
6
|
+
this.closeIconClass = "icon--close";
|
|
7
|
+
this.menuIconClass = "icon--menu";
|
|
8
|
+
this.searchIconClass = "icon--search";
|
|
9
|
+
this.handleBreakpoint = ({
|
|
10
|
+
matches
|
|
11
|
+
}) => {
|
|
12
|
+
if (!this.trigger) return;
|
|
13
|
+
const { signal } = this.controller;
|
|
14
|
+
if (matches) {
|
|
15
|
+
this.widget.attach();
|
|
16
|
+
this.target.setAttribute("inert", "");
|
|
17
|
+
this.trigger.addEventListener(
|
|
18
|
+
"disclosure-toggle",
|
|
19
|
+
this.handleDisclosure,
|
|
20
|
+
{ signal }
|
|
21
|
+
);
|
|
22
|
+
} else {
|
|
23
|
+
this.widget.detach();
|
|
24
|
+
this.target.removeAttribute("inert");
|
|
25
|
+
this.trigger.removeEventListener(
|
|
26
|
+
"disclosure-toggle",
|
|
27
|
+
this.handleDisclosure
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
this.handleDisclosure = ({ detail }) => {
|
|
32
|
+
const { isOpen } = detail;
|
|
33
|
+
const origText = !isOpen ? "Close" : "Open";
|
|
34
|
+
const replaceText = !isOpen ? "Open" : "Close";
|
|
35
|
+
this.trigger.textContent = this.triggerText.replace(origText, replaceText);
|
|
36
|
+
const isSearch = this.controls === "primary-search";
|
|
37
|
+
if (isSearch) this.handleSearchDisclosure(isOpen);
|
|
38
|
+
this.trigger.classList.toggle(
|
|
39
|
+
isSearch ? this.searchIconClass : this.menuIconClass
|
|
40
|
+
);
|
|
41
|
+
this.trigger.classList.toggle(this.closeIconClass);
|
|
42
|
+
};
|
|
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
|
+
}
|
|
53
|
+
};
|
|
54
|
+
this.internals_ = this.attachInternals();
|
|
55
|
+
this.controller = new AbortController();
|
|
56
|
+
this.mq = this.getAttribute("mq") || "(max-width: 720px)";
|
|
57
|
+
}
|
|
58
|
+
connectedCallback() {
|
|
59
|
+
if (!this.trigger || !this.target) return;
|
|
60
|
+
this.target?.setAttribute("role", "region");
|
|
61
|
+
this.widget = new DisclosureWidget(this.trigger, this.target);
|
|
62
|
+
this.widget.init();
|
|
63
|
+
const { signal } = this.controller;
|
|
64
|
+
this.handleBreakpoint(this.breakpoint);
|
|
65
|
+
this.breakpoint.addEventListener("change", this.handleBreakpoint, {
|
|
66
|
+
signal
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
disconnectedCallback() {
|
|
70
|
+
this.widget.detach();
|
|
71
|
+
this.controller.abort();
|
|
72
|
+
}
|
|
73
|
+
get trigger() {
|
|
74
|
+
const trigger = this.querySelector(":scope > button");
|
|
75
|
+
const controls = trigger.getAttribute("aria-controls");
|
|
76
|
+
if (!trigger || !controls) {
|
|
77
|
+
throw new Error(
|
|
78
|
+
`${this.localName} must contain a <button aria-controls="element-to-trigger"> element.`
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
trigger.removeAttribute("disabled");
|
|
82
|
+
this.controls = controls;
|
|
83
|
+
this.triggerText = trigger.textContent;
|
|
84
|
+
return trigger;
|
|
85
|
+
}
|
|
86
|
+
get target() {
|
|
87
|
+
const target = document.querySelector(
|
|
88
|
+
`div[id="${this.controls}"]`
|
|
89
|
+
);
|
|
90
|
+
if (!target) {
|
|
91
|
+
throw new Error(
|
|
92
|
+
`${this.localName} must contain a target <div id="${this.controls}">.`
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
target.classList.remove("global-nav-up-only");
|
|
96
|
+
return target;
|
|
97
|
+
}
|
|
98
|
+
get breakpoint() {
|
|
99
|
+
return window.matchMedia(this.mq);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
customElements.define("mx-global-toggle", GlobalToggle);
|
|
103
|
+
//# sourceMappingURL=header.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.entry.js","sources":["../../src/Layout/Header/Elements/GlobalToggle.ts"],"sourcesContent":["/**\n * Header\n * @file Handle accessible trigger of menus on small screens.\n */\n\nimport {\n DisclosureWidget,\n DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\nexport default class GlobalToggle extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n widget!: DisclosureWidget\n controls?: string\n mq: string\n triggerText: string\n closeIconClass: string = \"icon--close\"\n menuIconClass: string = \"icon--menu\"\n searchIconClass: string = \"icon--search\"\n hideMenu: boolean\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n }\n\n connectedCallback(): void {\n if (!this.trigger || !this.target) return\n\n this.target?.setAttribute(\"role\", \"region\")\n this.widget = new DisclosureWidget(this.trigger, this.target)\n this.widget.init()\n const { signal }: AbortController = this.controller\n this.handleBreakpoint(this.breakpoint)\n this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n signal,\n })\n }\n\n disconnectedCallback(): void {\n this.widget.detach()\n this.controller.abort()\n }\n\n handleBreakpoint = ({\n matches,\n }: MediaQueryList | MediaQueryListEvent): void => {\n if (!this.trigger) return\n const { signal }: AbortController = this.controller\n if (matches) {\n this.widget.attach()\n this.target.setAttribute(\"inert\", \"\")\n this.trigger.addEventListener(\n \"disclosure-toggle\",\n this.handleDisclosure,\n { signal },\n )\n } else {\n this.widget.detach()\n this.target.removeAttribute(\"inert\")\n this.trigger.removeEventListener(\n \"disclosure-toggle\",\n this.handleDisclosure,\n )\n }\n }\n\n handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n const { isOpen } = detail\n // Toggle toggle text.\n const origText = !isOpen ? \"Close\" : \"Open\"\n const replaceText = !isOpen ? \"Open\" : \"Close\"\n this.trigger.textContent = this.triggerText.replace(origText, replaceText)\n\n // Search is a little different.\n const isSearch = this.controls === \"primary-search\"\n if (isSearch) this.handleSearchDisclosure(isOpen)\n\n // Toggle trigger classes.\n this.trigger.classList.toggle(\n isSearch ? this.searchIconClass : this.menuIconClass,\n )\n this.trigger.classList.toggle(this.closeIconClass)\n }\n\n handleSearchDisclosure = (isOpen?: boolean): void => {\n if (this.hideMenu) {\n // Search trigger should hide the menu trigger.\n const menuTrigger = document.querySelector(`.${this.menuIconClass}`)\n menuTrigger.toggleAttribute(\"hidden\")\n }\n // Shift focus between search input and trigger.\n if (!isOpen) {\n this.trigger.focus()\n } else {\n this.target.querySelector(\"input\")?.focus()\n }\n }\n\n get trigger(): HTMLButtonElement {\n const trigger: HTMLButtonElement | null =\n this.querySelector(\":scope > button\")\n const controls = trigger.getAttribute(\"aria-controls\")\n if (!trigger || !controls) {\n throw new Error(\n `${this.localName} must contain a <button aria-controls=\"element-to-trigger\"> element.`,\n )\n }\n trigger.removeAttribute(\"disabled\")\n this.controls = controls\n this.triggerText = trigger.textContent\n return trigger\n }\n\n get target(): HTMLDivElement {\n const target: HTMLDivElement | null = document.querySelector(\n `div[id=\"${this.controls}\"]`,\n )\n if (!target) {\n throw new Error(\n `${this.localName} must contain a target <div id=\"${this.controls}\">.`,\n )\n }\n target.classList.remove(\"global-nav-up-only\")\n return target\n }\n\n get breakpoint(): MediaQueryList {\n return window.matchMedia(this.mq)\n }\n}\n\ncustomElements.define(\"mx-global-toggle\", GlobalToggle)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-trigger\": GlobalToggle\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Page Title
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.components {
|
|
6
|
+
.mx-hero-banner {
|
|
7
|
+
position: relative;
|
|
8
|
+
z-index: 1;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.mx-hero-banner.mx-hero-banner--hero {
|
|
12
|
+
min-block-size: 400px;
|
|
13
|
+
min-block-size: var(--hero-height, 400px);
|
|
14
|
+
align-content: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
place-content: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.mx-hero-banner :is(h1, h2, p) {
|
|
20
|
+
max-inline-size: var(--container-max-width-narrow);
|
|
21
|
+
text-wrap: balance;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.mx-hero-banner__inner {
|
|
25
|
+
display: grid;
|
|
26
|
+
grid-template-areas: "content" "aside";
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (min-width: 946px) {
|
|
30
|
+
|
|
31
|
+
.mx-hero-banner__inner {
|
|
32
|
+
grid-template-areas: "content aside";
|
|
33
|
+
grid-template-columns: 50% 50%;
|
|
34
|
+
grid-template-columns: var(--hero-columns, 50% 50%);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mx-hero-banner__content {
|
|
39
|
+
align-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.mx-hero-banner__aside {
|
|
43
|
+
align-content: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.mx-hero-banner__aside.mx-hero-banner__aside-image {
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
position: relative;
|
|
49
|
+
border-radius: var(--hero-image-radius, var(--border-radius));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mx-hero-banner__aside img {
|
|
53
|
+
inline-size: 100%;
|
|
54
|
+
block-size: 100%;
|
|
55
|
+
-o-object-fit: cover;
|
|
56
|
+
object-fit: cover;
|
|
57
|
+
-o-object-position: center;
|
|
58
|
+
object-position: center;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhlcm8tYmFubmVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLFVBQVU7RUFXWjs7SUFURTtNQUNFLHFCQUF5QztNQUF6Qyx5Q0FBeUM7TUFDekMscUJBQXFCO01BQXJCLHVCQUFxQjtNQUFyQixxQkFBcUI7SUFDdkI7O0lBRUE7TUFDRSxrREFBa0Q7TUFDbEQsa0JBQWtCO0lBQ3BCOztFQUdGO0lBQ0UsYUFBYTtJQUNiLHNDQUFzQztFQU14Qzs7SUFKRTs7RUFKRjtNQUtJLG9DQUFvQztNQUNwQyw4QkFBbUQ7TUFBbkQsbURBQW1EO0VBRXZEO0lBREU7O0VBR0Y7SUFDRSxxQkFBcUI7RUFDdkI7O0VBRUE7SUFDRSxxQkFBcUI7RUFjdkI7O0lBWkU7TUFDRSxnQkFBZ0I7TUFDaEIsa0JBQWtCO01BQ2xCLDZEQUE2RDtJQUMvRDs7SUFFQTtNQUNFLGlCQUFpQjtNQUNqQixnQkFBZ0I7TUFDaEIsb0JBQWlCO1NBQWpCLGlCQUFpQjtNQUNqQiwwQkFBdUI7U0FBdkIsdUJBQXVCO0lBQ3pCO0FBRUoiLCJmaWxlIjoiaGVyby1iYW5uZXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBQYWdlIFRpdGxlXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1oZXJvLWJhbm5lciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHotaW5kZXg6IDE7XG5cbiAgICAmLm14LWhlcm8tYmFubmVyLS1oZXJvIHtcbiAgICAgIG1pbi1ibG9jay1zaXplOiB2YXIoLS1oZXJvLWhlaWdodCwgNDAwcHgpO1xuICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgIH1cblxuICAgICYgOmlzKGgxLCBoMiwgcCkge1xuICAgICAgbWF4LWlubGluZS1zaXplOiB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoLW5hcnJvdyk7XG4gICAgICB0ZXh0LXdyYXA6IGJhbGFuY2U7XG4gICAgfVxuICB9XG5cbiAgLm14LWhlcm8tYmFubmVyX19pbm5lciB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcImNvbnRlbnRcIiBcImFzaWRlXCI7XG5cbiAgICBAbWVkaWEgKC0tbGFyZ2UtdXApIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBhc2lkZVwiO1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiB2YXIoLS1oZXJvLWNvbHVtbnMsIDUwJSA1MCUpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZXJvLWJhbm5lcl9fY29udGVudCB7XG4gICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWhlcm8tYmFubmVyX19hc2lkZSB7XG4gICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuXG4gICAgJi5teC1oZXJvLWJhbm5lcl9fYXNpZGUtaW1hZ2Uge1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWhlcm8taW1hZ2UtcmFkaXVzLCB2YXIoLS1ib3JkZXItcmFkaXVzKSk7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgICBibG9jay1zaXplOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICBvYmplY3QtcG9zaXRpb246IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
|