@pnx-mixtape/mxds 0.0.15 → 0.0.17
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 +113 -1
- package/dist/build/accordion.entry.js +83 -1
- package/dist/build/accordion.entry.js.map +1 -0
- package/dist/build/base.css +1012 -1
- package/dist/build/breadcrumb.css +55 -1
- package/dist/build/button.css +127 -1
- package/dist/build/callout.css +11 -1
- package/dist/build/card.css +160 -1
- package/dist/build/carousel.css +125 -1
- package/dist/build/chunks/Accordion-O-huO4At.js +61 -0
- package/dist/build/chunks/Accordion-O-huO4At.js.map +1 -0
- package/dist/build/chunks/disclosure-widget-CtNx0f8p.js +124 -0
- package/dist/build/chunks/disclosure-widget-CtNx0f8p.js.map +1 -0
- package/dist/build/chunks/drop-menu.entry-BEhZ_Je3.js +132 -0
- package/dist/build/chunks/drop-menu.entry-BEhZ_Je3.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-DoxMZOqh.js +806 -0
- package/dist/build/chunks/polyfills-DoxMZOqh.js.map +1 -0
- package/dist/build/chunks/popover-DzUcnIlX.js +797 -0
- package/dist/build/chunks/popover-DzUcnIlX.js.map +1 -0
- package/dist/build/chunks/utilities-DXELy_An.js +245 -0
- package/dist/build/chunks/utilities-DXELy_An.js.map +1 -0
- package/dist/build/constants.css +151 -1
- package/dist/build/container-grid.css +186 -1
- package/dist/build/content-block.css +36 -1
- package/dist/build/dialog.css +116 -1
- package/dist/build/dialog.entry.js +93 -1
- package/dist/build/dialog.entry.js.map +1 -0
- package/dist/build/drop-menu.css +89 -1
- package/dist/build/drop-menu.entry.js +2 -1
- package/dist/build/drop-menu.entry.js.map +1 -0
- package/dist/build/drupal.css +70 -1
- package/dist/build/filters.css +117 -1
- package/dist/build/filters.entry.js +138 -1
- package/dist/build/filters.entry.js.map +1 -0
- package/dist/build/footer.css +141 -1
- package/dist/build/form.css +505 -1
- package/dist/build/global-alert.css +60 -1
- package/dist/build/global-alert.entry.js +68 -1
- package/dist/build/global-alert.entry.js.map +1 -0
- package/dist/build/grid.css +201 -1
- package/dist/build/header.css +161 -1
- package/dist/build/header.entry.js +103 -1
- package/dist/build/header.entry.js.map +1 -0
- package/dist/build/hero-banner.css +67 -1
- package/dist/build/icon.css +399 -1
- package/dist/build/in-page-alert.css +93 -1
- package/dist/build/in-page-navigation.css +17 -1
- package/dist/build/in-page-navigation.entry.js +99 -1
- package/dist/build/in-page-navigation.entry.js.map +1 -0
- package/dist/build/link-list.css +45 -1
- package/dist/build/list-item.css +29 -1
- package/dist/build/masthead.css +53 -1
- package/dist/build/navigation.css +391 -1
- package/dist/build/navigation.entry.js +124 -1
- package/dist/build/navigation.entry.js.map +1 -0
- package/dist/build/page.css +65 -1
- package/dist/build/pagination.css +117 -1
- package/dist/build/results-bar.css +21 -1
- package/dist/build/section.css +147 -1
- package/dist/build/side-navigation.css +85 -1
- package/dist/build/sidebar.css +53 -1
- package/dist/build/social-links.css +20 -1
- package/dist/build/steps.css +118 -1
- package/dist/build/sticky.css +47 -1
- package/dist/build/sticky.entry.js +60 -1
- package/dist/build/sticky.entry.js.map +1 -0
- package/dist/build/tabs.css +108 -1
- package/dist/build/tabs.entry.js +202 -1
- package/dist/build/tabs.entry.js.map +1 -0
- package/dist/build/tag.css +70 -1
- package/dist/build/utilities.css +178 -1
- package/package.json +11 -4
- package/src/Component/Card/Card.stories.ts +1 -1
- package/src/Component/Carousel/Carousel.stories.ts +1 -1
- package/src/Component/DropMenu/drop-menu.css +1 -1
- package/src/Component/ListItem/ListItem.stories.ts +1 -1
- package/src/Component/Tag/Tag.stories.ts +3 -3
- package/src/Component/Tag/tags.twig +2 -2
- package/src/Layout/Section/Section.stories.ts +2 -1
- package/src/Layout/Section/section.twig +3 -1
- package/dist/build/chunks/Accordion-RtUfbsTy.js +0 -1
- package/dist/build/chunks/disclosure-widget-CPdkUWkq.js +0 -1
- package/dist/build/chunks/drop-menu.entry-BqBzLfVC.js +0 -1
- package/dist/build/chunks/keyboard-Cs0cduxq.js +0 -1
- package/dist/build/chunks/polyfills-5KNOJw2W.js +0 -1
- package/dist/build/chunks/popover-CiVl-0jk.js +0 -1
- package/dist/build/chunks/utilities-CE6xwgqF.js +0 -2
|
@@ -1 +1,55 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Breadcrumb Navigation
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.components {
|
|
6
|
+
.mx-nav--breadcrumbs {
|
|
7
|
+
--nav-font-size: var(--font-size-s);
|
|
8
|
+
|
|
9
|
+
position: relative;
|
|
10
|
+
z-index: 1;
|
|
11
|
+
overflow: auto;
|
|
12
|
+
white-space: nowrap;
|
|
13
|
+
padding-inline: var(--outline-size);
|
|
14
|
+
padding-block: var(--outline-size);
|
|
15
|
+
margin-inline: calc(var(--outline-size) * -1);
|
|
16
|
+
margin-block: calc(var(--outline-size) * -1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.mx-nav--breadcrumbs > ul {
|
|
20
|
+
gap: var(--breadcrumb-gap, var(--spacing-xxxxs));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.mx-nav--breadcrumbs > ul > li {
|
|
24
|
+
color: var(
|
|
25
|
+
--breadcrumb-foreground,
|
|
26
|
+
var(--foreground, var(--colour-foreground-alt))
|
|
27
|
+
);
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:is(.mx-nav--breadcrumbs > ul > li):where(:not(:last-child))::after {
|
|
33
|
+
content: "";
|
|
34
|
+
display: block;
|
|
35
|
+
vertical-align: middle;
|
|
36
|
+
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
|
|
37
|
+
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
|
|
38
|
+
-webkit-mask-position: center;
|
|
39
|
+
mask-position: center;
|
|
40
|
+
-webkit-mask-repeat: no-repeat;
|
|
41
|
+
mask-repeat: no-repeat;
|
|
42
|
+
block-size: var(--spacing-m);
|
|
43
|
+
inline-size: var(--spacing-m);
|
|
44
|
+
background-color: currentcolor;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.mx-nav--breadcrumbs [aria-current="page"] {
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
}
|
|
50
|
+
:is([dir="rtl"] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs) > ul > li::after {
|
|
51
|
+
transform: rotate(180deg);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJyZWFkY3J1bWIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxtQ0FBbUM7O0lBRW5DLGtCQUFrQjtJQUNsQixVQUFVO0lBQ1YsY0FBYztJQUNkLG1CQUFtQjtJQUNuQixtQ0FBbUM7SUFDbkMsa0NBQWtDO0lBQ2xDLDZDQUE2QztJQUM3Qyw0Q0FBNEM7RUE4QjlDOztJQTVCRTtNQUNFLGdEQUFnRDtJQUNsRDs7SUFFQTtNQUNFOzs7T0FHQztNQUNELGFBQWE7TUFDYixtQkFBbUI7SUFhckI7O01BWEU7UUFDRSxXQUFXO1FBQ1gsY0FBYztRQUNkLHNCQUFzQjtRQUN0Qiw2TEFBZ0U7Z0JBQWhFLHFMQUFnRTtRQUNoRSw2QkFBcUI7Z0JBQXJCLHFCQUFxQjtRQUNyQiw4QkFBc0I7Z0JBQXRCLHNCQUFzQjtRQUN0Qiw0QkFBNEI7UUFDNUIsNkJBQTZCO1FBQzdCLDhCQUE4QjtNQUNoQzs7SUFHRjtNQUNFLG9CQUFvQjtJQUN0QjtJQUtBO01BQ0UseUJBQXlCO0lBQzNCO0FBRUoiLCJmaWxlIjoiYnJlYWRjcnVtYi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJyZWFkY3J1bWIgTmF2aWdhdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtbmF2LS1icmVhZGNydW1icyB7XG4gICAgLS1uYXYtZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG5cbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgei1pbmRleDogMTtcbiAgICBvdmVyZmxvdzogYXV0bztcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1vdXRsaW5lLXNpemUpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLW91dGxpbmUtc2l6ZSk7XG4gICAgbWFyZ2luLWlubGluZTogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuICAgIG1hcmdpbi1ibG9jazogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuXG4gICAgJiA+IHVsIHtcbiAgICAgIGdhcDogdmFyKC0tYnJlYWRjcnVtYi1nYXAsIHZhcigtLXNwYWNpbmcteHh4eHMpKTtcbiAgICB9XG5cbiAgICAmID4gdWwgPiBsaSB7XG4gICAgICBjb2xvcjogdmFyKFxuICAgICAgICAtLWJyZWFkY3J1bWItZm9yZWdyb3VuZCxcbiAgICAgICAgdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQtYWx0KSlcbiAgICAgICk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgJjp3aGVyZSg6bm90KDpsYXN0LWNoaWxkKSk6OmFmdGVyIHtcbiAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgIG1hc2staW1hZ2U6IHN2Zy1sb2FkKFwiLi4vLi4vQXRvbS9JY29uL2ltYWdlcy9jaGV2cm9uLXJpZ2h0LnN2Z1wiKTtcbiAgICAgICAgbWFzay1wb3NpdGlvbjogY2VudGVyO1xuICAgICAgICBtYXNrLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgICAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy1tKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudGNvbG9yO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgW2FyaWEtY3VycmVudD1cInBhZ2VcIl0ge1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgW2Rpcj1cInJ0bFwiXSAubXgtbmF2LS1icmVhZGNydW1icyxcbiAgLnRyYW5zbGF0ZWQtcnRsIC5teC1uYXYtLWJyZWFkY3J1bWJzIHtcbiAgICAmID4gdWwgPiBsaTo6YWZ0ZXIge1xuICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
|
package/dist/build/button.css
CHANGED
|
@@ -1 +1,127 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Buttons
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.atoms {
|
|
6
|
+
.mx-button {
|
|
7
|
+
--outline-offset: 0.0625rem;
|
|
8
|
+
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
inline-size: -moz-fit-content;
|
|
11
|
+
inline-size: fit-content;
|
|
12
|
+
gap: var(--button-gap, var(--spacing-s));
|
|
13
|
+
font-size: var(--button-font-size, var(--font-size));
|
|
14
|
+
font-weight: var(--font-weight-bold);
|
|
15
|
+
font-family: var(--font-family);
|
|
16
|
+
line-height: var(--line-height-ui);
|
|
17
|
+
border: 2px solid
|
|
18
|
+
var(--line-colour, var(--colour-border));
|
|
19
|
+
border: var(--line-width, 2px) solid
|
|
20
|
+
var(--line-colour, var(--colour-border));
|
|
21
|
+
border-radius: var(--radius, var(--border-radius-l));
|
|
22
|
+
padding-block: var(--vertical-padding, var(--spacing-xxs));
|
|
23
|
+
padding-inline: var(--horizontal-padding, var(--spacing-m));
|
|
24
|
+
background-color: var(--background, var(--colour-background));
|
|
25
|
+
color: var(--foreground, var(--colour-foreground));
|
|
26
|
+
text-decoration-line: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.mx-button:hover {
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
text-decoration-line: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.mx-button:disabled {
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
opacity: 0.3;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.mx-button--full-width {
|
|
40
|
+
inline-size: 100%;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.mx-button--large {
|
|
45
|
+
--vertical-padding: var(--spacing-s);
|
|
46
|
+
--horizontal-padding: var(--spacing-l);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.mx-button--small {
|
|
50
|
+
--button-font-size: var(--font-size-s);
|
|
51
|
+
--vertical-padding: var(--spacing-xxxs);
|
|
52
|
+
--horizontal-padding: var(--spacing-s);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.mx-button--icon-only {
|
|
56
|
+
inline-size: var(--spacing-xl);
|
|
57
|
+
block-size: var(--spacing-xl);
|
|
58
|
+
padding: 0;
|
|
59
|
+
border-radius: var(--border-radius-round);
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.mx-button--icon-only::before {
|
|
65
|
+
inline-size: 100%;
|
|
66
|
+
block-size: 100%;
|
|
67
|
+
-webkit-mask-size: var(--spacing-s);
|
|
68
|
+
mask-size: var(--spacing-s);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mx-button--icon-only:has(.mx-icon) {
|
|
72
|
+
align-content: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
place-content: center;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Buttons
|
|
80
|
+
*/
|
|
81
|
+
|
|
82
|
+
@layer design-system.atoms {
|
|
83
|
+
.mx-button--dark {
|
|
84
|
+
--line-colour: var(--colour-link);
|
|
85
|
+
--background: var(--colour-link);
|
|
86
|
+
--foreground: var(--colour-foreground-reverse);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.mx-button--dark.button--outline {
|
|
90
|
+
--background: transparent;
|
|
91
|
+
--foreground: var(--colour-primary);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.mx-button--light {
|
|
95
|
+
border: transparent;
|
|
96
|
+
color: var(--link-colour, var(--colour-link));
|
|
97
|
+
text-decoration-line: underline;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.mx-button--light:hover {
|
|
101
|
+
text-decoration-line: underline;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.mx-button--destructive {
|
|
105
|
+
--line-colour: var(--colour-error);
|
|
106
|
+
--background: var(--colour-error);
|
|
107
|
+
--foreground: var(--colour-foreground-reverse);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.mx-button--destructive.button--outline {
|
|
111
|
+
--background: transparent;
|
|
112
|
+
--foreground: var(--colour-error);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.mx-button--white {
|
|
116
|
+
--line-colour: var(--colour-foreground-reverse);
|
|
117
|
+
--background: var(--colour-foreground-reverse);
|
|
118
|
+
--foreground: var(--colour-foreground);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.mx-button--white.button--outline {
|
|
122
|
+
--background: transparent;
|
|
123
|
+
--foreground: var(--colour-foreground-reverse);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjs7SUFFckIsb0JBQW9CO0lBQ3BCLDZCQUF3QjtJQUF4Qix3QkFBd0I7SUFDeEIsd0NBQXdDO0lBQ3hDLG9EQUFvRDtJQUNwRCxvQ0FBb0M7SUFDcEMsK0JBQStCO0lBQy9CLGtDQUFrQztJQUNsQzs4Q0FDMEM7SUFEMUM7OENBQzBDO0lBQzFDLG9EQUFvRDtJQUNwRCwwREFBMEQ7SUFDMUQsMkRBQTJEO0lBQzNELDZEQUE2RDtJQUM3RCxrREFBa0Q7SUFDbEQsMEJBQTBCO0VBVzVCOztJQVRFO01BQ0UsZUFBZTtNQUNmLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLG1CQUFtQjtNQUNuQixZQUFZO0lBQ2Q7O0VBR0Y7SUFDRSxpQkFBaUI7SUFDakIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0Usb0NBQW9DO0lBQ3BDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLHNDQUFzQztJQUN0Qyx1Q0FBdUM7SUFDdkMsc0NBQXNDO0VBQ3hDOztFQUVBO0lBQ0UsOEJBQThCO0lBQzlCLDZCQUE2QjtJQUM3QixVQUFVO0lBQ1YseUNBQXlDO0lBQ3pDLGdCQUFnQjtJQUNoQixlQUFlO0VBV2pCOztJQVRFO01BQ0UsaUJBQWlCO01BQ2pCLGdCQUFnQjtNQUNoQixtQ0FBMkI7Y0FBM0IsMkJBQTJCO0lBQzdCOztJQUVBO01BQ0UscUJBQXFCO01BQXJCLHVCQUFxQjtNQUFyQixxQkFBcUI7SUFDdkI7QUFFSjs7QUNyRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGlDQUFpQztJQUNqQyxnQ0FBZ0M7SUFDaEMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLG1DQUFtQztJQUNyQzs7RUFHRjtJQUNFLG1CQUFtQjtJQUNuQiw2Q0FBNkM7SUFDN0MsK0JBQStCO0VBS2pDOztJQUhFO01BQ0UsK0JBQStCO0lBQ2pDOztFQUdGO0lBQ0Usa0NBQWtDO0lBQ2xDLGlDQUFpQztJQUNqQyw4Q0FBOEM7RUFNaEQ7O0lBSkU7TUFDRSx5QkFBeUI7TUFDekIsaUNBQWlDO0lBQ25DOztFQUdGO0lBQ0UsK0NBQStDO0lBQy9DLDhDQUE4QztJQUM5QyxzQ0FBc0M7RUFNeEM7O0lBSkU7TUFDRSx5QkFBeUI7TUFDekIsOENBQThDO0lBQ2hEO0FBRUoiLCJmaWxlIjoiYnV0dG9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbiB7XG4gICAgLS1vdXRsaW5lLW9mZnNldDogMXB4O1xuXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgaW5saW5lLXNpemU6IGZpdC1jb250ZW50O1xuICAgIGdhcDogdmFyKC0tYnV0dG9uLWdhcCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1idXR0b24tZm9udC1zaXplLCB2YXIoLS1mb250LXNpemUpKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtYm9sZCk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQtdWkpO1xuICAgIGJvcmRlcjogdmFyKC0tbGluZS13aWR0aCwgMnB4KSBzb2xpZFxuICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIHZhcigtLWJvcmRlci1yYWRpdXMtbCkpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXZlcnRpY2FsLXBhZGRpbmcsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICBjb2xvcjogdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IG5vbmU7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgICAgb3BhY2l0eTogMC4zO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWZ1bGwtd2lkdGgge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGFyZ2Uge1xuICAgIC0tdmVydGljYWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAtLWhvcml6b250YWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1sKTtcbiAgfVxuXG4gIC5teC1idXR0b24tLXNtYWxsIHtcbiAgICAtLWJ1dHRvbi1mb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmcteHh4cyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtcm91bmQpO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICAgIG1hc2stc2l6ZTogdmFyKC0tc3BhY2luZy1zKTtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtaWNvbikge1xuICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgIH1cbiAgfVxufVxuIiwiLyoqXG4gKiBCdXR0b25zXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uYXRvbXMge1xuICAubXgtYnV0dG9uLS1kYXJrIHtcbiAgICAtLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItbGluayk7XG4gICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1jb2xvdXItbGluayk7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcblxuICAgICYuYnV0dG9uLS1vdXRsaW5lIHtcbiAgICAgIC0tYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1saWdodCB7XG4gICAgYm9yZGVyOiB0cmFuc3BhcmVudDtcbiAgICBjb2xvcjogdmFyKC0tbGluay1jb2xvdXIsIHZhcigtLWNvbG91ci1saW5rKSk7XG4gICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHVuZGVybGluZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHVuZGVybGluZTtcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1kZXN0cnVjdGl2ZSB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWVycm9yKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcblxuICAgICYuYnV0dG9uLS1vdXRsaW5lIHtcbiAgICAgIC0tYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0td2hpdGUge1xuICAgIC0tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCk7XG5cbiAgICAmLmJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
|
package/dist/build/callout.css
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
@layer design-system.components{
|
|
1
|
+
@layer design-system.components {
|
|
2
|
+
.mx-callout {
|
|
3
|
+
padding-inline-start: var(--line-gap, var(--gap));
|
|
4
|
+
border-inline-start: 6px solid
|
|
5
|
+
var(--line-colour, var(--colour-primary));
|
|
6
|
+
border-inline-start: var(--line-width, 6px) solid
|
|
7
|
+
var(--line-colour, var(--colour-primary));
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGxvdXQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0U7SUFDRSxpREFBaUQ7SUFDakQ7K0NBQzJDO0lBRDNDOytDQUMyQztFQUM3QztBQUNGIiwiZmlsZSI6ImNhbGxvdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYWxsb3V0IHtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdmFyKC0tbGluZS1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGJvcmRlci1pbmxpbmUtc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDZweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItcHJpbWFyeSkpO1xuICB9XG59XG4iXX0= */
|
package/dist/build/card.css
CHANGED
|
@@ -1 +1,160 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Content Card
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.components {
|
|
6
|
+
.mx-card {
|
|
7
|
+
block-size: 100%;
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-gap: var(--card-gap, var(--gap));
|
|
10
|
+
gap: var(--card-gap, var(--gap));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.mx-card[class*="mx-background--"] {
|
|
14
|
+
border-radius: var(--border-radius);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@container (min-width: 720px) {
|
|
18
|
+
|
|
19
|
+
.mx-card[class*="mx-background--"] {
|
|
20
|
+
--content-min-spacing: var(--content-max-spacing, var(--spacing-m));
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.mx-card[class*="mx-background--"] .mx-card__content {
|
|
25
|
+
padding-inline: var(--content-min-spacing, var(--spacing-s));
|
|
26
|
+
padding-block-end: var(--content-min-spacing, var(--spacing-s));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.mx-card[class*="mx-background--"]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content {
|
|
30
|
+
padding-block-start: var(--content-min-spacing, var(--spacing-s));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.mx-card[class*="mx-background--"] .mx-card__icon {
|
|
34
|
+
padding-inline: var(--content-min-spacing, var(--spacing-s));
|
|
35
|
+
padding-block-start: var(--content-min-spacing, var(--spacing-s));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mx-card.mx-background--box[class*="mx-background--"] {
|
|
39
|
+
padding-inline: unset;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.mx-card:has(.mx-card__media) {
|
|
43
|
+
grid-template: "media" "content" 1fr / 1fr;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@container (min-width: 720px) {
|
|
47
|
+
|
|
48
|
+
.mx-card:has(.mx-card__media) {
|
|
49
|
+
--card-gap: var(--gap-l);
|
|
50
|
+
|
|
51
|
+
grid-template: "media content" 1fr / 1fr 1fr;
|
|
52
|
+
|
|
53
|
+
grid-template: "media content" 1fr / var(--media-col, 1fr) var(
|
|
54
|
+
--content-col,
|
|
55
|
+
1fr
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.mx-card.mx-card--reversed:has(.mx-card__media) {
|
|
60
|
+
grid-template-areas: "content media";
|
|
61
|
+
grid-template-columns: 1fr 1fr;
|
|
62
|
+
grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@container (min-width: 946px) {
|
|
67
|
+
|
|
68
|
+
.mx-card:has(.mx-card__media) {
|
|
69
|
+
--card-gap: var(--large-card-gap, 6rem);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
@container (min-width: 720px) {
|
|
73
|
+
.mx-card[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
|
|
74
|
+
padding-block-start: var(--content-min-spacing, var(--spacing-s));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.mx-card[class*="mx-background--"]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content {
|
|
78
|
+
padding-inline-start: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.mx-card.mx-card--reversed[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
|
|
82
|
+
padding-inline-end: 0;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mx-card:has(.mx-card__media) .mx-card__content {
|
|
87
|
+
grid-area: content;
|
|
88
|
+
align-self: center;
|
|
89
|
+
align-self: var(--align-content, center);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.mx-card:has(.mx-card__media) .mx-card__media {
|
|
93
|
+
grid-area: media;
|
|
94
|
+
align-self: center;
|
|
95
|
+
align-self: var(--align-media, center);
|
|
96
|
+
inline-size: 100%;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
:is(.mx-card:has(.mx-card__media) .mx-card__media) img {
|
|
100
|
+
aspect-ratio: var(--ratio);
|
|
101
|
+
border-radius: var(--border-radius);
|
|
102
|
+
-o-object-fit: cover;
|
|
103
|
+
object-fit: cover;
|
|
104
|
+
inline-size: 100%;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.mx-card:has(.mx-card__media) .mx-skeleton--bg {
|
|
108
|
+
grid-area: media;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.mx-card:has(.mx-card__media) .mx-card__icon {
|
|
112
|
+
grid-area: media;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.mx-card .mx-link-list {
|
|
116
|
+
inline-size: 100%;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.mx-card__content > a:last-child {
|
|
120
|
+
margin-block-start: auto;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Content Card Grid
|
|
126
|
+
*/
|
|
127
|
+
|
|
128
|
+
@layer design-system.components {
|
|
129
|
+
.mx-grid:has(> *:nth-child(2):last-child)
|
|
130
|
+
> :is(.mx-card, .mx-container:has(.mx-card)) {
|
|
131
|
+
inline-size: min(100%, 37ch);
|
|
132
|
+
inline-size: min(100%, var(--max-card-width, 37ch));
|
|
133
|
+
margin-inline: auto;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Content Card Linked
|
|
139
|
+
*/
|
|
140
|
+
|
|
141
|
+
@layer design-system.components {
|
|
142
|
+
a.mx-card[href]:hover {
|
|
143
|
+
color: inherit;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.mx-card--block {
|
|
147
|
+
position: relative;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.mx-card--block a::before {
|
|
151
|
+
content: "";
|
|
152
|
+
position: absolute;
|
|
153
|
+
inset-block-start: 0;
|
|
154
|
+
inset-inline-start: 0;
|
|
155
|
+
inline-size: 100%;
|
|
156
|
+
block-size: 100%;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUErRmxDOztJQTdGRTtNQUNFLG1DQUFtQztJQXVCckM7O01BckJFOztJQUhGO1FBSUksbUVBQW1FO0lBb0J2RTtNQW5CRTs7TUFFQTtRQUNFLDREQUE0RDtRQUM1RCwrREFBK0Q7TUFDakU7O01BRUE7UUFDRSxpRUFBaUU7TUFDbkU7O01BRUE7UUFDRSw0REFBNEQ7UUFDNUQsaUVBQWlFO01BQ25FOztNQUVBO1FBQ0UscUJBQXFCO01BQ3ZCOztJQUdGO01BQ0UsMENBQTBDO0lBNkQ1Qzs7TUEzREU7O0lBSEY7UUFJSSx3QkFBd0I7O1FBRXhCLDRDQUdHOztRQUhIOzs7V0FHRztJQXFEUDs7UUFuREk7VUFDRSxvQ0FBb0M7VUFDcEMsOEJBQW9FO1VBQXBFLG9FQUFvRTtRQUN0RTtNQUNGOztNQUVBOztJQWpCRjtRQWtCSSx1Q0FBdUM7SUE0QzNDO01BM0NFO1FBR0U7VUFDRTtZQUNFLGlFQUFpRTtVQUNuRTs7VUFFQTtZQUNFLHVCQUF1QjtVQUN6Qjs7VUFFQTtZQUNFLHFCQUFxQjtVQUN2QjtRQUNGOztNQUdGO1FBQ0Usa0JBQWtCO1FBQ2xCLGtCQUF3QztRQUF4Qyx3Q0FBd0M7TUFDMUM7O01BRUE7UUFDRSxnQkFBZ0I7UUFDaEIsa0JBQXNDO1FBQXRDLHNDQUFzQztRQUN0QyxpQkFBaUI7TUFRbkI7O1FBTkU7VUFDRSwwQkFBMEI7VUFDMUIsbUNBQW1DO1VBQ25DLG9CQUFpQjthQUFqQixpQkFBaUI7VUFDakIsaUJBQWlCO1FBQ25COztNQUdGO1FBQ0UsZ0JBQWdCO01BQ2xCOztNQUVBO1FBQ0UsZ0JBQWdCO01BQ2xCOztJQUdGO01BQ0UsaUJBQWlCO0lBQ25COztFQUdGO0lBQ0Usd0JBQXdCO0VBQzFCO0FBQ0Y7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTs7SUFFRSw0QkFBbUQ7SUFBbkQsbURBQW1EO0lBQ25ELG1CQUFtQjtFQUNyQjtBQUNGOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxjQUFjO0lBQ2hCOztFQUdGO0lBQ0Usa0JBQWtCO0VBVXBCOztJQVJFO01BQ0UsV0FBVztNQUNYLGtCQUFrQjtNQUNsQixvQkFBb0I7TUFDcEIscUJBQXFCO01BQ3JCLGlCQUFpQjtNQUNqQixnQkFBZ0I7SUFDbEI7QUFFSiIsImZpbGUiOiJjYXJkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29udGVudCBDYXJkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYXJkIHtcbiAgICBibG9jay1zaXplOiAxMDAlO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiB2YXIoLS1jYXJkLWdhcCwgdmFyKC0tZ2FwKSk7XG5cbiAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcblxuICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgLS1jb250ZW50LW1pbi1zcGFjaW5nOiB2YXIoLS1jb250ZW50LW1heC1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgICAgIH1cblxuICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgfVxuXG4gICAgICAmOm5vdCg6aGFzKC5teC1jYXJkX19tZWRpYSwgLm14LWNhcmRfX2ljb24pKSAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJi5teC1iYWNrZ3JvdW5kLS1ib3gge1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdW5zZXQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWNhcmRfX21lZGlhKSB7XG4gICAgICBncmlkLXRlbXBsYXRlOiBcIm1lZGlhXCIgXCJjb250ZW50XCIgMWZyIC8gMWZyO1xuXG4gICAgICBAY29udGFpbmVyIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5jb250ZW50Q2FyZFwiKSkge1xuICAgICAgICAtLWNhcmQtZ2FwOiB2YXIoLS1nYXAtbCk7XG5cbiAgICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYSBjb250ZW50XCIgMWZyIC8gdmFyKC0tbWVkaWEtY29sLCAxZnIpIHZhcihcbiAgICAgICAgICAgIC0tY29udGVudC1jb2wsXG4gICAgICAgICAgICAxZnJcbiAgICAgICAgICApO1xuXG4gICAgICAgICYubXgtY2FyZC0tcmV2ZXJzZWQge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBtZWRpYVwiO1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogdmFyKC0tY29udGVudC1jb2wsIDFmcikgdmFyKC0tbWVkaWEtY29sLCAxZnIpO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tbGFyZ2UtY2FyZC1nYXAsIDZyZW0pO1xuICAgICAgfVxuXG4gICAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAmOndoZXJlKDpub3QoLm14LWNhcmQtLXJldmVyc2VkKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJi5teC1jYXJkLS1yZXZlcnNlZCAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDA7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBncmlkLWFyZWE6IGNvbnRlbnQ7XG4gICAgICAgIGFsaWduLXNlbGY6IHZhcigtLWFsaWduLWNvbnRlbnQsIGNlbnRlcik7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX21lZGlhIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgICAgYWxpZ24tc2VsZjogdmFyKC0tYWxpZ24tbWVkaWEsIGNlbnRlcik7XG4gICAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuXG4gICAgICAgICYgaW1nIHtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmRfX2NvbnRlbnQgPiBhOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogYXV0bztcbiAgfVxufVxuXG4vKipcbiAqIENvbnRlbnQgQ2FyZCBHcmlkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1ncmlkOmhhcyg+ICo6bnRoLWNoaWxkKDIpOmxhc3QtY2hpbGQpXG4gICAgPiA6aXMoLm14LWNhcmQsIC5teC1jb250YWluZXI6aGFzKC5teC1jYXJkKSkge1xuICAgIGlubGluZS1zaXplOiBtaW4oMTAwJSwgdmFyKC0tbWF4LWNhcmQtd2lkdGgsIDM3Y2gpKTtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG59XG5cbi8qKlxuICogQ29udGVudCBDYXJkIExpbmtlZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICBhW2hyZWZdLm14LWNhcmQge1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmQtLWJsb2NrIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmIGE6OmJlZm9yZSB7XG4gICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
package/dist/build/carousel.css
CHANGED
|
@@ -1 +1,125 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Carousel.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.components.carousel {
|
|
6
|
+
.mx-carousel {
|
|
7
|
+
display: block;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.mx-carousel__scrollable {
|
|
11
|
+
list-style: none;
|
|
12
|
+
display: flex;
|
|
13
|
+
block-size: auto;
|
|
14
|
+
block-size: var(--block-size, auto);
|
|
15
|
+
overflow-x: auto;
|
|
16
|
+
overflow-y: hidden;
|
|
17
|
+
overflow: auto hidden;
|
|
18
|
+
scroll-snap-type: x mandatory;
|
|
19
|
+
-webkit-overflow-scrolling: touch;
|
|
20
|
+
scroll-behavior: smooth;
|
|
21
|
+
scrollbar-color: var(--colour-foreground) var(--colour-background);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.mx-carousel__scrollable::-webkit-scrollbar {
|
|
25
|
+
block-size: 1rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.mx-carousel__scrollable::-webkit-scrollbar-track {
|
|
29
|
+
background-color: var(--colour-background);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.mx-carousel__scrollable::-webkit-scrollbar-thumb {
|
|
33
|
+
background-color: var(--colour-foreground);
|
|
34
|
+
background-image: linear-gradient(
|
|
35
|
+
var(--colour-background) 0,
|
|
36
|
+
var(--colour-background) 0.25rem,
|
|
37
|
+
var(--colour-foreground) 0.25rem,
|
|
38
|
+
var(--colour-foreground) 0.75rem,
|
|
39
|
+
var(--colour-background) 0.75rem
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mx-carousel__scrollable > li {
|
|
44
|
+
flex: 0 0 25ch;
|
|
45
|
+
flex: 0 0 var(--inline-size, 25ch);
|
|
46
|
+
display: flex;
|
|
47
|
+
scroll-snap-align: start;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[inert]:is(.mx-carousel__scrollable > li) {
|
|
51
|
+
opacity: 0.3;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:is(.mx-carousel__scrollable > li) + li {
|
|
55
|
+
margin-inline-start: var(--gap);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:is(.mx-carousel__scrollable > li) .mx-container {
|
|
59
|
+
inline-size: 100%;
|
|
60
|
+
display: flex;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.mx-carousel__scrollable:not(:first-child) {
|
|
64
|
+
padding-block-start: var(--gap);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.mx-carousel__scrollable.overflowing:not(.no-bar) {
|
|
68
|
+
padding-block-end: var(--gap);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mx-carousel__scrollable.no-bar {
|
|
72
|
+
scrollbar-width: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.mx-carousel__scrollable.no-bar::-webkit-scrollbar {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
.mx-carousel__buttons:not([hidden]) {
|
|
79
|
+
display: flex;
|
|
80
|
+
gap: var(--gap-s);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.mx-carousel__buttons button[disabled] {
|
|
84
|
+
opacity: 0.5;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.mx-carousel__pagination {
|
|
88
|
+
list-style: none;
|
|
89
|
+
padding-inline: 0;
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
gap: var(--spacing-xxxs);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.mx-carousel__pagination[data-pagination="counter"] {
|
|
96
|
+
--border-radius: var(--border-radius-round);
|
|
97
|
+
--indent: 200%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.mx-carousel__pagination button {
|
|
101
|
+
border-radius: var(--border-radius);
|
|
102
|
+
border: 2px solid
|
|
103
|
+
var(--line-colour, var(--colour-border));
|
|
104
|
+
border: var(--line-width, 2px) solid
|
|
105
|
+
var(--line-colour, var(--colour-border));
|
|
106
|
+
background-color: var(--background, var(--colour-background));
|
|
107
|
+
color: var(--foreground, var(--colour-foreground));
|
|
108
|
+
min-block-size: 2em;
|
|
109
|
+
min-inline-size: 2em;
|
|
110
|
+
font-family: inherit;
|
|
111
|
+
text-align: center;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
text-indent: inherit;
|
|
115
|
+
text-indent: var(--indent, unset);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[disabled]:is(.mx-carousel__pagination button) {
|
|
119
|
+
--background: var(--active-background, var(--colour-border));
|
|
120
|
+
|
|
121
|
+
cursor: not-allowed;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcm91c2VsLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsY0FBYztFQUNoQjs7RUFFQTtJQUNFLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsZ0JBQW1DO0lBQW5DLG1DQUFtQztJQUNuQyxnQkFBcUI7SUFBckIsa0JBQXFCO0lBQXJCLHFCQUFxQjtJQUNyQiw2QkFBNkI7SUFDN0IsaUNBQWlDO0lBQ2pDLHVCQUF1QjtJQUN2QixrRUFBa0U7RUF1RHBFOztJQXJERTtNQUNFLGdCQUFnQjtJQUNsQjs7SUFFQTtNQUNFLDBDQUEwQztJQUM1Qzs7SUFFQTtNQUNFLDBDQUEwQztNQUMxQzs7Ozs7O09BTUM7SUFDSDs7SUFFQTtNQUNFLGNBQWtDO01BQWxDLGtDQUFrQztNQUNsQyxhQUFhO01BQ2Isd0JBQXdCO0lBYzFCOztNQVpFO1FBQ0UsWUFBWTtNQUNkOztNQUVBO1FBQ0UsK0JBQStCO01BQ2pDOztNQUVBO1FBQ0UsaUJBQWlCO1FBQ2pCLGFBQWE7TUFDZjs7SUFHRjtNQUNFLCtCQUErQjtJQUNqQzs7SUFFQTtNQUNFLDZCQUE2QjtJQUMvQjs7SUFFQTtNQUNFLHFCQUFxQjtJQUt2Qjs7TUFIRTtRQUNFLGFBQWE7TUFDZjtJQUtGO01BQ0UsYUFBYTtNQUNiLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFlBQVk7SUFDZDs7RUFHRjtJQUNFLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsYUFBYTtJQUNiLG1CQUFtQjtJQUNuQix3QkFBd0I7RUEyQjFCOztJQXpCRTtNQUNFLDJDQUEyQztNQUMzQyxjQUFjO0lBQ2hCOztJQUVBO01BQ0UsbUNBQW1DO01BQ25DO2dEQUMwQztNQUQxQztnREFDMEM7TUFDMUMsNkRBQTZEO01BQzdELGtEQUFrRDtNQUNsRCxtQkFBbUI7TUFDbkIsb0JBQW9CO01BQ3BCLG9CQUFvQjtNQUNwQixrQkFBa0I7TUFDbEIsZUFBZTtNQUNmLGdCQUFnQjtNQUNoQixvQkFBaUM7TUFBakMsaUNBQWlDO0lBT25DOztNQUxFO1FBQ0UsNERBQTREOztRQUU1RCxtQkFBbUI7TUFDckI7QUFHTiIsImZpbGUiOiJjYXJvdXNlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENhcm91c2VsLlxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMuY2Fyb3VzZWwge1xuICAubXgtY2Fyb3VzZWwge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgLm14LWNhcm91c2VsX19zY3JvbGxhYmxlIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tYmxvY2stc2l6ZSwgYXV0byk7XG4gICAgb3ZlcmZsb3c6IGF1dG8gaGlkZGVuO1xuICAgIHNjcm9sbC1zbmFwLXR5cGU6IHggbWFuZGF0b3J5O1xuICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbiAgICBzY3JvbGxiYXItY29sb3I6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCk7XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICBibG9jay1zaXplOiAxcmVtO1xuICAgIH1cblxuICAgICY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKTtcbiAgICB9XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhci10aHVtYiB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCk7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSAwLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC4yNXJlbSxcbiAgICAgICAgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpIDAuMjVyZW0sXG4gICAgICAgIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSAwLjc1cmVtLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC43NXJlbVxuICAgICAgKTtcbiAgICB9XG5cbiAgICAmID4gbGkge1xuICAgICAgZmxleDogMCAwIHZhcigtLWlubGluZS1zaXplLCAyNWNoKTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBzY3JvbGwtc25hcC1hbGlnbjogc3RhcnQ7XG5cbiAgICAgICZbaW5lcnRdIHtcbiAgICAgICAgb3BhY2l0eTogMC4zO1xuICAgICAgfVxuXG4gICAgICAmICsgbGkge1xuICAgICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiB2YXIoLS1nYXApO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jb250YWluZXIge1xuICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOm5vdCg6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5vdmVyZmxvd2luZzpub3QoLm5vLWJhcikge1xuICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5uby1iYXIge1xuICAgICAgc2Nyb2xsYmFyLXdpZHRoOiBub25lO1xuXG4gICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19idXR0b25zIHtcbiAgICAmOm5vdChbaGlkZGVuXSkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGdhcDogdmFyKC0tZ2FwLXMpO1xuICAgIH1cblxuICAgICYgYnV0dG9uW2Rpc2FibGVkXSB7XG4gICAgICBvcGFjaXR5OiAwLjU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19wYWdpbmF0aW9uIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmcteHh4cyk7XG5cbiAgICAmW2RhdGEtcGFnaW5hdGlvbj1cImNvdW50ZXJcIl0ge1xuICAgICAgLS1ib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICAgIC0taW5kZW50OiAyMDAlO1xuICAgIH1cblxuICAgICYgYnV0dG9uIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgYm9yZGVyOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpIHNvbGlkXG4gICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgICAgY29sb3I6IHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgICBtaW4tYmxvY2stc2l6ZTogMmVtO1xuICAgICAgbWluLWlubGluZS1zaXplOiAyZW07XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB0ZXh0LWluZGVudDogdmFyKC0taW5kZW50LCB1bnNldCk7XG5cbiAgICAgICZbZGlzYWJsZWRdIHtcbiAgICAgICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1hY3RpdmUtYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { m as makeAnchor } from "./utilities-DXELy_An.js";
|
|
2
|
+
class Accordion extends HTMLElement {
|
|
3
|
+
constructor() {
|
|
4
|
+
super();
|
|
5
|
+
this.handleOpen = () => {
|
|
6
|
+
if (!this.details) return;
|
|
7
|
+
this.details.open = true;
|
|
8
|
+
};
|
|
9
|
+
this.handleClose = () => {
|
|
10
|
+
if (!this.details) return;
|
|
11
|
+
this.details.open = false;
|
|
12
|
+
};
|
|
13
|
+
this.handleHash = () => {
|
|
14
|
+
const { hash } = window.location;
|
|
15
|
+
if (hash && hash === `#${this.details?.id}`) {
|
|
16
|
+
this.handleOpen();
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
this.generatedId = () => {
|
|
20
|
+
const string = this.trigger?.textContent?.trim();
|
|
21
|
+
return !string ? "" : makeAnchor(string);
|
|
22
|
+
};
|
|
23
|
+
this.internals_ = this.attachInternals();
|
|
24
|
+
this.controller = new AbortController();
|
|
25
|
+
}
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
if (!this.details || !this.trigger) return;
|
|
28
|
+
const { signal } = this.controller;
|
|
29
|
+
document.addEventListener("beforeprint", this.handleOpen, {
|
|
30
|
+
signal
|
|
31
|
+
});
|
|
32
|
+
document.addEventListener("afterprint", this.handleClose, {
|
|
33
|
+
signal
|
|
34
|
+
});
|
|
35
|
+
this.handleHash();
|
|
36
|
+
document.addEventListener("hashchange", this.handleHash, { signal });
|
|
37
|
+
}
|
|
38
|
+
disconnectedCallback() {
|
|
39
|
+
this.controller.abort();
|
|
40
|
+
}
|
|
41
|
+
get details() {
|
|
42
|
+
const details = this.querySelector("details");
|
|
43
|
+
if (!details) {
|
|
44
|
+
throw new Error(`${this.localName} must contain a <details> element.`);
|
|
45
|
+
}
|
|
46
|
+
details.id = details.id || this.generatedId();
|
|
47
|
+
return details;
|
|
48
|
+
}
|
|
49
|
+
get trigger() {
|
|
50
|
+
const trigger = this.querySelector("summary");
|
|
51
|
+
if (!trigger) {
|
|
52
|
+
throw new Error(`${this.localName} must contain a <summary> element.`);
|
|
53
|
+
}
|
|
54
|
+
return trigger;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
customElements.define("mx-accordion", Accordion);
|
|
58
|
+
export {
|
|
59
|
+
Accordion as A
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=Accordion-O-huO4At.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion-O-huO4At.js","sources":["../../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n if (!this.details || !this.trigger) return\n\n const { signal }: AbortController = this.controller\n document.addEventListener(\"beforeprint\", this.handleOpen, {\n signal,\n })\n document.addEventListener(\"afterprint\", this.handleClose, {\n signal,\n })\n this.handleHash()\n document.addEventListener(\"hashchange\", this.handleHash, { signal })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n }\n\n handleOpen = (): void => {\n if (!this.details) return\n this.details.open = true\n }\n\n handleClose = (): void => {\n if (!this.details) return\n this.details.open = false\n }\n\n handleHash = (): void => {\n const { hash }: Location = window.location\n if (hash && hash === `#${this.details?.id}`) {\n this.handleOpen()\n }\n }\n\n get details(): HTMLDetailsElement | null {\n const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n if (!details) {\n throw new Error(`${this.localName} must contain a <details> element.`)\n }\n details.id = details.id || this.generatedId()\n return details\n }\n\n get trigger(): HTMLElement | null {\n const trigger: HTMLElement | null = this.querySelector(\"summary\")\n if (!trigger) {\n throw new Error(`${this.localName} must contain a <summary> element.`)\n }\n return trigger\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-accordion\": Accordion\n }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}
|