@pnx-mixtape/mxds 0.0.24 → 0.0.26
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/.storybook/decorators.ts +1 -1
- package/.storybook/main.ts +9 -1
- package/.storybook/preview.ts +1 -0
- package/.storybook/theme-demo.css +17 -13
- package/.storybook/vitest.setup.ts +17 -0
- package/dist/build/accordion.css +76 -86
- package/dist/build/accordion.entry.js +46 -72
- package/dist/build/base.css +1 -993
- package/dist/build/breadcrumb.css +1 -55
- package/dist/build/button.css +1 -126
- package/dist/build/callout.css +1 -11
- package/dist/build/card.css +1 -161
- package/dist/build/carousel.css +1 -125
- package/dist/build/chunks/Accordion-Dwh42fp7.js +42 -0
- package/dist/build/chunks/DropMenu-plGsgySm.js +43 -0
- package/dist/build/chunks/Popover-Bws25suh.js +27 -0
- package/dist/build/chunks/polyfills-Du4RTZDf.js +511 -0
- package/dist/build/chunks/popover-Bd5oQ1Ic.js +407 -0
- package/dist/build/chunks/utilities-DepaJdUg.js +242 -0
- package/dist/build/constants.css +91 -123
- package/dist/build/container-grid.css +1 -186
- package/dist/build/content-block.css +1 -36
- package/dist/build/dialog.css +1 -108
- package/dist/build/dialog.entry.js +45 -85
- package/dist/build/drop-menu.css +1 -89
- package/dist/build/drop-menu.entry.js +2 -2
- package/dist/build/drupal.css +1 -66
- package/dist/build/filters.css +1 -117
- package/dist/build/filters.entry.js +113 -142
- package/dist/build/footer.css +1 -141
- package/dist/build/form.css +1 -491
- package/dist/build/global-alert.css +1 -60
- package/dist/build/global-alert.entry.js +51 -75
- package/dist/build/grid.css +1 -195
- package/dist/build/header.css +1 -149
- package/dist/build/header.entry.js +598 -1180
- package/dist/build/hero-banner.css +1 -73
- package/dist/build/icon.css +1 -399
- package/dist/build/in-page-alert.css +1 -93
- package/dist/build/in-page-navigation.css +1 -17
- package/dist/build/in-page-navigation.entry.js +67 -103
- package/dist/build/link-list.css +1 -45
- package/dist/build/list-item.css +1 -29
- package/dist/build/masthead.css +1 -53
- package/dist/build/navigation.css +1 -356
- package/dist/build/navigation.entry.js +79 -222
- package/dist/build/page.css +1 -65
- package/dist/build/pagination.css +1 -111
- package/dist/build/popover.css +1 -119
- package/dist/build/popover.entry.js +1 -2
- package/dist/build/results-bar.css +1 -21
- package/dist/build/section.css +1 -147
- package/dist/build/side-navigation.css +1 -85
- package/dist/build/sidebar.css +1 -53
- package/dist/build/social-links.css +1 -20
- package/dist/build/steps.css +1 -118
- package/dist/build/sticky.css +1 -47
- package/dist/build/sticky.entry.js +48 -59
- package/dist/build/tabs.css +1 -108
- package/dist/build/tabs.entry.js +130 -209
- package/dist/build/tag.css +1 -70
- package/dist/build/utilities.css +1 -186
- package/dist/build/utility-list.css +1 -43
- package/dist/build/utility-list.entry.js +52 -80
- package/package.json +40 -52
- package/src/Atom/Background/__snapshots__/Background.stories.ts.snap +61 -216
- package/src/Atom/Background/_background.css +2 -1
- package/src/Atom/Button/Button.stories.tsx +2 -0
- package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +77 -97
- package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +3 -15
- package/src/Atom/DefinitionList/DefinitionList.stories.tsx +2 -1
- package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +13 -26
- package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -29
- package/src/Atom/Heading/Heading.stories.tsx +2 -1
- package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -13
- package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +2 -8
- package/src/Atom/Icon/Icon.stories.tsx +2 -1
- package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +21 -28
- package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +4 -15
- package/src/Atom/Icon/_icon.css +7 -6
- package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +6 -9
- package/src/Atom/Link/Link.stories.tsx +2 -1
- package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +47 -56
- package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +4 -22
- package/src/Atom/Media/Media.stories.ts +1 -1
- package/src/Atom/Media/Media.stories.tsx +2 -1
- package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +27 -12
- package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +3 -16
- package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -8
- package/src/Atom/Table/TableResponsive.stories.ts +0 -1
- package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +129 -261
- package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +34 -67
- package/src/Atom/Text/Text.stories.tsx +2 -1
- package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +32 -46
- package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +2 -6
- package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +6 -11
- package/src/Atom/_flow.css +16 -1
- package/src/Component/Accordion/Accordion.stories.tsx +2 -0
- package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +106 -140
- package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +3 -49
- package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +52 -81
- package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +2 -0
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +29 -33
- package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +3 -62
- package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -11
- package/src/Component/Card/Card.stories.tsx +2 -0
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +237 -272
- package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +4 -85
- package/src/Component/Carousel/Elements/Carousel.ts +10 -7
- package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +992 -1187
- package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -0
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +161 -155
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +2 -25
- package/src/Component/Dialog/Dialog.stories.tsx +2 -0
- package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +92 -110
- package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -31
- package/src/Component/DropMenu/DropMenu.stories.tsx +2 -0
- package/src/Component/DropMenu/DropMenu.tsx +1 -3
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +25 -72
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -46
- package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +80 -121
- package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +323 -424
- package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +2 -0
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +25 -37
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -46
- package/src/Component/HeroBanner/HeroBanner.stories.tsx +2 -0
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +105 -106
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +3 -34
- package/src/Component/HeroSearch/HeroSearch.stories.tsx +2 -0
- package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +121 -158
- package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +3 -34
- package/src/Component/InPageAlert/InPageAlert.stories.tsx +2 -0
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +87 -70
- package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +5 -65
- package/src/Component/InPageNavigation/InPageNavigation.stories.ts +1 -0
- package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +88 -208
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
- package/src/Component/InPageNavigation/in-page-navigation.css +5 -0
- package/src/Component/LinkList/LinkList.stories.tsx +2 -1
- package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
- package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
- package/src/Component/ListItem/ListItem.stories.tsx +2 -1
- package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
- package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
- package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
- package/src/Component/Navigation/Elements/Navigation.ts +5 -5
- package/src/Component/Navigation/Navigation.stories.tsx +2 -0
- package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
- package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
- package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
- package/src/Component/Navigation/_navigation.css +2 -2
- package/src/Component/Pagination/Pagination.stories.tsx +2 -0
- package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
- package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
- package/src/Component/Popover/Elements/Popover.ts +5 -1
- package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -496
- package/src/Component/Popover/popover.css +3 -4
- package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
- package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
- package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
- package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
- package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
- package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
- package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
- package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
- package/src/Component/SocialShare/social-share.twig +1 -0
- package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
- package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
- package/src/Component/Sticky/Sticky.stories.tsx +2 -0
- package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
- package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
- package/src/Component/Tabs/Tabs.stories.tsx +2 -0
- package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
- package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
- package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
- package/src/Component/Tag/Tag.stories.tsx +2 -0
- package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
- package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
- package/src/Component/Tag/tags.twig +6 -6
- package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
- package/src/Component/UtilityList/utility-list.css +4 -0
- package/src/Component/UtilityList/utility-list.twig +2 -1
- package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
- package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
- package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
- package/src/Form/Description/FormDescription.stories.tsx +2 -1
- package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
- package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
- package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
- package/src/Form/Form/Form.stories.tsx +2 -1
- package/src/Form/Form/FormTitle.stories.tsx +2 -1
- package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
- package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
- package/src/Form/FormItem/FormItem.stories.tsx +8 -5
- package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
- package/src/Form/Label/FormLabel.stories.tsx +2 -1
- package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
- package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
- package/src/Form/Radio/FormRadio.stories.tsx +2 -14
- package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
- package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
- package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
- package/src/Form/Select/FormSelect.stories.tsx +2 -1
- package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
- package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
- package/src/Form/TextInput/FormText.stories.tsx +2 -1
- package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
- package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
- package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
- package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
- package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
- package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
- package/src/Layout/Footer/Footer.stories.ts +18 -1
- package/src/Layout/Footer/Footer.stories.tsx +2 -0
- package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
- package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
- package/src/Layout/Footer/footer.css +16 -35
- package/src/Layout/Footer/footer.twig +6 -6
- package/src/Layout/Grid/Grid.stories.tsx +2 -0
- package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
- package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
- package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
- package/src/Layout/Header/Header.stories.tsx +2 -1
- package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
- package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
- package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
- package/src/Layout/Page/Page.stories.tsx +2 -0
- package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
- package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
- package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
- package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
- package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
- package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
- package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
- package/src/Layout/Section/section.twig +2 -2
- package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
- package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
- package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
- package/src/Layout/Sidebar/sidebar.css +2 -2
- package/src/Layout/Sidebar/sidebar.twig +8 -5
- package/src/Utility/_layout-utils.css +9 -1
- package/src/constants.css +2 -2
- package/src/tokens.js +2 -2
- package/.storybook/test-runner.ts +0 -77
- package/dist/build/accordion.entry.js.map +0 -1
- package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
- package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
- package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
- package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
- package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
- package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
- package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
- package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
- package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
- package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
- package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
- package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
- package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
- package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
- package/dist/build/dialog.entry.js.map +0 -1
- package/dist/build/drop-menu.entry.js.map +0 -1
- package/dist/build/filters.entry.js.map +0 -1
- package/dist/build/global-alert.entry.js.map +0 -1
- package/dist/build/header.entry.js.map +0 -1
- package/dist/build/in-page-navigation.entry.js.map +0 -1
- package/dist/build/navigation.entry.js.map +0 -1
- package/dist/build/popover.entry.js.map +0 -1
- package/dist/build/sticky.entry.js.map +0 -1
- package/dist/build/tabs.entry.js.map +0 -1
- package/dist/build/utility-list.entry.js.map +0 -1
- package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
|
@@ -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== */
|
|
1
|
+
@layer design-system.components{.mx-nav--breadcrumbs{--nav-font-size: var(--font-size-s);position:relative;z-index:1;overflow:auto;white-space:nowrap;padding-inline:var(--outline-size);padding-block:var(--outline-size);margin-inline:calc(var(--outline-size) * -1);margin-block:calc(var(--outline-size) * -1)}.mx-nav--breadcrumbs>ul{gap:var(--breadcrumb-gap, var(--spacing-xxxxs))}.mx-nav--breadcrumbs>ul>li{color:var(--breadcrumb-foreground, var(--foreground, var(--colour-foreground-alt)));display:flex;align-items:center}:is(.mx-nav--breadcrumbs>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}.mx-nav--breadcrumbs [aria-current=page]{pointer-events:none}:is([dir=rtl] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs)>ul>li:after{transform:rotate(180deg)}}
|
package/dist/build/button.css
CHANGED
|
@@ -1,126 +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 var(--line-colour, var(--colour-border));
|
|
18
|
-
border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
|
|
19
|
-
border-radius: var(--radius, var(--border-radius-l));
|
|
20
|
-
padding-block: var(--vertical-padding, var(--spacing-xxs));
|
|
21
|
-
padding-inline: var(--horizontal-padding, var(--spacing-m));
|
|
22
|
-
background-color: var(--background, var(--colour-background));
|
|
23
|
-
color: var(--foreground, var(--colour-foreground));
|
|
24
|
-
text-decoration-line: none;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.mx-button:hover {
|
|
28
|
-
cursor: pointer;
|
|
29
|
-
text-decoration-line: none;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.mx-button:disabled {
|
|
33
|
-
cursor: not-allowed;
|
|
34
|
-
opacity: 0.3;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.mx-button--full-width {
|
|
38
|
-
inline-size: 100%;
|
|
39
|
-
justify-content: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.mx-button--large {
|
|
43
|
-
--vertical-padding: var(--spacing-s);
|
|
44
|
-
--horizontal-padding: var(--spacing-l);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.mx-button--small {
|
|
48
|
-
--button-font-size: var(--font-size-s);
|
|
49
|
-
--vertical-padding: var(--spacing-xxxs);
|
|
50
|
-
--horizontal-padding: var(--spacing-s);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.mx-button--icon-only {
|
|
54
|
-
inline-size: var(--spacing-xl);
|
|
55
|
-
block-size: var(--spacing-xl);
|
|
56
|
-
padding: 0;
|
|
57
|
-
border-radius: var(--border-radius-round);
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
flex-wrap: wrap;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.mx-button--icon-only::before,.mx-button--icon-only::after {
|
|
63
|
-
--icon-size: 100%;
|
|
64
|
-
|
|
65
|
-
-webkit-mask-size: var(--spacing-s);
|
|
66
|
-
|
|
67
|
-
mask-size: var(--spacing-s);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.mx-button--icon-only:has(.mx-icon) {
|
|
71
|
-
align-content: center;
|
|
72
|
-
justify-content: center;
|
|
73
|
-
place-content: center;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Buttons
|
|
79
|
-
*/
|
|
80
|
-
|
|
81
|
-
@layer design-system.atoms {
|
|
82
|
-
.mx-button--dark {
|
|
83
|
-
--line-colour: var(--colour-link);
|
|
84
|
-
--background: var(--colour-link);
|
|
85
|
-
--foreground: var(--colour-foreground-reverse);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.mx-button--dark.mx-button--outline {
|
|
89
|
-
--background: transparent;
|
|
90
|
-
--foreground: var(--colour-primary);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.mx-button--light {
|
|
94
|
-
border: transparent;
|
|
95
|
-
color: var(--link-colour, var(--colour-link));
|
|
96
|
-
text-decoration-line: underline;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.mx-button--light:hover {
|
|
100
|
-
text-decoration-line: underline;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.mx-button--destructive {
|
|
104
|
-
--line-colour: var(--colour-error);
|
|
105
|
-
--background: var(--colour-error);
|
|
106
|
-
--foreground: var(--colour-foreground-reverse);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.mx-button--destructive.mx-button--outline {
|
|
110
|
-
--background: transparent;
|
|
111
|
-
--foreground: var(--colour-error);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.mx-button--white {
|
|
115
|
-
--line-colour: var(--colour-foreground-reverse);
|
|
116
|
-
--background: var(--colour-foreground-reverse);
|
|
117
|
-
--foreground: var(--colour-foreground);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.mx-button--white.mx-button--outline {
|
|
121
|
-
--background: transparent;
|
|
122
|
-
--foreground: var(--colour-foreground-reverse);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjs7SUFFckIsb0JBQW9CO0lBQ3BCLDZCQUF3QjtJQUF4Qix3QkFBd0I7SUFDeEIsd0NBQXdDO0lBQ3hDLG9EQUFvRDtJQUNwRCxvQ0FBb0M7SUFDcEMsK0JBQStCO0lBQy9CLGtDQUFrQztJQUNsQywwREFBNkU7SUFBN0UsNkVBQTZFO0lBQzdFLG9EQUFvRDtJQUNwRCwwREFBMEQ7SUFDMUQsMkRBQTJEO0lBQzNELDZEQUE2RDtJQUM3RCxrREFBa0Q7SUFDbEQsMEJBQTBCO0VBVzVCOztJQVRFO01BQ0UsZUFBZTtNQUNmLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLG1CQUFtQjtNQUNuQixZQUFZO0lBQ2Q7O0VBR0Y7SUFDRSxpQkFBaUI7SUFDakIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0Usb0NBQW9DO0lBQ3BDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLHNDQUFzQztJQUN0Qyx1Q0FBdUM7SUFDdkMsc0NBQXNDO0VBQ3hDOztFQUVBO0lBQ0UsOEJBQThCO0lBQzlCLDZCQUE2QjtJQUM3QixVQUFVO0lBQ1YseUNBQXlDO0lBQ3pDLGdCQUFnQjtJQUNoQixlQUFlO0VBWWpCOztJQVZFO01BRUUsaUJBQWlCOztNQUVqQixtQ0FBMkI7O2NBQTNCLDJCQUEyQjtJQUM3Qjs7SUFFQTtNQUNFLHFCQUFxQjtNQUFyQix1QkFBcUI7TUFBckIscUJBQXFCO0lBQ3ZCO0FBRUo7O0FDckVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxpQ0FBaUM7SUFDakMsZ0NBQWdDO0lBQ2hDLDhDQUE4QztFQU1oRDs7SUFKRTtNQUNFLHlCQUF5QjtNQUN6QixtQ0FBbUM7SUFDckM7O0VBR0Y7SUFDRSxtQkFBbUI7SUFDbkIsNkNBQTZDO0lBQzdDLCtCQUErQjtFQUtqQzs7SUFIRTtNQUNFLCtCQUErQjtJQUNqQzs7RUFHRjtJQUNFLGtDQUFrQztJQUNsQyxpQ0FBaUM7SUFDakMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLGlDQUFpQztJQUNuQzs7RUFHRjtJQUNFLCtDQUErQztJQUMvQyw4Q0FBOEM7SUFDOUMsc0NBQXNDO0VBTXhDOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDhDQUE4QztJQUNoRDtBQUVKIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJ1dHRvbnNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5hdG9tcyB7XG4gIC5teC1idXR0b24ge1xuICAgIC0tb3V0bGluZS1vZmZzZXQ6IDFweDtcblxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBnYXA6IHZhcigtLWJ1dHRvbi1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tYnV0dG9uLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplKSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIHZhcigtLWJvcmRlci1yYWRpdXMtbCkpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXZlcnRpY2FsLXBhZGRpbmcsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICBjb2xvcjogdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IG5vbmU7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgICAgb3BhY2l0eTogMC4zO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWZ1bGwtd2lkdGgge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGFyZ2Uge1xuICAgIC0tdmVydGljYWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAtLWhvcml6b250YWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1sKTtcbiAgfVxuXG4gIC5teC1idXR0b24tLXNtYWxsIHtcbiAgICAtLWJ1dHRvbi1mb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmcteHh4cyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtcm91bmQpO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgJjo6YmVmb3JlLFxuICAgICY6OmFmdGVyIHtcbiAgICAgIC0taWNvbi1zaXplOiAxMDAlO1xuXG4gICAgICBtYXNrLXNpemU6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWljb24pIHtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbi0tZGFyayB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWxpbmspO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWxpbmspO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLm14LWJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItcHJpbWFyeSk7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGlnaHQge1xuICAgIGJvcmRlcjogdHJhbnNwYXJlbnQ7XG4gICAgY29sb3I6IHZhcigtLWxpbmstY29sb3VyLCB2YXIoLS1jb2xvdXItbGluaykpO1xuICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0tZGVzdHJ1Y3RpdmUge1xuICAgIC0tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3IpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLm14LWJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3IpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLXdoaXRlIHtcbiAgICAtLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuXG4gICAgJi5teC1idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.atoms{.mx-button{--outline-offset: .0625rem;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 currentcolor;border:var(--line-width, 2px) solid var(--line-colour, currentcolor);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}.mx-button:hover{cursor:pointer;text-decoration-line:none}.mx-button:disabled{cursor:not-allowed;opacity:.3}.mx-button--full-width{inline-size:100%;justify-content:center}.mx-button--large{--vertical-padding: var(--spacing-s);--horizontal-padding: var(--spacing-l)}.mx-button--small{--button-font-size: var(--font-size-s);--vertical-padding: var(--spacing-xxxs);--horizontal-padding: var(--spacing-s)}.mx-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}.mx-button--icon-only:before,.mx-button--icon-only:after{--icon-size: 100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}.mx-button--icon-only:has(.mx-icon){align-content:center;justify-content:center;place-content:center}}@layer design-system.atoms{.mx-button--dark{--line-colour: var(--button-dark-bg, var(--colour-link));--background: var(--button-dark-bg, var(--colour-link));--foreground: var(--button-dark-fg, var(--colour-foreground-reverse))}.mx-button--dark.mx-button--outline{--background: transparent;--foreground: var(--button-dark-bg, var(--colour-link))}.mx-button--light{--line-colour: var(--button-light-bg, transparent);--background: var(--button-light-bg, transparent);--foreground: var(--button-light-fg, var(--link-colour, var(--colour-link)));text-decoration-line:underline}.mx-button--light:hover{text-decoration-line:underline}.mx-button--accent{--line-colour: var(--button-light-bg, var(--colour-accent));--background: var(--button-light-bg, var(--colour-accent))}.mx-button--accent.mx-button--outline{--background: transparent;--foreground: var(--button-light-bg, var(--colour-accent))}.mx-button--destructive{--line-colour: var(--colour-error);--background: var(--colour-error);--foreground: var(--colour-foreground-reverse)}.mx-button--destructive.mx-button--outline{--background: transparent;--foreground: var(--colour-error)}.mx-button--white{--line-colour: var(--colour-foreground-reverse);--background: var(--colour-foreground-reverse);--foreground: var(--colour-foreground)}.mx-button--white.mx-button--outline{--background: transparent;--foreground: var(--colour-foreground-reverse)}}
|
package/dist/build/callout.css
CHANGED
|
@@ -1,11 +1 @@
|
|
|
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= */
|
|
1
|
+
@layer design-system.components{.mx-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
CHANGED
|
@@ -1,161 +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
|
-
--card-alignment: center;
|
|
51
|
-
|
|
52
|
-
grid-template: "media content" 1fr / 1fr 1fr;
|
|
53
|
-
|
|
54
|
-
grid-template: "media content" 1fr / var(--media-col, 1fr) var(
|
|
55
|
-
--content-col,
|
|
56
|
-
1fr
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.mx-card.mx-card--reversed:has(.mx-card__media) {
|
|
61
|
-
grid-template-areas: "content media";
|
|
62
|
-
grid-template-columns: 1fr 1fr;
|
|
63
|
-
grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@container (min-width: 946px) {
|
|
68
|
-
|
|
69
|
-
.mx-card:has(.mx-card__media) {
|
|
70
|
-
--card-gap: var(--large-card-gap, 6rem);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
@container (min-width: 720px) {
|
|
74
|
-
.mx-card[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
|
|
75
|
-
padding-block-start: var(--content-min-spacing, var(--spacing-s));
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.mx-card[class*="mx-background--"]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content {
|
|
79
|
-
padding-inline-start: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.mx-card.mx-card--reversed[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
|
|
83
|
-
padding-inline-end: 0;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.mx-card:has(.mx-card__media) .mx-card__content {
|
|
88
|
-
grid-area: content;
|
|
89
|
-
align-self: stretch;
|
|
90
|
-
align-self: var(--align-content, var(--card-alignment, stretch));
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.mx-card:has(.mx-card__media) .mx-card__media {
|
|
94
|
-
grid-area: media;
|
|
95
|
-
align-self: stretch;
|
|
96
|
-
align-self: var(--align-media, var(--card-alignment, stretch));
|
|
97
|
-
inline-size: 100%;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
:is(.mx-card:has(.mx-card__media) .mx-card__media) img {
|
|
101
|
-
aspect-ratio: var(--ratio);
|
|
102
|
-
border-radius: var(--border-radius);
|
|
103
|
-
-o-object-fit: cover;
|
|
104
|
-
object-fit: cover;
|
|
105
|
-
inline-size: 100%;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.mx-card:has(.mx-card__media) .mx-skeleton--bg {
|
|
109
|
-
grid-area: media;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.mx-card:has(.mx-card__media) .mx-card__icon {
|
|
113
|
-
grid-area: media;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.mx-card .mx-link-list {
|
|
117
|
-
inline-size: 100%;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.mx-card__content > a:last-child {
|
|
121
|
-
margin-block-start: auto;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Content Card Grid
|
|
127
|
-
*/
|
|
128
|
-
|
|
129
|
-
@layer design-system.components {
|
|
130
|
-
.mx-grid:has(> *:nth-child(2):last-child)
|
|
131
|
-
> :is(.mx-card, .mx-container:has(.mx-card)) {
|
|
132
|
-
inline-size: min(100%, 37ch);
|
|
133
|
-
inline-size: min(100%, var(--max-card-width, 37ch));
|
|
134
|
-
margin-inline: auto;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Content Card Linked
|
|
140
|
-
*/
|
|
141
|
-
|
|
142
|
-
@layer design-system.components {
|
|
143
|
-
a.mx-card[href]:hover {
|
|
144
|
-
color: inherit;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.mx-card--block {
|
|
148
|
-
position: relative;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.mx-card--block a::before {
|
|
152
|
-
content: "";
|
|
153
|
-
position: absolute;
|
|
154
|
-
inset-block-start: 0;
|
|
155
|
-
inset-inline-start: 0;
|
|
156
|
-
inline-size: 100%;
|
|
157
|
-
block-size: 100%;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUFnR2xDOztJQTlGRTtNQUNFLG1DQUFtQztJQXVCckM7O01BckJFOztJQUhGO1FBSUksbUVBQW1FO0lBb0J2RTtNQW5CRTs7TUFFQTtRQUNFLDREQUE0RDtRQUM1RCwrREFBK0Q7TUFDakU7O01BRUE7UUFDRSxpRUFBaUU7TUFDbkU7O01BRUE7UUFDRSw0REFBNEQ7UUFDNUQsaUVBQWlFO01BQ25FOztNQUVBO1FBQ0UscUJBQXFCO01BQ3ZCOztJQUdGO01BQ0UsMENBQTBDO0lBOEQ1Qzs7TUE1REU7O0lBSEY7UUFJSSx3QkFBd0I7UUFDeEIsd0JBQXdCOztRQUV4Qiw0Q0FHRzs7UUFISDs7O1dBR0c7SUFxRFA7O1FBbkRJO1VBQ0Usb0NBQW9DO1VBQ3BDLDhCQUFvRTtVQUFwRSxvRUFBb0U7UUFDdEU7TUFDRjs7TUFFQTs7SUFsQkY7UUFtQkksdUNBQXVDO0lBNEMzQztNQTNDRTtRQUdFO1VBQ0U7WUFDRSxpRUFBaUU7VUFDbkU7O1VBRUE7WUFDRSx1QkFBdUI7VUFDekI7O1VBRUE7WUFDRSxxQkFBcUI7VUFDdkI7UUFDRjs7TUFHRjtRQUNFLGtCQUFrQjtRQUNsQixtQkFBZ0U7UUFBaEUsZ0VBQWdFO01BQ2xFOztNQUVBO1FBQ0UsZ0JBQWdCO1FBQ2hCLG1CQUE4RDtRQUE5RCw4REFBOEQ7UUFDOUQsaUJBQWlCO01BUW5COztRQU5FO1VBQ0UsMEJBQTBCO1VBQzFCLG1DQUFtQztVQUNuQyxvQkFBaUI7YUFBakIsaUJBQWlCO1VBQ2pCLGlCQUFpQjtRQUNuQjs7TUFHRjtRQUNFLGdCQUFnQjtNQUNsQjs7TUFFQTtRQUNFLGdCQUFnQjtNQUNsQjs7SUFHRjtNQUNFLGlCQUFpQjtJQUNuQjs7RUFHRjtJQUNFLHdCQUF3QjtFQUMxQjtBQUNGOztBQUVBOztFQUVFOztBQUVGO0VBQ0U7O0lBRUUsNEJBQW1EO0lBQW5ELG1EQUFtRDtJQUNuRCxtQkFBbUI7RUFDckI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsY0FBYztJQUNoQjs7RUFHRjtJQUNFLGtCQUFrQjtFQVVwQjs7SUFSRTtNQUNFLFdBQVc7TUFDWCxrQkFBa0I7TUFDbEIsb0JBQW9CO01BQ3BCLHFCQUFxQjtNQUNyQixpQkFBaUI7TUFDakIsZ0JBQWdCO0lBQ2xCO0FBRUoiLCJmaWxlIjoiY2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvbnRlbnQgQ2FyZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtY2FyZCB7XG4gICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tY2FyZC1nYXAsIHZhcigtLWdhcCkpO1xuXG4gICAgJltjbGFzcyo9XCJteC1iYWNrZ3JvdW5kLS1cIl0ge1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cyk7XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgIC0tY29udGVudC1taW4tc3BhY2luZzogdmFyKC0tY29udGVudC1tYXgtc3BhY2luZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJjpub3QoOmhhcygubXgtY2FyZF9fbWVkaWEsIC5teC1jYXJkX19pY29uKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJiAubXgtY2FyZF9faWNvbiB7XG4gICAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tY29udGVudC1taW4tc3BhY2luZywgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgICB9XG5cbiAgICAgICYubXgtYmFja2dyb3VuZC0tYm94IHtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHVuc2V0O1xuICAgICAgfVxuICAgIH1cblxuICAgICY6aGFzKC5teC1jYXJkX19tZWRpYSkge1xuICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYVwiIFwiY29udGVudFwiIDFmciAvIDFmcjtcblxuICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tZ2FwLWwpO1xuICAgICAgICAtLWNhcmQtYWxpZ25tZW50OiBjZW50ZXI7XG5cbiAgICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYSBjb250ZW50XCIgMWZyIC8gdmFyKC0tbWVkaWEtY29sLCAxZnIpIHZhcihcbiAgICAgICAgICAgIC0tY29udGVudC1jb2wsXG4gICAgICAgICAgICAxZnJcbiAgICAgICAgICApO1xuXG4gICAgICAgICYubXgtY2FyZC0tcmV2ZXJzZWQge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBtZWRpYVwiO1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogdmFyKC0tY29udGVudC1jb2wsIDFmcikgdmFyKC0tbWVkaWEtY29sLCAxZnIpO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tbGFyZ2UtY2FyZC1nYXAsIDZyZW0pO1xuICAgICAgfVxuXG4gICAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAmOndoZXJlKDpub3QoLm14LWNhcmQtLXJldmVyc2VkKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJi5teC1jYXJkLS1yZXZlcnNlZCAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDA7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBncmlkLWFyZWE6IGNvbnRlbnQ7XG4gICAgICAgIGFsaWduLXNlbGY6IHZhcigtLWFsaWduLWNvbnRlbnQsIHZhcigtLWNhcmQtYWxpZ25tZW50LCBzdHJldGNoKSk7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX21lZGlhIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgICAgYWxpZ24tc2VsZjogdmFyKC0tYWxpZ24tbWVkaWEsIHZhcigtLWNhcmQtYWxpZ25tZW50LCBzdHJldGNoKSk7XG4gICAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuXG4gICAgICAgICYgaW1nIHtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmRfX2NvbnRlbnQgPiBhOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogYXV0bztcbiAgfVxufVxuXG4vKipcbiAqIENvbnRlbnQgQ2FyZCBHcmlkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1ncmlkOmhhcyg+ICo6bnRoLWNoaWxkKDIpOmxhc3QtY2hpbGQpXG4gICAgPiA6aXMoLm14LWNhcmQsIC5teC1jb250YWluZXI6aGFzKC5teC1jYXJkKSkge1xuICAgIGlubGluZS1zaXplOiBtaW4oMTAwJSwgdmFyKC0tbWF4LWNhcmQtd2lkdGgsIDM3Y2gpKTtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG59XG5cbi8qKlxuICogQ29udGVudCBDYXJkIExpbmtlZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICBhW2hyZWZdLm14LWNhcmQge1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmQtLWJsb2NrIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmIGE6OmJlZm9yZSB7XG4gICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG4iXX0= */
|
|
1
|
+
@layer design-system.components{.mx-card{block-size:100%;display:grid;grid-gap:var(--card-gap, var(--gap));gap:var(--card-gap, var(--gap))}.mx-card[class*=mx-background--]{border-radius:var(--border-radius)}@container (min-width: 720px){.mx-card[class*=mx-background--]{--content-min-spacing: var(--content-max-spacing, var(--spacing-m))}}.mx-card[class*=mx-background--] .mx-card__content{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-end:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--] .mx-card__icon{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card.mx-background--box[class*=mx-background--]{padding-inline:unset}.mx-card:has(.mx-card__media){grid-template:"media" "content" 1fr / 1fr}@container (min-width: 720px){.mx-card:has(.mx-card__media){--card-gap: var(--gap-l);--card-alignment: center;grid-template:"media content" 1fr / 1fr 1fr;grid-template:"media content" 1fr / var(--media-col, 1fr) var(--content-col, 1fr)}.mx-card.mx-card--reversed:has(.mx-card__media){grid-template-areas:"content media";grid-template-columns:1fr 1fr;grid-template-columns:var(--content-col, 1fr) var(--media-col, 1fr)}}@container (min-width: 946px){.mx-card:has(.mx-card__media){--card-gap: var(--large-card-gap, 6rem)}}@container (min-width: 720px){.mx-card[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content{padding-inline-start:0}.mx-card.mx-card--reversed[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-inline-end:0}}.mx-card:has(.mx-card__media) .mx-card__content{grid-area:content;align-self:stretch;align-self:var(--align-content, var(--card-alignment, stretch))}.mx-card:has(.mx-card__media) .mx-card__media{grid-area:media;align-self:stretch;align-self:var(--align-media, var(--card-alignment, stretch));inline-size:100%}:is(.mx-card:has(.mx-card__media) .mx-card__media) img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);-o-object-fit:cover;object-fit:cover;inline-size:100%}.mx-card:has(.mx-card__media) .mx-skeleton--bg{grid-area:media}.mx-card:has(.mx-card__media) .mx-card__icon{grid-area:media}.mx-card .mx-link-list{inline-size:100%}.mx-card__content>a:last-child{margin-block-start:auto}}@layer design-system.components{.mx-grid:has(>*:nth-child(2):last-child)>:is(.mx-card,.mx-container:has(.mx-card)){inline-size:min(100%,37ch);inline-size:min(100%,var(--max-card-width, 37ch));margin-inline:auto}}@layer design-system.components{a.mx-card[href]:hover{color:inherit}.mx-card--block{position:relative}.mx-card--block a:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}}
|
package/dist/build/carousel.css
CHANGED
|
@@ -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= */
|
|
1
|
+
@layer design-system.components.carousel{.mx-carousel{display:block}.mx-carousel__scrollable{list-style:none;display:flex;block-size:auto;block-size:var(--block-size, auto);overflow-x:auto;overflow-y:hidden;overflow:auto hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-color:var(--colour-foreground) var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar{block-size:1rem}.mx-carousel__scrollable::-webkit-scrollbar-track{background-color:var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar-thumb{background-color:var(--colour-foreground);background-image:linear-gradient(var(--colour-background) 0,var(--colour-background) .25rem,var(--colour-foreground) .25rem,var(--colour-foreground) .75rem,var(--colour-background) .75rem)}.mx-carousel__scrollable>li{flex:0 0 25ch;flex:0 0 var(--inline-size, 25ch);display:flex;scroll-snap-align:start}[inert]:is(.mx-carousel__scrollable>li){opacity:.3}:is(.mx-carousel__scrollable>li)+li{margin-inline-start:var(--gap)}:is(.mx-carousel__scrollable>li) .mx-container{inline-size:100%;display:flex}.mx-carousel__scrollable:not(:first-child){padding-block-start:var(--gap)}.mx-carousel__scrollable.overflowing:not(.no-bar){padding-block-end:var(--gap)}.mx-carousel__scrollable.no-bar{scrollbar-width:none}.mx-carousel__scrollable.no-bar::-webkit-scrollbar{display:none}.mx-carousel__buttons:not([hidden]){display:flex;gap:var(--gap-s)}.mx-carousel__buttons button[disabled]{opacity:.5}.mx-carousel__pagination{list-style:none;padding-inline:0;display:flex;align-items:center;gap:var(--spacing-xxxs)}.mx-carousel__pagination[data-pagination=counter]{--border-radius: var(--border-radius-round);--indent: 200%}.mx-carousel__pagination button{border-radius:var(--border-radius);border:2px solid var(--line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--line-colour, var(--colour-border));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));min-block-size:2em;min-inline-size:2em;font-family:inherit;text-align:center;cursor:pointer;overflow:hidden;text-indent:inherit;text-indent:var(--indent, unset)}[disabled]:is(.mx-carousel__pagination button){--background: var(--active-background, var(--colour-border));cursor:not-allowed}}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { i as makeAnchor } from "./utilities-DepaJdUg.js";
|
|
2
|
+
var Accordion = class extends HTMLElement {
|
|
3
|
+
internals_;
|
|
4
|
+
controller;
|
|
5
|
+
constructor() {
|
|
6
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
7
|
+
}
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
if (!this.details || !this.trigger) return;
|
|
10
|
+
let { signal: e } = this.controller;
|
|
11
|
+
document.addEventListener("beforeprint", this.handleOpen, { signal: e }), document.addEventListener("afterprint", this.handleClose, { signal: e }), this.handleHash(), document.addEventListener("hashchange", this.handleHash, { signal: e });
|
|
12
|
+
}
|
|
13
|
+
disconnectedCallback() {
|
|
14
|
+
this.controller.abort();
|
|
15
|
+
}
|
|
16
|
+
handleOpen = () => {
|
|
17
|
+
this.details && (this.details.open = !0);
|
|
18
|
+
};
|
|
19
|
+
handleClose = () => {
|
|
20
|
+
this.details && (this.details.open = !1);
|
|
21
|
+
};
|
|
22
|
+
handleHash = () => {
|
|
23
|
+
let { hash: e } = window.location;
|
|
24
|
+
e && e === `#${this.details?.id}` && this.handleOpen();
|
|
25
|
+
};
|
|
26
|
+
get details() {
|
|
27
|
+
let e = this.querySelector("details");
|
|
28
|
+
if (!e) throw Error(`${this.localName} must contain a <details> element.`);
|
|
29
|
+
return e.id = e.id || this.generatedId(), e;
|
|
30
|
+
}
|
|
31
|
+
get trigger() {
|
|
32
|
+
let e = this.querySelector("summary");
|
|
33
|
+
if (!e) throw Error(`${this.localName} must contain a <summary> element.`);
|
|
34
|
+
return e;
|
|
35
|
+
}
|
|
36
|
+
generatedId = () => {
|
|
37
|
+
let t = this.trigger?.textContent?.trim();
|
|
38
|
+
return t ? makeAnchor(t) : "";
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
customElements.get("mx-accordion") || customElements.define("mx-accordion", Accordion);
|
|
42
|
+
export { Accordion as t };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { t as Popover } from "./Popover-Bws25suh.js";
|
|
2
|
+
var DropMenu = class extends Popover {
|
|
3
|
+
controller;
|
|
4
|
+
closeOnClick;
|
|
5
|
+
constructor() {
|
|
6
|
+
super(), this.controller = new AbortController();
|
|
7
|
+
}
|
|
8
|
+
async connectedCallback() {
|
|
9
|
+
if (await super.connectedCallback(), !this.container || !this.trigger) return;
|
|
10
|
+
this.closeOnClick = this.hasAttribute("closeonclick");
|
|
11
|
+
let { signal: e } = this.controller;
|
|
12
|
+
document.addEventListener("click", (e) => {
|
|
13
|
+
let t = e.target, n = t.closest("a, button");
|
|
14
|
+
t !== this.container && ![...this.items].includes(n) || (this.handleSelect(e), e.preventDefault());
|
|
15
|
+
}, { signal: e }), document.addEventListener("keydown", (e) => {
|
|
16
|
+
let { target: t, key: n } = e;
|
|
17
|
+
t !== this.container && ![...this.items].includes(t) || (n === "Enter" && this.handleSelect(e), e.preventDefault());
|
|
18
|
+
}, { signal: e });
|
|
19
|
+
}
|
|
20
|
+
disconnectedCallback() {
|
|
21
|
+
this.controller.abort();
|
|
22
|
+
}
|
|
23
|
+
handleSelect = (e) => {
|
|
24
|
+
let t = e.target;
|
|
25
|
+
this.items?.forEach((e) => {
|
|
26
|
+
e instanceof HTMLButtonElement && e.setAttribute("aria-checked", String(e === t));
|
|
27
|
+
});
|
|
28
|
+
let n = new CustomEvent("drop-menu-select", {
|
|
29
|
+
bubbles: !0,
|
|
30
|
+
cancelable: !0,
|
|
31
|
+
detail: {
|
|
32
|
+
event: e,
|
|
33
|
+
target: t
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
this.container.dispatchEvent(n), this.closeOnClick && this.container.togglePopover();
|
|
37
|
+
};
|
|
38
|
+
get items() {
|
|
39
|
+
return this.container.querySelectorAll("a, button");
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
customElements.get("mx-dropmenu") || customElements.define("mx-dropmenu", DropMenu);
|
|
43
|
+
export { DropMenu as t };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var Popover = class extends HTMLElement {
|
|
2
|
+
internals_;
|
|
3
|
+
constructor() {
|
|
4
|
+
super(), this.internals_ = this.attachInternals();
|
|
5
|
+
}
|
|
6
|
+
async connectedCallback() {
|
|
7
|
+
if (!(!this.container || !this.trigger)) {
|
|
8
|
+
if (!("anchorName" in document.documentElement.style)) {
|
|
9
|
+
let { default: e } = await import("./polyfills-Du4RTZDf.js");
|
|
10
|
+
new e(this.container);
|
|
11
|
+
}
|
|
12
|
+
typeof HTMLElement < "u" && typeof HTMLElement.prototype == "object" && "popover" in HTMLElement.prototype && await import("./popover-Bd5oQ1Ic.js");
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
get container() {
|
|
16
|
+
let e = this.querySelector("[popover]");
|
|
17
|
+
if (!e) throw Error(`${this.localName} must contain a <div popover> element.`);
|
|
18
|
+
return e;
|
|
19
|
+
}
|
|
20
|
+
get trigger() {
|
|
21
|
+
let e = this.querySelector(`[popovertarget=${this.container?.id}]`);
|
|
22
|
+
if (!e) throw Error(`${this.localName} must contain a <button popovertarget="${this.container.id}">`);
|
|
23
|
+
return e;
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
customElements.get("mx-popover") || customElements.define("mx-popover", Popover);
|
|
27
|
+
export { Popover as t };
|