@pnx-mixtape/mxds 0.0.3 → 0.0.4
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/package.json +2 -2
- package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +3 -3
- package/src/Atom/Button/Button.stories.ts +4 -6
- package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +23 -11
- package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +2 -2
- package/src/Atom/Button/_buttons.css +4 -0
- package/src/Atom/Button/button.twig +6 -4
- package/src/Atom/Button/twig/story-button.twig +11 -0
- package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +1 -1
- package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +2 -2
- package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +1 -1
- package/src/Atom/Heading/heading.twig +19 -1
- package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +3 -3
- package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +3 -3
- package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +1 -1
- package/src/Atom/Link/Link.stories.ts +31 -7
- package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +46 -6
- package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +3 -3
- package/src/Atom/Link/_links.css +23 -1
- package/src/Atom/Link/link.twig +8 -6
- package/src/Atom/Link/twig/story-link.twig +11 -0
- package/src/Atom/Media/Media.stories.ts +17 -1
- package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +17 -2
- package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +2 -2
- package/src/Atom/Media/twig/story-media.twig +11 -0
- package/src/Atom/NavList/__snapshots__/NavList.stories.ts.snap +1 -1
- package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +1 -1
- package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +4 -4
- package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +1 -1
- package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +1 -1
- package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap +2 -2
- package/src/Atom/Video/Video.stories.ts +5 -3
- package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +3 -13
- package/src/Atom/Video/_video.css +5 -0
- package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +4 -4
- package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +1 -1
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +1 -1
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +2 -2
- package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +12 -0
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +34 -24
- package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +3 -3
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +6 -23
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +1 -1
- package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +2 -2
- package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +1 -1
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +1 -1
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +1 -1
- package/src/Component/{InPageAlert/Elements/InPageAlert.ts → GlobalAlert/Elements/ClosableAlert.ts} +21 -10
- package/src/Component/GlobalAlert/GlobalAlert.stories.ts +49 -0
- package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +33 -0
- package/src/Component/GlobalAlert/GlobalAlert.tsx +50 -0
- package/src/Component/GlobalAlert/README.md +27 -0
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +43 -0
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +48 -0
- package/src/Component/GlobalAlert/global-alert.css +55 -0
- package/src/Component/GlobalAlert/global-alert.entry.js +1 -0
- package/src/Component/GlobalAlert/global-alert.twig +30 -0
- package/src/Component/GlobalAlert/twig/story-global-alert.twig +14 -0
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +74 -0
- package/src/Component/HeroBanner/__snapshots__/{PageTitle.stories.tsx.snap → HeroBanner.stories.tsx.snap} +4 -4
- package/src/Component/InPageAlert/InPageAlert.stories.ts +20 -22
- package/src/Component/InPageAlert/InPageAlert.stories.tsx +5 -5
- package/src/Component/InPageAlert/InPageAlert.tsx +15 -41
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +9 -36
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +56 -56
- package/src/Component/InPageAlert/in-page-alert.twig +13 -16
- package/src/Component/InPageAlert/twig/story-in-page-alert.twig +11 -0
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +6 -70
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +1 -1
- package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +24 -55
- package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap +1 -1
- package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap +1 -1
- package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +1 -1
- package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +1 -1
- package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +2 -2
- package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +1 -1
- package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +1 -1
- package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +9 -82
- package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +1 -1
- package/src/Component/Tabs/README.md +0 -1
- package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +1 -1
- package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +1 -1
- package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +3 -3
- package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +1 -1
- package/src/Component/Tile/__snapshots__/Tile.stories.ts.snap +1 -1
- package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +2 -2
- package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap +1 -1
- package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +33 -90
- package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +2 -2
- package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +1 -1
- package/src/Layout/Section/Section.stories.ts +1 -2
- package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +59 -0
- package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +80 -0
- package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +91 -0
- package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +22 -14
- package/src/Layout/Section/twig/section-story.twig +1 -1
- package/src/elements.ts +1 -1
- package/dist/build/accordion.css +0 -1
- package/dist/build/accordion.entry.js +0 -1
- package/dist/build/base.css +0 -1
- package/dist/build/breadcrumb.css +0 -1
- package/dist/build/button.css +0 -1
- package/dist/build/callout.css +0 -1
- package/dist/build/card.css +0 -1
- package/dist/build/chunks/disclosure-widget-CfhDmuvA.js +0 -1
- package/dist/build/chunks/keyboard-Cs0cduxq.js +0 -1
- package/dist/build/chunks/polyfills-DUM8gN-6.js +0 -1
- package/dist/build/chunks/popover-BGbvrIUp.js +0 -1
- package/dist/build/chunks/utilities-Bzel_okZ.js +0 -2
- package/dist/build/constants.css +0 -1
- package/dist/build/container-grid.css +0 -1
- package/dist/build/content-block.css +0 -1
- package/dist/build/dialog.css +0 -1
- package/dist/build/dialog.entry.js +0 -1
- package/dist/build/drop-menu.css +0 -1
- package/dist/build/drop-menu.entry.js +0 -1
- package/dist/build/drupal.css +0 -1
- package/dist/build/footer-menu.css +0 -1
- package/dist/build/footer.css +0 -1
- package/dist/build/form.css +0 -1
- package/dist/build/grid.css +0 -1
- package/dist/build/header.css +0 -1
- package/dist/build/header.entry.js +0 -1
- package/dist/build/hero-banner.css +0 -1
- package/dist/build/icon.css +0 -1
- package/dist/build/in-page-alert.css +0 -1
- package/dist/build/in-page-alert.entry.js +0 -1
- package/dist/build/in-page-navigation.css +0 -1
- package/dist/build/in-page-navigation.entry.js +0 -1
- package/dist/build/index.css +0 -1
- package/dist/build/link-list.css +0 -1
- package/dist/build/masthead.css +0 -1
- package/dist/build/nav-list.css +0 -1
- package/dist/build/navigation.css +0 -1
- package/dist/build/navigation.entry.js +0 -1
- package/dist/build/page.css +0 -1
- package/dist/build/pagination.css +0 -1
- package/dist/build/section.css +0 -1
- package/dist/build/sidebar.css +0 -1
- package/dist/build/sticky.css +0 -1
- package/dist/build/sticky.entry.js +0 -1
- package/dist/build/tabs.css +0 -1
- package/dist/build/tabs.entry.js +0 -1
- package/dist/build/tag.css +0 -1
- package/dist/build/tiles.css +0 -1
- package/dist/build/utilities.css +0 -1
- package/src/Component/Card/__snapshots__/CardGrid.stories.ts.snap +0 -89
- package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.ts.snap +0 -31
- package/src/Component/InPageAlert/in-page-alert.entry.js +0 -1
- package/src/Layout/Section/__snapshots__/SectionBackground.stories.ts.snap +0 -55
- package/src/Layout/Section/__snapshots__/SectionsBreakouts.stories.ts.snap +0 -78
- package/src/Layout/Section/__snapshots__/SectionsFlowsGroups.stories.ts.snap +0 -89
|
@@ -1,103 +1,46 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`Layout/Grid
|
|
4
|
-
<div class="grid grid--
|
|
5
|
-
<div>
|
|
6
|
-
1
|
|
3
|
+
exports[`Layout/Grid Grid smoke-test 1`] = `
|
|
4
|
+
<div class="grid grid--cols-sm-2 grid--cols-lg-4">
|
|
5
|
+
<div class>
|
|
6
|
+
item 1
|
|
7
7
|
</div>
|
|
8
|
-
<div>
|
|
9
|
-
2
|
|
8
|
+
<div class>
|
|
9
|
+
item 2
|
|
10
10
|
</div>
|
|
11
|
-
<div>
|
|
12
|
-
3
|
|
11
|
+
<div class>
|
|
12
|
+
item 3
|
|
13
13
|
</div>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<div>
|
|
17
|
-
1
|
|
18
|
-
</div>
|
|
19
|
-
<div>
|
|
20
|
-
2
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="grid grid--sm-2-cols">
|
|
24
|
-
<div>
|
|
25
|
-
1
|
|
26
|
-
</div>
|
|
27
|
-
<div>
|
|
28
|
-
2
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="grid grid--md-2-cols">
|
|
32
|
-
<div>
|
|
33
|
-
1
|
|
34
|
-
</div>
|
|
35
|
-
<div>
|
|
36
|
-
2
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="grid grid--md-3-cols">
|
|
40
|
-
<div>
|
|
41
|
-
1
|
|
42
|
-
</div>
|
|
43
|
-
<div>
|
|
44
|
-
2
|
|
45
|
-
</div>
|
|
46
|
-
<div>
|
|
47
|
-
3
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="grid grid--lg-3-cols">
|
|
51
|
-
<div>
|
|
52
|
-
1
|
|
53
|
-
</div>
|
|
54
|
-
<div>
|
|
55
|
-
2
|
|
14
|
+
<div class>
|
|
15
|
+
item 4
|
|
56
16
|
</div>
|
|
57
|
-
<div>
|
|
58
|
-
|
|
17
|
+
<div class>
|
|
18
|
+
item 5
|
|
59
19
|
</div>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<div>
|
|
63
|
-
1
|
|
64
|
-
</div>
|
|
65
|
-
<div>
|
|
66
|
-
2
|
|
67
|
-
</div>
|
|
68
|
-
<div>
|
|
69
|
-
3
|
|
70
|
-
</div>
|
|
71
|
-
<div>
|
|
72
|
-
4
|
|
20
|
+
<div class>
|
|
21
|
+
item 6
|
|
73
22
|
</div>
|
|
74
23
|
</div>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
</
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<div class="grid grid--
|
|
90
|
-
<div>
|
|
91
|
-
1
|
|
92
|
-
</div>
|
|
93
|
-
<div>
|
|
94
|
-
2
|
|
95
|
-
</div>
|
|
96
|
-
<div>
|
|
97
|
-
3
|
|
24
|
+
`;
|
|
25
|
+
|
|
26
|
+
exports[`Layout/Grid List smoke-test 1`] = `
|
|
27
|
+
<ul class="grid grid--cols-sm-2">
|
|
28
|
+
<li class>
|
|
29
|
+
list item 1
|
|
30
|
+
</li>
|
|
31
|
+
<li class>
|
|
32
|
+
list item 2
|
|
33
|
+
</li>
|
|
34
|
+
</ul>
|
|
35
|
+
`;
|
|
36
|
+
|
|
37
|
+
exports[`Layout/Grid Span smoke-test 1`] = `
|
|
38
|
+
<div class="grid grid--cols-sm-2 grid--cols-md-3">
|
|
39
|
+
<div class>
|
|
40
|
+
item 1
|
|
98
41
|
</div>
|
|
99
|
-
<div>
|
|
100
|
-
|
|
42
|
+
<div class="grid-item__span-md-2">
|
|
43
|
+
item 2, span 2
|
|
101
44
|
</div>
|
|
102
45
|
</div>
|
|
103
46
|
`;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Layout/Header/Secondary Secondary smoke-test 1`] = `
|
|
4
|
-
<div class="
|
|
4
|
+
<div class="masthead section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
|
|
5
5
|
<div class="flex">
|
|
6
6
|
<span class="text--s">
|
|
7
7
|
Global message
|
|
8
8
|
</span>
|
|
9
|
-
<nav class="nav
|
|
9
|
+
<nav class="nav masthead__nav nav--inline text--s"
|
|
10
10
|
aria-label="Navigation"
|
|
11
11
|
>
|
|
12
12
|
<ul>
|
|
@@ -55,7 +55,7 @@ exports[`Layout/Page Page smoke-test 1`] = `
|
|
|
55
55
|
</header>
|
|
56
56
|
<main class="section">
|
|
57
57
|
<div class="page section--xl">
|
|
58
|
-
<div class="
|
|
58
|
+
<div class="hero-banner vertical-flow">
|
|
59
59
|
<h1 class="headline"
|
|
60
60
|
id="always-put-your-best-"
|
|
61
61
|
>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Layout/Section/Background Background smoke-test 1`] = `
|
|
4
|
+
<div class="page">
|
|
5
|
+
<section class="section background--alt">
|
|
6
|
+
<figure class="background--image section__full"
|
|
7
|
+
aria-hidden="true"
|
|
8
|
+
>
|
|
9
|
+
<img src="https://picsum.photos/id/56/1642/560?grayscale"
|
|
10
|
+
alt
|
|
11
|
+
>
|
|
12
|
+
</figure>
|
|
13
|
+
<div class="section--xl">
|
|
14
|
+
<div class="section__header">
|
|
15
|
+
<h2>
|
|
16
|
+
Section with background image
|
|
17
|
+
</h2>
|
|
18
|
+
<a class="button button--dark"
|
|
19
|
+
href="#"
|
|
20
|
+
>
|
|
21
|
+
Learn more
|
|
22
|
+
</a>
|
|
23
|
+
</div>
|
|
24
|
+
<p>
|
|
25
|
+
A short description to help explain enough about the subject matter to encourage visitors to learn more.
|
|
26
|
+
</p>
|
|
27
|
+
</div>
|
|
28
|
+
</section>
|
|
29
|
+
</div>
|
|
30
|
+
`;
|
|
31
|
+
|
|
32
|
+
exports[`Layout/Section/Background Dark smoke-test 1`] = `
|
|
33
|
+
<div class="page">
|
|
34
|
+
<section class="section background--reverse">
|
|
35
|
+
<figure class="background--image section__full"
|
|
36
|
+
aria-hidden="true"
|
|
37
|
+
>
|
|
38
|
+
<img src="https://picsum.photos/id/56/1642/560?grayscale"
|
|
39
|
+
alt
|
|
40
|
+
>
|
|
41
|
+
</figure>
|
|
42
|
+
<div class="section--xl">
|
|
43
|
+
<div class="section__header">
|
|
44
|
+
<h2>
|
|
45
|
+
Section with background image
|
|
46
|
+
</h2>
|
|
47
|
+
<a class="button button--dark"
|
|
48
|
+
href="#"
|
|
49
|
+
>
|
|
50
|
+
Learn more
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
<p>
|
|
54
|
+
A short description to help explain enough about the subject matter to encourage visitors to learn more.
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
57
|
+
</section>
|
|
58
|
+
</div>
|
|
59
|
+
`;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Layout/Section/Breakouts Breakouts smoke-test 1`] = `
|
|
4
|
+
<div class="page">
|
|
5
|
+
<section class="section section--flow">
|
|
6
|
+
<p>
|
|
7
|
+
Default is container width, with an inline gutter for smaller screens.
|
|
8
|
+
</p>
|
|
9
|
+
</section>
|
|
10
|
+
<section class="section section__full section--flow">
|
|
11
|
+
<p>
|
|
12
|
+
Section can have children with different content widths;
|
|
13
|
+
</p>
|
|
14
|
+
<p class="section__narrow">
|
|
15
|
+
like the optimum content width with .section__narrow
|
|
16
|
+
</p>
|
|
17
|
+
<p class="section__feature">
|
|
18
|
+
or slightly larger feature widths with .section__feature
|
|
19
|
+
</p>
|
|
20
|
+
<p class="section__full">
|
|
21
|
+
or full width with .section__full
|
|
22
|
+
</p>
|
|
23
|
+
</section>
|
|
24
|
+
<section class="section section--flow">
|
|
25
|
+
<p>
|
|
26
|
+
Sections can be nested
|
|
27
|
+
</p>
|
|
28
|
+
<section class="section">
|
|
29
|
+
<p>
|
|
30
|
+
and have the same content width options are un-nested ones;
|
|
31
|
+
</p>
|
|
32
|
+
<p class="section__narrow">
|
|
33
|
+
like the optimum content widths with .section__narrow
|
|
34
|
+
</p>
|
|
35
|
+
<p class="section__feature">
|
|
36
|
+
or slightly larger feature widths with .section__feature
|
|
37
|
+
</p>
|
|
38
|
+
<p class="section__full">
|
|
39
|
+
or full width with .section__full
|
|
40
|
+
</p>
|
|
41
|
+
</section>
|
|
42
|
+
</section>
|
|
43
|
+
<section class="section section__narrow section--flow">
|
|
44
|
+
<p>
|
|
45
|
+
Sections can say for all children to have a certain width
|
|
46
|
+
</p>
|
|
47
|
+
<p>
|
|
48
|
+
by using .section__narrow or .section__feature or .section__full
|
|
49
|
+
</p>
|
|
50
|
+
<p>
|
|
51
|
+
on the parent.
|
|
52
|
+
</p>
|
|
53
|
+
</section>
|
|
54
|
+
<section class="section section--flow background--reverse">
|
|
55
|
+
<p>
|
|
56
|
+
Any section can have a background color, or utilise any of the section vertical spacing classes
|
|
57
|
+
</p>
|
|
58
|
+
<section class="section--bottom-l">
|
|
59
|
+
<p>
|
|
60
|
+
even children
|
|
61
|
+
</p>
|
|
62
|
+
</section>
|
|
63
|
+
<section class="section--l background--reset">
|
|
64
|
+
<p>
|
|
65
|
+
and ones with their own backgrounds.
|
|
66
|
+
</p>
|
|
67
|
+
</section>
|
|
68
|
+
</section>
|
|
69
|
+
<section class="section section--group">
|
|
70
|
+
<p>
|
|
71
|
+
Sections can be grouped together
|
|
72
|
+
</p>
|
|
73
|
+
</section>
|
|
74
|
+
<section class="section section__feature section--group">
|
|
75
|
+
<p>
|
|
76
|
+
even if they have different content widths.
|
|
77
|
+
</p>
|
|
78
|
+
</section>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Layout/Section/Flow Flow smoke-test 1`] = `
|
|
4
|
+
<div class="page">
|
|
5
|
+
<section class="section section--flow">
|
|
6
|
+
<p>
|
|
7
|
+
first section has top and bottom spacing
|
|
8
|
+
</p>
|
|
9
|
+
</section>
|
|
10
|
+
<section class="section section--flow">
|
|
11
|
+
<p>
|
|
12
|
+
section with normal flow
|
|
13
|
+
</p>
|
|
14
|
+
</section>
|
|
15
|
+
<section class="section section--flow">
|
|
16
|
+
<p>
|
|
17
|
+
section with normal flow
|
|
18
|
+
</p>
|
|
19
|
+
</section>
|
|
20
|
+
<section class="section section--group background--alt">
|
|
21
|
+
<p>
|
|
22
|
+
certain sections can be
|
|
23
|
+
</p>
|
|
24
|
+
</section>
|
|
25
|
+
<section class="section section--group background--alt">
|
|
26
|
+
<p>
|
|
27
|
+
grouped togther as siblings
|
|
28
|
+
</p>
|
|
29
|
+
</section>
|
|
30
|
+
<section class="section section--group background--alt">
|
|
31
|
+
<p>
|
|
32
|
+
with their own spacing rules
|
|
33
|
+
</p>
|
|
34
|
+
</section>
|
|
35
|
+
<section class="section section--flow">
|
|
36
|
+
<p>
|
|
37
|
+
section on it's own has top and bottom spacing
|
|
38
|
+
</p>
|
|
39
|
+
</section>
|
|
40
|
+
<section class="section section--group background--alt">
|
|
41
|
+
<p>
|
|
42
|
+
groups can be combined with flow
|
|
43
|
+
</p>
|
|
44
|
+
</section>
|
|
45
|
+
<section class="section section--flow section--group background--alt">
|
|
46
|
+
<p>
|
|
47
|
+
for standard spacing
|
|
48
|
+
</p>
|
|
49
|
+
</section>
|
|
50
|
+
<section class="section section--flow">
|
|
51
|
+
<p>
|
|
52
|
+
section after group own has top and bottom spacing
|
|
53
|
+
</p>
|
|
54
|
+
</section>
|
|
55
|
+
<section class="section section--flow">
|
|
56
|
+
<p>
|
|
57
|
+
section with normal flow
|
|
58
|
+
</p>
|
|
59
|
+
</section>
|
|
60
|
+
<section class="section section--flow background--alt">
|
|
61
|
+
<p>
|
|
62
|
+
section with background that breaks the flow, also has top and bottom spacing
|
|
63
|
+
</p>
|
|
64
|
+
</section>
|
|
65
|
+
<section class="section section--flow">
|
|
66
|
+
<p>
|
|
67
|
+
section after background own has top and bottom spacing
|
|
68
|
+
</p>
|
|
69
|
+
</section>
|
|
70
|
+
<section class="section section--flow">
|
|
71
|
+
<p>
|
|
72
|
+
section with normal flow
|
|
73
|
+
</p>
|
|
74
|
+
</section>
|
|
75
|
+
<section class="section section--group">
|
|
76
|
+
<p>
|
|
77
|
+
groups can be used normally for larger spacing
|
|
78
|
+
</p>
|
|
79
|
+
</section>
|
|
80
|
+
<section class="section section--group background--alt">
|
|
81
|
+
<p>
|
|
82
|
+
adding a background breaks the grouping
|
|
83
|
+
</p>
|
|
84
|
+
</section>
|
|
85
|
+
<section class="section section--group background--alt">
|
|
86
|
+
<p>
|
|
87
|
+
into a new group
|
|
88
|
+
</p>
|
|
89
|
+
</section>
|
|
90
|
+
</div>
|
|
91
|
+
`;
|
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Layout/Section Section smoke-test 1`] = `
|
|
4
|
-
<
|
|
5
|
-
<div class="
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
<div class="page">
|
|
5
|
+
<div class="section section--xl">
|
|
6
|
+
<div class="container">
|
|
7
|
+
<div class="section__header">
|
|
8
|
+
<h2 class>
|
|
9
|
+
Section name
|
|
10
|
+
</h2>
|
|
11
|
+
<a class="link link--more "
|
|
12
|
+
href="#"
|
|
13
|
+
>
|
|
14
|
+
<span>
|
|
15
|
+
See more content
|
|
16
|
+
</span>
|
|
17
|
+
<span class="icon icon--arrow-right ">
|
|
18
|
+
</span>
|
|
19
|
+
</a>
|
|
20
|
+
</div>
|
|
21
|
+
<p class="text--lede">
|
|
22
|
+
A short description to help explain enough about the subject matter to encourage visitors to learn more.
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
17
25
|
</div>
|
|
18
|
-
</
|
|
26
|
+
</div>
|
|
19
27
|
`;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{% endset %}
|
|
5
5
|
{% if link %}
|
|
6
6
|
{% set link %}
|
|
7
|
-
{% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title, more: link.more,
|
|
7
|
+
{% include '@mixtape/Atom/Link/twig/story-link.twig' with { href: link.href, title: link.title, more: link.more, iconEnd: link.iconEnd } only %}
|
|
8
8
|
{% endset %}
|
|
9
9
|
{% endif %}
|
|
10
10
|
{% if content %}
|
package/src/elements.ts
CHANGED
|
@@ -4,7 +4,7 @@ export { default as AccordionMobile } from "./Component/Accordion/Elements/Accor
|
|
|
4
4
|
export { default as AccordionDiv } from "./Component/Accordion/Elements/AccordionDiv"
|
|
5
5
|
export { default as Dialog } from "./Component/Dialog/Elements/Dialog"
|
|
6
6
|
export { default as DropMenu } from "./Component/DropMenu/Elements/DropMenu"
|
|
7
|
-
export { default as
|
|
7
|
+
export { default as ClosableAlert } from "./Component/GlobalAlert/Elements/ClosableAlert"
|
|
8
8
|
export { default as Sticky } from "./Component/Sticky/Elements/Sticky"
|
|
9
9
|
export { default as Tabs } from "./Component/Tabs/Elements/Tabs"
|
|
10
10
|
export { default as GlobalToggle } from "./Layout/Header/Elements/GlobalToggle"
|
package/dist/build/accordion.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer design-system.defaults{details summary{list-style-type:none}details summary:is(::-webkit-details-marker,::marker){display:none;content:""}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile){display:block}:where(:is(div.accordion,mx-accordiondiv)) .accordion__toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;font-size:inherit;background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial;border:medium none currentcolor;border:initial;padding:0;padding:initial}:where(:is(div.accordion,mx-accordiondiv)) .accordion__content[inert]{display:none}}@layer design-system.components{.accordion__title{margin-block-end:var(--spacing-m);display:flex;flex-flow:row wrap;gap:var(--spacing-s);align-items:center}.accordions__toggle-all{margin-inline-start:auto}.accordion{contain:layout}.accordion .accordion__toggle{cursor:pointer;inline-size:100%}.accordion:is(>h2,>h3,>h4,>h5,>h6){all:unset}.accordion--divided{border-block-end:1px solid var(--line-colour, var(--colour-border));border-block-end:var(--line-width, 1px) solid var(--line-colour, var(--colour-border))}.accordion--divided .accordion__toggle{padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:0;padding-inline:var(--horizontal-padding, 0);display:flex;justify-content:space-between;align-items:center}.accordion--divided .accordion__toggle .button--icon-only{flex-shrink:0;margin-inline-start:var(--spacing-xxs)}.accordion--divided:is([open],[data-open=true]) .accordion__toggle .button--icon-only{transform:rotate(180deg)}.accordion--divided:is([open],[data-open=true]) .accordion__content{border-block-start:1px solid var(--line-colour, var(--colour-border));border-block-start:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:0;padding-inline:var(--horizontal-padding, 0)}}@media print{.accordion .accordion__content{display:block!important}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{m as e}from"./chunks/utilities-Bzel_okZ.js";class t extends HTMLElement{constructor(){super(),this.handleOpen=()=>{this.details&&(this.details.open=!0)},this.handleClose=()=>{this.details&&(this.details.open=!1)},this.handleHash=()=>{const{hash:e}=window.location;e&&e===`#${this.details?.id}`&&this.handleOpen()},this.generatedId=()=>{const t=this.trigger?.textContent?.trim();return t?e(t):""},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.details||!this.trigger)return;const{signal:e}=this.controller;document.addEventListener("beforeprint",this.handleOpen,{signal:e}),document.addEventListener("afterprint",this.handleClose,{signal:e}),this.handleHash(),document.addEventListener("hashchange",this.handleHash,{signal:e})}disconnectedCallback(){this.controller.abort()}get details(){const e=this.querySelector("details");if(!e)throw new Error(`${this.localName} must contain a <details> element.`);return e.id=e.id||this.generatedId(),e}get trigger(){const e=this.querySelector("summary");if(!e)throw new Error(`${this.localName} must contain a <summary> element.`);return e}}customElements.define("mx-accordion",t);class s extends HTMLElement{constructor(){super(),this.handleClick=({target:e})=>{e===this.expandTrigger&&this.handleExpand(),e===this.collapseTrigger&&this.handleCollapse()},this.handleExpand=()=>{this.accordions.forEach((e=>e.open=!0)),this.expandTrigger.disabled=!0,this.collapseTrigger.disabled=!1},this.handleCollapse=()=>{this.accordions.forEach((e=>e.open=!1)),this.expandTrigger.disabled=!1,this.collapseTrigger.disabled=!0},this.handleToggle=()=>{this.expandTrigger.disabled=[...this.accordions].every((e=>!0===e.open)),this.collapseTrigger.disabled=[...this.accordions].every((e=>!0!==e.open))},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.accordions||!this.expandTrigger||!this.collapseTrigger)return;this.collapseTrigger.disabled=!0;const{signal:e}=this.controller;this.addEventListener("click",this.handleClick,{signal:e}),this.accordions.forEach((t=>t.addEventListener("toggle",this.handleToggle,{signal:e})))}disconnectedCallback(){this.controller.abort()}get accordions(){const e=this.querySelectorAll("details");if(!e.length)throw new Error(`${this.localName} must contain at least one <details> element.`);return e}get expandTrigger(){const e=this.querySelector(".accordions__toggle-all button[data-expand]");if(!e)throw new Error(`${this.localName} must contain a <button data-expand> element.`);return e}get collapseTrigger(){const e=this.querySelector(".accordions__toggle-all button[data-collapse]");if(!e)throw new Error(`${this.localName} must contain a <button data-collapse> element.`);return e}}customElements.define("mx-accordion-group",s);
|
package/dist/build/base.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layouts,design-system.components,design-system.utilities;@layer design-system.atoms{:where([class*=background--]){background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground))}.background--reset{--background: var(--colour-background);--foreground: var(--colour-foreground);--link-colour: var(--colour-primary);--line-colour: var(--colour-border)}.background--alt{--background: var(--colour-background-alt)}.background--primary{--background: var(--colour-primary);--foreground: var(--colour-foreground-reverse);--line-colour: var(--colour-border-reverse);--link-colour: var(--colour-primary-light)}.background--accent{--background: var(--colour-accent);--foreground: var(--colour-foreground-reverse);--line-colour: var(--colour-border-reverse);--link-colour: var(--colour-accent-light)}.background--image>img{-o-object-fit:cover;object-fit:cover;position:absolute;inline-size:100%;min-block-size:100%;filter:brightness(1) saturate(1.25) opacity(.5);filter:brightness(var(--bg-img-brightness, 1)) saturate(var(--bg-img-saturate, 1.25)) opacity(var(--bg-img-opacity, .5))}.background--reverse{--line-colour: var(--colour-border-reverse);--link-colour: var(--colour-primary-light);--background: var(--colour-background-reverse);--foreground: var(--colour-foreground-reverse)}.background--reverse .background--image{--bg-img-brightness: .45;--bg-img-opacity: 1}}@layer design-system.utilities{.animated--fade-in{animation:fade-in .5s var(--ease)}.animated--fade-out{animation:fade-out .5s var(--ease)}.animated--spin:before{animation:spin 2s linear infinite}.animated--scale-up{animation:scale-up .5s var(--ease)}.animated--scale-down{animation:scale-down .5s var(--ease)}}@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}@layer design-system.defaults{*,*:before,*:after{box-sizing:border-box;background-repeat:no-repeat}*{margin:0}:focus{scroll-padding-block-end:4vh}:focus-visible{--outline-size: max(.125rem, .15em);outline:max(.125rem,.15em) solid currentcolor;outline:var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentcolor);outline-offset:max(.125rem,.15em);outline-offset:var(--outline-offset, var(--outline-size))}html{block-size:100%;font-size:100%;font-family:var(--font-family);line-height:var(--line-height);scroll-behavior:smooth}.translated-rtl{direction:rtl}body{font-size:var(--font-size);color:var(--colour-foreground);accent-color:var(--colour-primary);text-rendering:optimizespeed;block-size:100%}:target,[id],.has-scroll-margin{scroll-margin-block-start:calc(0rem + var(--scroll-margin, var(--spacing-m)));scroll-margin-block-start:calc(var(--sticky-offset, 0rem) + var(--scroll-margin, var(--spacing-m)))}:is(b,strong){font-weight:var(--font-weight-bold)}a:where([href]){-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:max(.08em,1px);-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-underline-offset:.15em}a:where([href]):hover,a:where([href]):active{text-underline-offset:.2em;text-decoration-thickness:max(.09em,2px)}:is(ol,ul){padding-inline-start:var(--spacing-m)}[role=list]:is(ol,ul){list-style:none;padding-inline-start:0}dl{display:flex;flex-direction:column;gap:var(--spacing-xs)}dl div{display:flex;gap:var(--spacing-s)}p{text-wrap:pretty}}@layer design-system.utilities{.vertical-flow>:where(:not(:first-child)){margin-block-start:var(--flow-gap, var(--gap))}.vertical-flow>.vertical-flow__collapse{margin-block-start:0}.vertical-flow.rich-text>.text--lede{--flow-gap: var(--gap-xl)}.vertical-flow-flex{display:flex;flex-direction:column;align-items:flex-start;gap:var(--flow-gap, var(--gap))}.vertical-flow-flex>*{margin:0}.vertical-flow-flex>*.container{inline-size:100%}.vertical-flow-flex:is(ul,ol){padding-inline-start:unset;list-style:none}.horizontal-flow-flex{display:flex;flex-wrap:wrap;gap:var(--flow-gap, var(--gap))}.horizontal-flow-flex>*{margin:0}.horizontal-flow-flex:is(ul,ol){padding-inline-start:unset;list-style:none}}@layer design-system.defaults{:is(.headline,h1,.heading--xxl,h2,.heading--xl,h3,.heading--l,h4,.heading--m,h5,.heading--s,h6,.heading--xs){font-family:var(--heading-font-family, var(--font-family));line-height:var(--line-height-h);font-size:var(--heading-font-size, var(--font-size));font-weight:var(--heading-font-weight, var(--font-weight-bold));text-wrap:balance}@supports (font-size: 1cqi){:is(.headline,h1,.heading--xxl,h2,.heading--xl,h3,.heading--l,h4,.heading--m,h5,.heading--s){--font-min: calc( var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff, .3) );font-size:clamp(max(var(--base-font-size),var(--font-min)),var(--font-min) + 1cqi,var(--heading-font-size))}}.headline{--heading-font-size: var(--font-size-xxxl)}h1,.heading--xxl{--heading-font-size: var(--font-size-xxl)}h2,.heading--xl{--heading-font-size: var(--font-size-xl)}h3,.heading--l{--heading-font-size: var(--font-size-l)}h4,.heading--m{--heading-font-size: var(--font-size-m)}h5,.heading--s{--heading-font-size: var(--base-font-size)}h6,.heading--xs{--heading-font-size: var(--font-size-s)}}@layer design-system.defaults{blockquote{padding-inline-start:var(--line-gap, var(--gap));border-inline-start:6px solid var(--line-colour, var(--colour-border));border-inline-start:var(--line-width, 6px) solid var(--line-colour, var(--colour-border))}}@layer design-system.defaults{hr{display:block;block-size:0;border:0;border-block-start:1px solid var(--line-colour, var(--colour-border));border-block-start:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));margin-block:var(--line-gap, var(--spacing-m))}}@layer design-system.defaults{a:where([href]):is(.link,.link--more,.link--external),.rich-text a:where([href]:not([class])){color:var(--link-colour, var(--colour-primary));transition:color .2s var(--ease)}a:where([href]):is(.link,.link--more,.link--external):focus-visible,.rich-text a:where([href]:not([class])):focus-visible{outline-offset:var(--spacing-xxxs)}a:where([href]).link--external{margin-inline-end:var(--spacing-xxxs);display:inline-flex;gap:var(--spacing-xxxs);align-items:center}a.link--external:where([href]):after{content:"";display:inline-block;-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='M15 0H8v2h4.6L6.3 8.3l1.4 1.4L14 3.4V8h2V1c0-.6-.4-1-1-1z'/%3E%3Cpath d='M14 16H1c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h4v2H2v11h11v-3h2v4c0 .6-.4 1-1 1z'/%3E%3C/svg%3E");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='M15 0H8v2h4.6L6.3 8.3l1.4 1.4L14 3.4V8h2V1c0-.6-.4-1-1-1z'/%3E%3Cpath d='M14 16H1c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h4v2H2v11h11v-3h2v4c0 .6-.4 1-1 1z'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;block-size:var(--spacing-s);inline-size:var(--spacing-s);background-color:currentcolor;transition:transform .5s var(--ease)}a.link--external:where([href]):hover:after{transform:translateY(-3px)}a:where([href]).link--more{font-weight:var(--font-weight-bold);display:inline-flex;gap:var(--spacing-s)}}@layer design-system.atoms{:is(.text--section-headline,.text--embellished-headline,.text--lede,.text--xs,.text--s,.text--m,.text--l,.text--xl,.text--xxl,.text--xxxl,.text--fluid){font-size:var(--font-size)}@supports (font-size: 1cqi){:is(.text--section-headline,.text--lede,.text--m,.text--l,.text--xl,.text--xxl,.text--xxxl,.text--fluid){--font-min: calc( var(--font-size) - var(--font-size) * var(--font-size-diff, .3) );font-size:clamp(max(var(--base-font-size),var(--font-min)),var(--font-min) + 1cqi,var(--font-size))}}.text--section-headline{--font-size: var(--font-size-m);font-weight:var(--heading-font-weight, var(--font-weight-bold));font-family:var(--heading-font-family, var(--font-family));line-height:var(--line-height-h);color:var(--foreground, var(--colour-foreground-alt));margin-block-start:0;text-wrap:balance}.text--section-headline+:is(h2,h3){margin-block-start:var(--spacing-xxxxs)!important}.text--embellished-headline{--font-size: var(--font-size-s);text-transform:uppercase;position:relative;font-weight:var(--heading-font-weight, var(--font-weight-bold));font-family:var(--heading-font-family, var(--font-family));line-height:var(--line-height-h);margin-block:0 var(--spacing-l);text-wrap:balance}.text--embellished-headline:after{content:"";display:block;position:absolute;inline-size:var(--spacing-xxxl);block-size:3px;background-color:var(--colour-primary);inset-block-start:var(--gap)}.text--lede{--font-size: var(--font-size-sm)}.text--xxxl{--font-size: var(--font-size-xxxl);line-height:var(--line-height-h)}.text--xxl{--font-size: var(--font-size-xxl);line-height:var(--line-height-h)}.text--xl{--font-size: var(--font-size-xl);line-height:var(--line-height-h)}.text--l{--font-size: var(--font-size-l);line-height:var(--line-height-h)}.text--m{--font-size: var(--font-size-m)}.text--s{--font-size: var(--font-size-s)}.text--xs{--font-size: var(--font-size-xs)}}@layer design-system.utilities{.text--left{text-align:start}.text--right{text-align:end}.text--center{text-align:center}}@layer design-system.utilities{.spacing--reset{padding:0!important}.spacing--top-reset{padding-block-start:0!important}.spacing--bottom-reset{padding-block-end:0!important}.spacing--left-reset{padding-inline-start:0!important}.spacing--right-reset{padding-inline-end:0!important}.spacing--xxs{padding:var(--spacing-xxs)}.spacing--top-xxs{padding-block-start:var(--spacing-xxs)}.spacing--bottom-xxs{padding-block-end:var(--spacing-xxs)}.spacing--left-xxs{padding-inline-start:var(--spacing-xxs)}.spacing--right-xxs{padding-inline-end:var(--spacing-xxs)}.spacing--xs{padding:var(--spacing-xs)}.spacing--top-xs{padding-block-start:var(--spacing-xs)}.spacing--bottom-xs{padding-block-end:var(--spacing-xs)}.spacing--left-xs{padding-inline-start:var(--spacing-xs)}.spacing--right-xs{padding-inline-end:var(--spacing-xs)}.spacing--s{padding:var(--spacing-s)}.spacing--top-s{padding-block-start:var(--spacing-s)}.spacing--bottom-s{padding-block-end:var(--spacing-s)}.spacing--left-s{padding-inline-start:var(--spacing-s)}.spacing--right-s{padding-inline-end:var(--spacing-s)}.spacing--m{padding:var(--spacing-m)}.spacing--top-m{padding-block-start:var(--spacing-m)}.spacing--bottom-m{padding-block-end:var(--spacing-m)}.spacing--left-m{padding-inline-start:var(--spacing-m)}.spacing--right-m{padding-inline-end:var(--spacing-m)}.spacing--l{padding:var(--spacing-l)}.spacing--top-l{padding-block-start:var(--spacing-l)}.spacing--bottom-l{padding-block-end:var(--spacing-l)}.spacing--left-l{padding-inline-start:var(--spacing-l)}.spacing--right-l{padding-inline-end:var(--spacing-l)}.spacing--xl{padding:var(--spacing-xl)}.spacing--top-xl{padding-block-start:var(--spacing-xl)}.spacing--bottom-xl{padding-block-end:var(--spacing-xl)}.spacing--left-xl{padding-inline-start:var(--spacing-xl)}.spacing--right-xl{padding-inline-end:var(--spacing-xl)}.spacing--xxl{padding:var(--spacing-xxl)}.spacing--top-xxl{padding-block-start:var(--spacing-xxl)}.spacing--bottom-xxl{padding-block-end:var(--spacing-xxl)}.spacing--left-xxl{padding-inline-start:var(--spacing-xxl)}.spacing--right-xxl{padding-inline-end:var(--spacing-xxl)}.spacing--xxxl{padding:var(--spacing-xxxl)}.spacing--top-xxxl{padding-block-start:var(--spacing-xxxl)}.spacing--bottom-xxxl{padding-block-end:var(--spacing-xxxl)}.spacing--left-xxxl{padding-inline-start:var(--spacing-xxxl)}.spacing--right-xxxl{padding-inline-end:var(--spacing-xxxl)}.spacing--xxxxl{padding:var(--spacing-xxxxl)}.spacing--top-xxxxl{padding-block-start:var(--spacing-xxxxl)}.spacing--bottom-xxxxl{padding-block-end:var(--spacing-xxxxl)}.spacing--left-xxxxl{padding-inline-start:var(--spacing-xxxxl)}.spacing--right-xxxxl{padding-inline-end:var(--spacing-xxxxl)}.spacing--ul{padding:var(--spacing-ul)}.spacing--top-ul{padding-block-start:var(--spacing-ul)}.spacing--bottom-ul{padding-block-end:var(--spacing-ul)}.spacing--left-ul{padding-inline-start:var(--spacing-ul)}.spacing--right-ul{padding-inline-end:var(--spacing-ul)}.spacing--uul{padding:var(--spacing-uul)}.spacing--top-uul{padding-block-start:var(--spacing-uul)}.spacing--bottom-uul{padding-block-end:var(--spacing-uul)}.spacing--left-uul{padding-inline-start:var(--spacing-uul)}.spacing--right-uul{padding-inline-end:var(--spacing-uul)}.spacing--uuul{padding:var(--spacing-uuul)}.spacing--top-uuul{padding-block-start:var(--spacing-uuul)}.spacing--bottom-uuul{padding-block-end:var(--spacing-uuul)}.spacing--left-uuul{padding-inline-start:var(--spacing-uuul)}.spacing--right-uuul{padding-inline-end:var(--spacing-uuul)}}@layer design-system.defaults{figure{margin:0;display:table;max-inline-size:100%}figure img{inline-size:100%;vertical-align:baseline}figcaption{font-size:var(--caption-font-size, var(--font-size-xs));line-height:var(--caption-line-height, var(--line-height-h));caption-side:bottom;display:table-caption}img{vertical-align:text-bottom;max-inline-size:100%;block-size:auto}svg:not([fill]){fill:currentcolor}}@layer design-system.atoms{@media (min-width: 540px){:is(.media--left,.media--right,.media--center){display:table;max-inline-size:50%;margin-block-end:var(--spacing-s)}:is(.media--left,.media--right,.media--center):first-child{margin-block-start:0}:is(.media--left,.media--right,.media--center):first-child+*{margin-block-start:0!important}:is(.media--left,.media--right,.media--center) figcaption{display:table-caption;caption-side:bottom}}.media--center{margin-inline:auto}@media (min-width: 540px){:is(.media--left,[dir=rtl] .media--right,.translated-rtl .media--right){float:left;margin-inline:0 var(--spacing-m)}}@media (min-width: 540px){:is(.media--right,[dir=rtl] .media--left,.translated-rtl .media--left){float:right;margin-inline:var(--spacing-m) 0}}}@layer design-system.defaults{.video,.video :is(embed,object,iframe){aspect-ratio:16 / 9;block-size:100%;inline-size:100%}}@layer design-system.defaults{table{inline-size:100%;border-collapse:collapse;margin:0}table th{font-weight:var(--font-weight-bold);text-align:start}table :is(td,th){padding:var(--spacing-xxs);border-block-end:1px solid var(--line-colour, var(--colour-border));border-block-end:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));vertical-align:top}table thead :is(td,th){border-color:currentcolor}.table--flush :is(td,th):first-child{padding-inline-start:0}.table--flush :is(td,th):last-child{padding-inline-end:0}.table--small :is(td,th){font-size:var(--font-size-s);line-height:var(--line-height-h)}.table--striped tbody tr:nth-child(2n) :is(td,th){background-color:var(--colour-background-alt)}.table--responsive{max-inline-size:100%}@media (max-width: 719.98px){.table--responsive{overflow-y:scroll;-webkit-overflow-scrolling:touch;box-shadow:var(--box-shadow) inset}.table--responsive table{inline-size:100%;margin-block:0;margin-inline:var(--spacing-s)}.table--responsive table td{min-inline-size:20ch}}}@media print{.contextual{display:none}.rich-text{max-inline-size:100%}figure.image--breakout{max-inline-size:500px;margin-inline-start:0}figure.image--breakout figcaption{max-inline-size:100%}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer design-system.components{.nav--breadcrumb{--nav-font-size: var(--font-size-s);position:relative;z-index:1;overflow:auto;white-space:nowrap}.nav--breadcrumb>ul{gap:var(--breadcrumb-gap, var(--spacing-xxxxs))}.nav--breadcrumb>ul>li{color:var( --breadcrumb-foreground, var(--foreground, var(--colour-foreground-alt)) );display:flex;align-items:center}.nav--breadcrumb>ul>li:where(:not(:last-child)):after{content:"";display:block;vertical-align:middle;-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");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");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;block-size:var(--spacing-m);inline-size:var(--spacing-m);background-color:currentcolor}[dir=rtl] .nav--breadcrumb>ul>li:after,.translated-rtl .nav--breadcrumb>ul>li:after{transform:rotate(180deg)}}
|
package/dist/build/button.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer design-system.atoms{.button{--outline-offset: .0625rem;--outline-width: .25rem;display:inline-flex;inline-size:-moz-fit-content;inline-size:fit-content;gap:var(--button-gap, var(--spacing-s));font-size:var(--button-font-size, var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family);line-height:var(--line-height-ui);border:2px solid var(--button-line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--button-line-colour, var(--colour-border));border-radius:var(--radius, var(--border-radius-l));padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:var(--horizontal-padding, var(--spacing-m));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));text-decoration-line:none;transition:.2s color,.2s background-color,.2s border-color}.button:hover{cursor:pointer;text-decoration-line:none}.button:disabled{cursor:not-allowed;opacity:.3}.button--full-width{inline-size:100%;justify-content:center}.button--large{--vertical-padding: var(--spacing-s);--horizontal-padding: var(--spacing-l)}.button--small{--button-font-size: var(--font-size-s);--vertical-padding: var(--spacing-xxxs);--horizontal-padding: var(--spacing-s)}.button--icon-only{inline-size:var(--spacing-xl);block-size:var(--spacing-xl);padding:0;border-radius:var(--border-radius-round);overflow:hidden;flex-wrap:wrap}.button--icon-only:before{inline-size:100%;block-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}}@layer design-system.atoms{.button--dark{--button-line-colour: var(--colour-primary);--background: var(--colour-primary);--foreground: var(--colour-foreground-reverse)}.button--dark.button--outline{--background: transparent;--foreground: var(--colour-primary)}.button--light{border:transparent;color:var(--link-colour, var(--colour-primary));text-decoration-line:underline}.button--light:hover{text-decoration-line:underline}.button--destructive{--button-line-colour: var(--colour-error-foreground);--background: var(--colour-error-foreground);--foreground: var(--colour-foreground-reverse)}.button--destructive.button--outline{--background: transparent;--foreground: var(--colour-error-foreground)}.button--white{--button-line-colour: var(--colour-foreground-reverse);--background: var(--colour-foreground-reverse);--foreground: var(--colour-foreground)}.button--white.button--outline{--background: transparent;--foreground: var(--colour-foreground-reverse)}}
|
package/dist/build/callout.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer design-system.components{.callout{padding-inline-start:var(--line-gap, var(--gap));border-inline-start:6px solid var(--line-colour, var(--colour-primary));border-inline-start:var(--line-width, 6px) solid var(--line-colour, var(--colour-primary))}}
|
package/dist/build/card.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer design-system.components{.card{display:grid;grid-template:"media" auto "content" 1fr / 1fr;grid-gap:var(--card-gap, var(--gap));gap:var(--card-gap, var(--gap))}@container (min-width: 720px){.card{--card-gap: var(--gap-l);grid-template:"media content" 1fr / 1fr 1fr;align-items:center}.card .card__content{justify-content:center}}@container (min-width: 946px){.card{--card-gap: 6rem}}@container (min-width: 720px){.card.card--right{grid-template-areas:"content media"}}.card[class*=background--]{border-radius:var(--border-radius)}.card[class*=background--] .card__content{padding-inline:var(--spacing-s);padding-block-end:var(--spacing-s)}@container (min-width: 720px){.card[class*=background--] .card__content{padding-block-start:var(--spacing-s);padding-inline-start:0}}@container (min-width: 720px){.card.card--right[class*=background--]{padding-inline:var(--spacing-s) 0}}.card .card__content{grid-area:content}.card :is(.card__media,figure){grid-area:media;display:grid;margin:auto;position:relative;inline-size:100%}.card :is(.card__media,figure) img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);-o-object-fit:cover;object-fit:cover;display:block}.card :is(.card__media,figure) .skeleton--bg{aspect-ratio:var(--ratio)}.card .link-list{inline-size:100%}}@layer design-system.components{.grid:has(>*:nth-child(2):last-child)>:is(.card,.container:has(.card)){inline-size:100%;max-inline-size:37ch;max-inline-size:var(--max-card-width, 37ch);margin-inline:auto}}@layer design-system.components{a.card[href]:hover{color:inherit}.card--clickable{position:relative}.card--clickable:focus-within{border-radius:var(--border-radius);outline:var(--outline-width) var(--outline-style) var(--outline-color);outline-offset:2px}.card--clickable :is(a[href],button):focus-visible{outline:none}.card--clickable a:after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{m as t}from"./utilities-Bzel_okZ.js";class e{constructor(e,i,s,r=document){if(this.init=()=>{if(Object.prototype.hasOwnProperty.call(this.trigger,"disclosureWidget"))return;const{attribute:t,setInitialAttribute:e}=this.options;this.trigger.disclosureWidget=this,e&&this.element.setAttribute(t,""),this.attach()},this.handleToggle=()=>{const{attribute:t,setInitialAttribute:e}=this.options;this.element.toggleAttribute(t);const i=this.element.hasAttribute(t);this.isOpen=e?!i:i,this.trigger.setAttribute("aria-expanded",String(this.isOpen));const s=new CustomEvent("disclosure-toggle",{bubbles:!0,cancelable:!0,detail:{isOpen:this.isOpen,id:this.id,options:this.options,target:this.element}});this.trigger.dispatchEvent(s)},this.handleMouse=t=>{const{currentTarget:e,type:i,relatedTarget:s}=t;if("mouseover"===i||"mouseout"===i){const t=this.trigger.parentNode;if(t!==e||t.contains(s))return}else if(this.trigger!==e)return;const{shouldPreventDefault:r}=this.options;this.handleToggle(),r&&(t.preventDefault(),t.stopPropagation())},this.handleKeyboard=t=>{const{key:e,target:i}=t;if(this.trigger!==i)return;const{isOpen:s}=this,{shouldPreventDefault:r}=this.options;switch(e){case"ArrowDown":case"Enter":s||this.handleToggle(),r&&t.preventDefault();break;case"ArrowUp":case"Escape":s&&this.handleToggle(),r&&t.preventDefault()}},this.attach=()=>{if(this.attached)return;const{clickEvent:t}=this.options;if("mouseover"===t){const t=this.trigger.parentNode;t.addEventListener("mouseover",this.handleMouse),t.addEventListener("mouseout",this.handleMouse)}else this.trigger.addEventListener("click",this.handleMouse);this.trigger.addEventListener("keydown",this.handleKeyboard),this.trigger.setAttribute("aria-expanded","false"),this.trigger.hasAttribute("aria-controls")||this.trigger.setAttribute("aria-controls",this.id),this.attached=!0},this.detach=()=>{if(!this.attached)return;this.isOpen&&this.handleToggle();const{clickEvent:t}=this.options;if("mouseover"===t){const t=this.trigger.parentNode;t.removeEventListener("mouseover",this.handleMouse),t.removeEventListener("mouseout",this.handleMouse)}else this.trigger.removeEventListener("click",this.handleMouse);this.trigger.removeEventListener("keydown",this.handleKeyboard),this.trigger.removeAttribute("aria-expanded"),this.attached=!1},this.generatedId=()=>{const e=this.trigger?.textContent?.trim();return e?t(e):""},!e)throw new Error("toggle is required.");if(!i)throw new Error("element is required.");this.options={attribute:"inert",shouldPreventDefault:!0,setInitialAttribute:!0,clickEvent:"click",...s},this.context=r||document,this.trigger=e,this.element=i,this.id=this.element.id||this.generatedId()}}export{e as D};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
class e{constructor(){this.attachPopup=(e,t)=>{window.Mixtape.Popups.push({id:e,closefn:t})},this.detachPopup=e=>{window.Mixtape.Popups=window.Mixtape.Popups.filter((t=>t.id!==e))},this.attachMenu=(e,t)=>{window.Mixtape.Menu={context:e,items:t}},this.detachMenu=()=>{window.Mixtape.Menu=null},this.getNextFocusableMenuItem=(e,t=!1)=>t?0===e?window.Mixtape.Menu.items.length-1:e-1:window.Mixtape.Menu.items.length>e+1?e+1:0,this.moveFocus=(e,t=!1)=>{if(!window.Mixtape.Menu.items)return;let i=0;window.Mixtape.Menu.items.forEach(((t,n)=>{t===e&&(i=n)}));let n=this.getNextFocusableMenuItem(i,t),o=window.Mixtape.Menu.items[n].getAttribute("tabindex");if("-1"!==o)window.Mixtape.Menu.items[n].focus();else{for(;"-1"===o;)n=this.getNextFocusableMenuItem(n,t),o=window.Mixtape.Menu.items[n].getAttribute("tabindex");window.Mixtape.Menu.items[n].focus()}window.Mixtape.Menu.active=n},this.handleGlobalClick=({target:e})=>{const t=window.Mixtape.Popups?window.Mixtape.Popups[window.Mixtape.Popups.length-1]:null;if(t&&t.id){const i=document.querySelector(`#${t.id}`).parentElement;if(i&&(e===i||i?.contains(e)))return;t.closefn()}},this.handleGlobalKeydown=e=>{const t=window.Mixtape.Popups?window.Mixtape.Popups[window.Mixtape.Popups.length-1]:null,i=e.target;switch(e.key){case"Escape":t&&t.closefn();break;case"ArrowDown":case"ArrowRight":window.Mixtape.Menu?.items&&(e.preventDefault(),this.moveFocus(i));break;case"ArrowUp":case"ArrowLeft":window.Mixtape.Menu?.items&&(e.preventDefault(),this.moveFocus(i,!0))}},this.attachEventListeners=e=>{window.addEventListener("click",this.handleGlobalClick,{signal:e}),window.addEventListener("keydown",this.handleGlobalKeydown,{signal:e})},window.Mixtape=window.Mixtape||{},window.Mixtape.Popups=window.Mixtape.Popups||[],window.Mixtape.Menu=window.Mixtape.Menu||{}}}export{e as K};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const t=Math.min,e=Math.max,n=Math.round,o=t=>({x:t,y:t});function i(t){return t.split("-")[0]}function r(t){return["top","bottom"].includes(i(t))?"y":"x"}function c(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function l(t,e,n){let{reference:o,floating:c}=t;const l=r(e),s=function(t){return function(t){return"x"===t?"y":"x"}(r(t))}(e),f=function(t){return"y"===t?"height":"width"}(s),u=i(e),a="y"===l,h=o.x+o.width/2-c.width/2,d=o.y+o.height/2-c.height/2,p=o[f]/2-c[f]/2;let g;switch(u){case"top":g={x:h,y:o.y-c.height};break;case"bottom":g={x:h,y:o.y+o.height};break;case"right":g={x:o.x+o.width,y:d};break;case"left":g={x:o.x-c.width,y:d};break;default:g={x:o.x,y:o.y}}switch(function(t){return t.split("-")[1]}(e)){case"start":g[s]-=p*(n&&a?-1:1);break;case"end":g[s]+=p*(n&&a?-1:1)}return g}function s(t){return a(t)?(t.nodeName||"").toLowerCase():"#document"}function f(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function u(t){var e;return null==(e=(a(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function a(t){return t instanceof Node||t instanceof f(t).Node}function h(t){return t instanceof Element||t instanceof f(t).Element}function d(t){return t instanceof HTMLElement||t instanceof f(t).HTMLElement}function p(t){return!(typeof ShadowRoot>"u")&&(t instanceof ShadowRoot||t instanceof f(t).ShadowRoot)}function g(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=b(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function y(t){return["table","td","th"].includes(s(t))}function m(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch{return!1}}))}function w(t){const e=x(),n=h(t)?b(t):t;return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function x(){return!(typeof CSS>"u"||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function v(t){return["html","body","#document"].includes(s(t))}function b(t){return f(t).getComputedStyle(t)}function L(t){return h(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function T(t){if("html"===s(t))return t;const e=t.assignedSlot||t.parentNode||p(t)&&t.host||u(t);return p(e)?e.host:e}function R(t){const e=T(t);return v(e)?t.ownerDocument?t.ownerDocument.body:t.body:d(e)&&g(e)?e:R(e)}function E(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=R(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),c=f(i);return r?e.concat(c,c.visualViewport||[],g(i)?i:[],c.frameElement&&n?E(c.frameElement):[]):e.concat(i,E(i,[],n))}function S(t){const e=b(t);let o=parseFloat(e.width)||0,i=parseFloat(e.height)||0;const r=d(t),c=r?t.offsetWidth:o,l=r?t.offsetHeight:i,s=n(o)!==c||n(i)!==l;return s&&(o=c,i=l),{width:o,height:i,$:s}}function C(t){return h(t)?t:t.contextElement}function D(t){const e=C(t);if(!d(e))return o(1);const i=e.getBoundingClientRect(),{width:r,height:c,$:l}=S(e);let s=(l?n(i.width):i.width)/r,f=(l?n(i.height):i.height)/c;return(!s||!Number.isFinite(s))&&(s=1),(!f||!Number.isFinite(f))&&(f=1),{x:s,y:f}}const k=o(0);function P(t){const e=f(t);return x()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:k}function H(t,e,n,i){void 0===e&&(e=!1),void 0===n&&(n=!1);const r=t.getBoundingClientRect(),l=C(t);let s=o(1);e&&(i?h(i)&&(s=D(i)):s=D(t));const u=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==f(t))&&e}(l,n,i)?P(l):o(0);let a=(r.left+u.x)/s.x,d=(r.top+u.y)/s.y,p=r.width/s.x,g=r.height/s.y;if(l){const t=f(l),e=i&&h(i)?f(i):i;let n=t,o=n.frameElement;for(;o&&i&&e!==n;){const t=D(o),e=o.getBoundingClientRect(),i=b(o),r=e.left+(o.clientLeft+parseFloat(i.paddingLeft))*t.x,c=e.top+(o.clientTop+parseFloat(i.paddingTop))*t.y;a*=t.x,d*=t.y,p*=t.x,g*=t.y,a+=r,d+=c,n=f(o),o=n.frameElement}}return c({width:p,height:g,x:a,y:d})}function W(t){return H(u(t)).left+L(t).scrollLeft}function F(t,n,i){let r;if("viewport"===n)r=function(t,e){const n=f(t),o=u(t),i=n.visualViewport;let r=o.clientWidth,c=o.clientHeight,l=0,s=0;if(i){r=i.width,c=i.height;const t=x();(!t||t&&"fixed"===e)&&(l=i.offsetLeft,s=i.offsetTop)}return{width:r,height:c,x:l,y:s}}(t,i);else if("document"===n)r=function(t){const n=u(t),o=L(t),i=t.ownerDocument.body,r=e(n.scrollWidth,n.clientWidth,i.scrollWidth,i.clientWidth),c=e(n.scrollHeight,n.clientHeight,i.scrollHeight,i.clientHeight);let l=-o.scrollLeft+W(t);const s=-o.scrollTop;return"rtl"===b(i).direction&&(l+=e(n.clientWidth,i.clientWidth)-r),{width:r,height:c,x:l,y:s}}(u(t));else if(h(n))r=function(t,e){const n=H(t,!0,"fixed"===e),i=n.top+t.clientTop,r=n.left+t.clientLeft,c=d(t)?D(t):o(1);return{width:t.clientWidth*c.x,height:t.clientHeight*c.y,x:r*c.x,y:i*c.y}}(n,i);else{const e=P(t);r={...n,x:n.x-e.x,y:n.y-e.y}}return c(r)}function V(t,e){const n=T(t);return!(n===e||!h(n)||v(n))&&("fixed"===b(n).position||V(n,e))}function B(t,e){const n=e.get(t);if(n)return n;let o=E(t,[],!1).filter((t=>h(t)&&"body"!==s(t))),i=null;const r="fixed"===b(t).position;let c=r?T(t):t;for(;h(c)&&!v(c);){const e=b(c),n=w(c);!n&&"fixed"===e.position&&(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||g(c)&&!n&&V(t,c))?o=o.filter((t=>t!==c)):i=e,c=T(c)}return e.set(t,o),o}function M(t,e,n){const i=d(e),r=u(e),c="fixed"===n,l=H(t,!0,c,e);let f={scrollLeft:0,scrollTop:0};const a=o(0);if(i||!i&&!c)if(("body"!==s(e)||g(r))&&(f=L(e)),i){const t=H(e,!0,c,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else r&&(a.x=W(r));return{x:l.left+f.scrollLeft-a.x,y:l.top+f.scrollTop-a.y,width:l.width,height:l.height}}function N(t){return"static"===b(t).position}function $(t,e){return d(t)&&"fixed"!==b(t).position?e?e(t):t.offsetParent:null}function A(t,e){const n=f(t);if(m(t))return n;if(!d(t)){let e=T(t);for(;e&&!v(e);){if(h(e)&&!N(e))return e;e=T(e)}return n}let o=$(t,e);for(;o&&y(o)&&N(o);)o=$(o,e);return o&&v(o)&&N(o)&&!w(o)?n:o||function(t){let e=T(t);for(;d(e)&&!v(e);){if(w(e))return e;if(m(e))return null;e=T(e)}return null}(t)||n}const O={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:i,strategy:r}=t;const c="fixed"===r,l=u(i),f=!!e&&m(e.floating);if(i===l||f&&c)return n;let a={scrollLeft:0,scrollTop:0},h=o(1);const p=o(0),y=d(i);if((y||!y&&!c)&&(("body"!==s(i)||g(l))&&(a=L(i)),d(i))){const t=H(i);h=D(i),p.x=t.x+i.clientLeft,p.y=t.y+i.clientTop}return{width:n.width*h.x,height:n.height*h.y,x:n.x*h.x-a.scrollLeft*h.x+p.x,y:n.y*h.y-a.scrollTop*h.y+p.y}},getDocumentElement:u,getClippingRect:function(n){let{element:o,boundary:i,rootBoundary:r,strategy:c}=n;const l=[..."clippingAncestors"===i?m(o)?[]:B(o,this._c):[].concat(i),r],s=l[0],f=l.reduce(((n,i)=>{const r=F(o,i,c);return n.top=e(r.top,n.top),n.right=t(r.right,n.right),n.bottom=t(r.bottom,n.bottom),n.left=e(r.left,n.left),n}),F(o,s,c));return{width:f.right-f.left,height:f.bottom-f.top,x:f.left,y:f.top}},getOffsetParent:A,getElementRects:async function(t){const e=this.getOffsetParent||A,n=this.getDimensions,o=await n(t.floating);return{reference:M(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=S(t);return{width:e,height:n}},getScale:D,isElement:h,isRTL:function(t){return"rtl"===b(t).direction}},X=(t,e,n)=>{const o=new Map,i={platform:O,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:c}=n,s=r.filter(Boolean),f=await(null==c.isRTL?void 0:c.isRTL(e));let u=await c.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:h}=l(u,o,f),d=o,p={},g=0;for(let n=0;n<s.length;n++){const{name:r,fn:y}=s[n],{x:m,y:w,data:x,reset:v}=await y({x:a,y:h,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:u,platform:c,elements:{reference:t,floating:e}});a=m??a,h=w??h,p={...p,[r]:{...p[r],...x}},v&&g<=50&&(g++,"object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(u=!0===v.rects?await c.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:a,y:h}=l(u,d,f))),n=-1)}return{x:a,y:h,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})};class Y{constructor(t){this.popover=t,this.trigger=document.querySelector(`[popovertarget="${t.getAttribute("id")}"`),this.positionPopover=this.positionPopover.bind(this),this.popover.addEventListener("toggle",this.positionPopover)}positionPopover=({newState:t})=>{"open"===t&&X(this.trigger,this.popover,{placement:"bottom-start"}).then((({x:t,y:e})=>{this.popover.style.insetInlineStart=`${t}px`,this.popover.style.insetBlockStart=`${e}px`}))}}export{Y as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var e=class extends Event{oldState;newState;constructor(e,{oldState:t="",newState:n="",...o}={}){super(e,o),this.oldState=String(t||""),this.newState=String(n||"")}},t=new WeakMap;function n(n,o,r){t.set(n,setTimeout((()=>{t.has(n)&&n.dispatchEvent(new e("toggle",{cancelable:!1,oldState:o,newState:r}))}),0))}var o=globalThis.ShadowRoot||function(){},r=globalThis.HTMLDialogElement||function(){},i=new WeakMap,a=new WeakMap,s=new WeakMap;function c(e){return s.get(e)||"hidden"}var l=new WeakMap;function p(e,t){return!("auto"!==e.popover&&"manual"!==e.popover||!e.isConnected||t&&"showing"!==c(e)||!t&&"hidden"!==c(e)||e instanceof r&&e.hasAttribute("open")||document.fullscreenElement===e)}function u(e){return e?Array.from(a.get(e.ownerDocument)||[]).indexOf(e)+1:0}function f(e){const t=g(e),n=function(e){for(;e;){const t=e.popoverTargetElement;if(t instanceof HTMLElement)return t;if((e=e.parentElement||h(e))instanceof o&&(e=e.host),e instanceof Document)return}}(e);return u(t)>u(n)?t:n}function d(e){const t=a.get(e);for(const e of t||[]){if(e.isConnected)return e;t.delete(e)}return null}function h(e){return"function"==typeof e.getRootNode?e.getRootNode():e.parentNode?h(e.parentNode):e}function g(e){for(;e;){if(e instanceof HTMLElement&&"auto"===e.popover&&"showing"===s.get(e))return e;if((e=e instanceof Element&&e.assignedSlot||e.parentElement||h(e))instanceof o&&(e=e.host),e instanceof Document)return}}function m(e){return!(e.hidden||e instanceof o||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&"hidden"===e.type||e instanceof HTMLAnchorElement&&""===e.href)&&("number"==typeof e.tabIndex&&-1!==e.tabIndex)}function v(e){(function(e){if(e.shadowRoot&&!0!==e.shadowRoot.delegatesFocus)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let n=t.querySelector("[autofocus]");if(n)return n;{const e=t.querySelectorAll("slot");for(const t of e){const e=t.assignedElements({flatten:!0});for(const t of e){if(t.hasAttribute("autofocus"))return t;if(n=t.querySelector("[autofocus]"),n)return n}}}const o=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT);let r=o.currentNode;for(;r;){if(m(r))return r;r=o.nextNode()}})(e)?.focus()}var w=new WeakMap;function b(t){if(!p(t,!1))return;const o=t.ownerDocument;if(!t.dispatchEvent(new e("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!p(t,!1))return;let r=!1;if("auto"===t.popover){const e=t.getAttribute("popover"),n=function(e){const t=new Map;let n=0;for(const o of a.get(e.ownerDocument)||[])t.set(o,n),n+=1;t.set(e,n),n+=1;let o=null;return function(e){const n=g(e);if(null===n)return null;const r=t.get(n);(null===o||t.get(o)<r)&&(o=n)}(e.parentElement||h(e)),o}(t)||o;if(S(n,!1,!0),e!==t.getAttribute("popover")||!p(t,!1))return}d(o)||(r=!0),w.delete(t);const c=o.activeElement;t.classList.add(":popover-open"),s.set(t,"showing"),i.has(o)||i.set(o,new Set),i.get(o).add(t),v(t),"auto"===t.popover&&(a.has(o)||a.set(o,new Set),a.get(o).add(t),A(l.get(t),!0)),r&&c&&"auto"===t.popover&&w.set(t,c),n(t,"closed","open")}function E(t,o=!1,r=!1){if(!p(t,!0))return;const c=t.ownerDocument;if("auto"===t.popover&&(S(t,o,r),!p(t,!0))||(A(l.get(t),!1),l.delete(t),r&&(t.dispatchEvent(new e("beforetoggle",{oldState:"open",newState:"closed"})),!p(t,!0))))return;i.get(c)?.delete(t),a.get(c)?.delete(t),t.classList.remove(":popover-open"),s.set(t,"hidden"),r&&n(t,"open","closed");const u=w.get(t);u&&(w.delete(t),o&&u.focus())}function y(e,t=!1,n=!1){let o=d(e);for(;o;)E(o,t,n),o=d(e)}function S(e,t,n){const o=e.ownerDocument||e;if(e instanceof Document)return y(o,t,n);let r=null,i=!1;for(const t of a.get(o)||[])if(t===e)i=!0;else if(i){r=t;break}if(!i)return y(o,t,n);for(;r&&"showing"===c(r)&&a.get(o)?.size;)E(r,t,n)}var T=new WeakMap;function M(e){if(!e.isTrusted)return;const t=e.composedPath()[0];if(!t)return;const n=t.ownerDocument;if(!d(n))return;const o=f(t);if(o&&"pointerdown"===e.type)T.set(n,o);else if("pointerup"===e.type){const e=T.get(n)===o;T.delete(n),e&&S(o||n,!1,!0)}}var L=new WeakMap;function A(e,t=!1){if(!e)return;L.has(e)||L.set(e,e.getAttribute("aria-expanded"));const n=e.popoverTargetElement;if(n instanceof HTMLElement&&"auto"===n.popover)e.setAttribute("aria-expanded",String(t));else{const t=L.get(e);t?e.setAttribute("aria-expanded",t):e.removeAttribute("aria-expanded")}}var H=globalThis.ShadowRoot||function(){};function k(e,t,n){const o=e[t];Object.defineProperty(e,t,{value(e){return o.call(this,n(e))}})}var D=/(^|[^\\]):popover-open\b/g;function x(){const e="function"==typeof globalThis.CSSLayerBlockRule;return`\n${e?"@layer popover-polyfill {":""}\n :where([popover]) {\n position: fixed;\n z-index: 2147483647;\n inset: 0;\n padding: 0.25em;\n width: fit-content;\n height: fit-content;\n border-width: initial;\n border-color: initial;\n border-image: initial;\n border-style: solid;\n background-color: canvas;\n color: canvastext;\n overflow: auto;\n margin: auto;\n }\n\n :where([popover]:not(.\\:popover-open)) {\n display: none;\n }\n\n :where(dialog[popover].\\:popover-open) {\n display: block;\n }\n\n :where(dialog[popover][open]) {\n display: revert;\n }\n\n :where([anchor].\\:popover-open) {\n inset: auto;\n }\n\n :where([anchor]:popover-open) {\n inset: auto;\n }\n\n @supports not (background-color: canvas) {\n :where([popover]) {\n background-color: white;\n color: black;\n }\n }\n\n @supports (width: -moz-fit-content) {\n :where([popover]) {\n width: -moz-fit-content;\n height: -moz-fit-content;\n }\n }\n\n @supports not (inset: 0) {\n :where([popover]) {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n${e?"}":""}\n`}var R=null;function N(e){const t=x();if(null===R)try{(R=new CSSStyleSheet).replaceSync(t)}catch{R=!1}if(!1===R){const n=document.createElement("style");n.textContent=t,e instanceof Document?e.head.prepend(n):e.prepend(n)}else e.adoptedStyleSheets=[R,...e.adoptedStyleSheets]}typeof HTMLElement<"u"&&"object"==typeof HTMLElement.prototype&&"popover"in HTMLElement.prototype||function(){if(typeof window>"u")return;function t(e){return e?.includes(":popover-open")&&(e=e.replace(D,"$1.\\:popover-open")),e}window.ToggleEvent=window.ToggleEvent||e,k(Document.prototype,"querySelector",t),k(Document.prototype,"querySelectorAll",t),k(Element.prototype,"querySelector",t),k(Element.prototype,"querySelectorAll",t),k(Element.prototype,"matches",t),k(Element.prototype,"closest",t),k(DocumentFragment.prototype,"querySelectorAll",t),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;const e=(this.getAttribute("popover")||"").toLowerCase();return""===e||"auto"==e?"auto":"manual"},set(e){this.setAttribute("popover",e)}},showPopover:{enumerable:!0,configurable:!0,value(){b(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){E(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(e){"showing"===s.get(this)&&void 0===e||!1===e?E(this,!0,!0):(void 0===e||!0===e)&&b(this)}}});const n=Element.prototype.attachShadow;n&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(e){const t=n.call(this,e);return N(t),t}}});const o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){const e=o.call(this);return e.shadowRoot&&N(e.shadowRoot),e}}});const r=new WeakMap;function i(e){Object.defineProperties(e.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(e){if(null===e)this.removeAttribute("popovertarget"),r.delete(this);else{if(!(e instanceof Element))throw new TypeError("popoverTargetElement must be an element or null");this.setAttribute("popovertarget",""),r.set(this,e)}},get(){if("button"!==this.localName&&"input"!==this.localName||"input"===this.localName&&"reset"!==this.type&&"image"!==this.type&&"button"!==this.type||this.disabled||this.form&&"submit"===this.type)return null;const e=r.get(this);if(e&&e.isConnected)return e;if(e&&!e.isConnected)return r.delete(this),null;const t=h(this),n=this.getAttribute("popovertarget");return(t instanceof Document||t instanceof H)&&n&&t.getElementById(n)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){const e=(this.getAttribute("popovertargetaction")||"").toLowerCase();return"show"===e||"hide"===e?e:"toggle"},set(e){this.setAttribute("popovertargetaction",e)}}})}i(HTMLButtonElement),i(HTMLInputElement);const a=e=>{const t=e.composedPath(),n=t[0];if(!(n instanceof Element)||n?.shadowRoot)return;const o=h(n);if(!(o instanceof H||o instanceof Document))return;const r=t.find((e=>e.matches?.("[popovertargetaction],[popovertarget]")));return r?(function(e){const t=e.popoverTargetElement;if(!(t instanceof HTMLElement))return;const n=c(t);"show"===e.popoverTargetAction&&"showing"===n||"hide"===e.popoverTargetAction&&"hidden"===n||("showing"===n?E(t,!0,!0):p(t,!1)&&(l.set(t,e),b(t)))}(r),void e.preventDefault()):void 0},u=e=>{const t=e.key,n=e.target;!e.defaultPrevented&&n&&("Escape"===t||"Esc"===t)&&S(n.ownerDocument,!0,!0)};var f;(f=document).addEventListener("click",a),f.addEventListener("keydown",u),f.addEventListener("pointerdown",M),f.addEventListener("pointerup",M),N(document)}();
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! js-cookie v3.0.5 | MIT */
|
|
2
|
-
function e(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)e[n]=r[n]}return e}!function t(r,n){function o(t,o,i){if(!(typeof document>"u")){"number"==typeof(i=e({},n,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var s in i)i[s]&&(c+="; "+s,!0!==i[s]&&(c+="="+i[s].split(";")[0]));return document.cookie=t+"="+r.write(o,t)+c}}return Object.create({set:o,get:function(e){if(!(typeof document>"u"||arguments.length&&!e)){for(var t=document.cookie?document.cookie.split("; "):[],n={},o=0;o<t.length;o++){var i=t[o].split("="),c=i.slice(1).join("=");try{var s=decodeURIComponent(i[0]);if(n[s]=r.read(c,s),e===s)break}catch{}}return e?n[e]:n}},remove:function(t,r){o(t,"",e({},r,{expires:-1}))},withAttributes:function(r){return t(this.converter,e({},this.attributes,r))},withConverter:function(r){return t(e({},this.converter,r),this.attributes)}},{attributes:{value:Object.freeze(n)},converter:{value:Object.freeze(r)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"});const t=class{constructor(e,t){this.init=()=>{this.observer=new IntersectionObserver((e=>{e.forEach((({isIntersecting:e})=>{e&&this.load().catch((e=>this.handleError(e)))}))})),this.observer.observe(this.el),this.fallbackBtn?.addEventListener("click",this.handleClick)},this.load=async()=>{try{await this.callback()}catch(e){this.handleError(e)}this.observer.unobserve(this.el)},this.handleClick=()=>{this.load().catch((e=>this.handleError(e)))},this.handleError=e=>{console.error(e),this.errorMsg?.removeAttribute("hidden")},this.el=e,this.callback=t,this.fallbackBtn=this.el.querySelector("[data-load-fallback]"),this.errorMsg=this.el.querySelector("[data-load-error]")}};t.create=(e,r)=>{Object.hasOwn(window,"once")&&window.once("intersection-loader",e)?.forEach((e=>{new t(e,r).init()}))};const r=(e,t=20)=>{if("string"!=typeof e||!e)return"";let r=e.toLowerCase().trim().replace(/\s+/g,"-").replace(/[^-a-z0-9]/g,"").replace(/[\n\r]+|[\s]{2,}/g,"");return[...Array(6).keys()].forEach((()=>{r.charAt(0).match(/[a-z]/g)||(r=r.substring(1))})),t&&(r=r.substring(0,t+1)),r},n=e=>{try{const t=document.createElement("div");return t.innerHTML=e,t.firstElementChild}catch(e){return console.error(e),null}},o=(e,t,r,n=[])=>{const{target:o,clientY:i,clientX:c}=e,s=o instanceof HTMLOptionElement||o instanceof HTMLSelectElement;if((n?.filter((e=>e===o||e.contains(o)))).length||s)return;const a=new IntersectionObserver((([{boundingClientRect:e}])=>{const{top:t,height:n,width:o,left:s}=e;t<=i&&i<=t+n&&s<=c&&c<=s+o||r(),a.disconnect()}));a.observe(t)},i=(e,t)=>{const{key:r}=e;"Escape"===r&&t()};export{i as a,n as c,o as h,r as m};
|
package/dist/build/constants.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--_hue-primary: 288;--_hue-accent: 328;--_hue-info: 288;--_hue-error: 34;--_hue-warning: 70;--_hue-success: 134;--_hue-outline: 288;--colour-background: lch(100% 0 0);--colour-background-alt: lch(95% 0 0);--colour-foreground: lch(0% 0 0);--colour-foreground-alt: lch(25% 0 0);--colour-border: lch(90% 0 0);--colour-primary: lch(43% 100 var(--_hue-primary));--colour-primary-light: lch(95% 10 var(--_hue-primary));--colour-accent: lch(43% 100 var(--_hue-accent));--colour-accent-light: lch(95% 10 var(--_hue-accent));--colour-foreground-reverse: lch(100% 0 0);--colour-foreground-alt-reverse: lch(95% 0 0);--colour-background-reverse: lch(0% 0 0);--colour-border-reverse: lch(10% 0 0);--colour-error-foreground: lch(40% 100 var(--_hue-error));--colour-error-background: lch(95% 10 var(--_hue-error));--colour-success-foreground: lch(45% 100 var(--_hue-success));--colour-success-background: lch(95% 10 var(--_hue-success));--colour-warning-foreground: lch(46% 100 var(--_hue-warning));--colour-warning-background: lch(95% 10 var(--_hue-warning));--colour-info-foreground: lch(43% 100 var(--_hue-info));--colour-info-background: lch(95% 10 var(--_hue-info));--font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;--type-ratio: 1.25;--type-ratio-small: 1.125;--base-font-size: 1rem;--font-size: var(--base-font-size);--font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));--font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));--font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));--font-size-m: calc(var(--base-font-size) * var(--type-ratio));--font-size-l: calc(var(--font-size-m) * var(--type-ratio));--font-size-xl: calc(var(--font-size-l) * var(--type-ratio));--font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));--font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));--font-size-diff: .3;--line-height: 1.6;--line-height-h: 1.2;--line-height-ui: .9rem;--font-weight-normal: 400;--font-weight-bold: 700;--spacing-xxxxs: .25em;--spacing-xxxs: .5em;--spacing-xxs: .75em;--spacing-xs: .875em;--spacing-s: 1em;--spacing-m: 1.5em;--spacing-l: 2em;--spacing-xl: 2.5em;--spacing-xxl: 3em;--spacing-xxxl: 3.5em;--spacing-xxxxl: 3.5em;--spacing-ul: 4.5em;--spacing-uul: 5em;--spacing-uuul: 5.5em;--outline-width: .125rem;--outline-offset: 0;--outline-style: solid;--outline-color: lch(45% 100 var(--_hue-outline));--container-max-width-narrow: 58ch;--container-max-width: 76ch;--gap-s: 1em;--gap: 1.5em;--gap-l: 2em;--gap-xl: 2.5em;--breakpoint-xs: 26.25rem;--breakpoint-s: 33.75rem;--breakpoint-m: 45rem;--breakpoint-l: 59.125rem;--breakpoint-xl: 68.75rem;--shadow-color: lch(25% 0 0);--shadow-size: .875em;--shadow-shape: 0 0 var(--shadow-size);--box-shadow: var(--shadow-shape) var(--shadow-color);--border-radius: .1875rem;--border-radius-l: 2em;--border-radius-round: 50%;--ratio: 16 / 9;--ease: cubic-bezier(.25, 0, .3, 1)}@media (max-width: 719.98px){:root{--section-xl: var(--spacing-xxl)}}
|