@pnx-mixtape/mxds 0.1.0-rc.3 → 0.1.0-rc.5
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/.claude/skills/create-mxds-component/SKILL.md +77 -0
- package/DESIGN.md +595 -0
- package/README.md +1 -2
- package/dist/build/accordion.css +1 -1
- package/dist/build/accordion.entry.js +2 -1
- package/dist/build/autocomplete.entry.js +1 -1
- package/dist/build/back-to-top.css +1 -0
- package/dist/build/back-to-top.entry.js +1 -0
- package/dist/build/base.css +1 -1
- package/dist/build/button.css +1 -1
- package/dist/build/card.css +1 -1
- package/dist/build/carousel.css +1 -1
- package/dist/build/chunks/Accordion-D2wp8hBG.js +44 -0
- package/dist/build/chunks/AccordionGroup-BYtoAFxg.js +47 -0
- package/dist/build/chunks/AccordionMobile-D3sTeiM5.js +26 -0
- package/dist/build/chunks/Autocomplete-kRo8RNbC.js +135 -0
- package/dist/build/chunks/BackToTop-4M-Wl7z3.js +64 -0
- package/dist/build/chunks/ClosableAlert-yy84gae6.js +55 -0
- package/dist/build/chunks/CookieConsent-wd8gQ2Oe.js +18 -0
- package/dist/build/chunks/Dialog-DWoXW-7Z.js +48 -0
- package/dist/build/chunks/DropMenu-CSTZq0Zt.js +68 -0
- package/dist/build/chunks/FeedbackForm-BochXEDx.js +64 -0
- package/dist/build/chunks/Gallery-Rkfv7Mbb.js +165 -0
- package/dist/build/chunks/GlobalToggle-CzlkpLpc.js +82 -0
- package/dist/build/chunks/InPageNavigation-D1Kk-rCm.js +86 -0
- package/dist/build/chunks/Navigation-CDQnN61h.js +147 -0
- package/dist/build/chunks/Popover-CiTAftNU.js +30 -0
- package/dist/build/chunks/Sticky-DoVndENm.js +51 -0
- package/dist/build/chunks/Tabs-BDlxCDNh.js +160 -0
- package/dist/build/chunks/Translate-bmM38j6z.js +46 -0
- package/dist/build/chunks/cookie-compliance-CG6x-TcV.js +119 -0
- package/dist/build/chunks/enums-BrHxPZZ_.js +36 -0
- package/dist/build/chunks/polyfills-D-qh1a_2.js +33 -0
- package/dist/build/chunks/utilities-Dd-08SW6.js +255 -0
- package/dist/build/constants.css +1 -1
- package/dist/build/content-block.css +1 -1
- package/dist/build/cookie-consent.css +1 -1
- package/dist/build/cookie-consent.entry.js +1 -1
- package/dist/build/dialog.css +1 -1
- package/dist/build/dialog.entry.js +1 -1
- package/dist/build/drop-menu.entry.js +1 -1
- package/dist/build/elements.js +147 -1
- package/dist/build/feedback-form.css +1 -0
- package/dist/build/feedback-form.entry.js +1 -0
- package/dist/build/filters.entry.js +145 -1
- package/dist/build/form.css +1 -1
- package/dist/build/gallery.entry.js +1 -1
- package/dist/build/global-alert.css +1 -1
- package/dist/build/global-alert.entry.js +1 -1
- package/dist/build/grid.css +1 -1
- package/dist/build/header.css +1 -1
- package/dist/build/header.entry.js +1 -1
- package/dist/build/icon.css +1 -1
- package/dist/build/in-page-navigation.entry.js +1 -1
- package/dist/build/navigation.css +1 -1
- package/dist/build/navigation.entry.js +1 -1
- package/dist/build/pagination.css +1 -1
- package/dist/build/popover.css +1 -1
- package/dist/build/popover.entry.js +1 -1
- package/dist/build/react.js +2270 -1
- package/dist/build/sticky.entry.js +1 -1
- package/dist/build/tabs.css +1 -1
- package/dist/build/tabs.entry.js +1 -1
- package/dist/build/translate.css +1 -0
- package/dist/build/translate.entry.js +1 -0
- package/dist/build/utility-list.entry.js +53 -1
- package/dist/types/Component/BackToTop/BackToTop.d.ts +20 -0
- package/dist/types/Component/BackToTop/BackToTop.d.ts.map +1 -0
- package/dist/types/Component/BackToTop/Elements/BackToTop.d.ts +27 -0
- package/dist/types/Component/BackToTop/Elements/BackToTop.d.ts.map +1 -0
- package/dist/types/Component/BackToTop/back-to-top.entry.d.ts +2 -0
- package/dist/types/Component/BackToTop/back-to-top.entry.d.ts.map +1 -0
- package/dist/types/Component/DropMenu/DropMenu.d.ts +2 -1
- package/dist/types/Component/DropMenu/DropMenu.d.ts.map +1 -1
- package/dist/types/Component/Tabs/Components/TabDropMenu.d.ts.map +1 -1
- package/dist/types/Component/Tabs/Elements/Tabs.d.ts.map +1 -1
- package/dist/types/Component/Translate/Elements/Translate.d.ts +23 -0
- package/dist/types/Component/Translate/Elements/Translate.d.ts.map +1 -0
- package/dist/types/Component/Translate/Translate.d.ts +37 -0
- package/dist/types/Component/Translate/Translate.d.ts.map +1 -0
- package/dist/types/Component/Translate/languages.d.ts +11 -0
- package/dist/types/Component/Translate/languages.d.ts.map +1 -0
- package/dist/types/Component/Translate/translate.entry.d.ts +2 -0
- package/dist/types/Component/Translate/translate.entry.d.ts.map +1 -0
- package/dist/types/Form/FeedbackForm/Elements/FeedbackForm.d.ts +37 -0
- package/dist/types/Form/FeedbackForm/Elements/FeedbackForm.d.ts.map +1 -0
- package/dist/types/Form/FeedbackForm/FeedbackForm.d.ts +36 -0
- package/dist/types/Form/FeedbackForm/FeedbackForm.d.ts.map +1 -0
- package/dist/types/Form/FeedbackForm/feedback-form.entry.d.ts +2 -0
- package/dist/types/Form/FeedbackForm/feedback-form.entry.d.ts.map +1 -0
- package/dist/types/Utility/Elements/google-translate-widget.d.ts +91 -0
- package/dist/types/Utility/Elements/google-translate-widget.d.ts.map +1 -0
- package/dist/types/Utility/utilities.d.ts +2 -0
- package/dist/types/Utility/utilities.d.ts.map +1 -1
- package/dist/types/elements.d.ts +3 -0
- package/dist/types/elements.d.ts.map +1 -1
- package/dist/types/enums.d.ts +3 -1
- package/dist/types/enums.d.ts.map +1 -1
- package/dist/types/react.d.ts +3 -0
- package/dist/types/react.d.ts.map +1 -1
- package/docs/API.md +1215 -0
- package/docs/CSSGuidelines.md +891 -0
- package/docs/CodeQuality.md +940 -0
- package/docs/ComponentArchitecture.md +714 -0
- package/docs/Contributing.md +626 -0
- package/docs/MemoryManagement.md +598 -0
- package/docs/Migrations.md +6 -0
- package/docs/README.md +100 -0
- package/docs/Security.md +444 -0
- package/docs/Testing.md +739 -0
- package/docs/Troubleshooting.md +674 -0
- package/package.json +6 -3
- package/src/Atom/Button/Button.tsx +1 -1
- package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +2 -2
- package/src/Atom/Button/_buttons.css +1 -0
- package/src/Atom/Icon/README.md +1 -1
- package/src/Atom/Icon/_icon.css +1 -0
- package/src/Atom/Icon/images/thumb.svg +1 -0
- package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +4 -9
- package/src/Atom/Media/media.twig +4 -5
- package/src/Atom/_generic.css +0 -10
- package/src/Component/Accordion/accordion.css +3 -1
- package/src/Component/BackToTop/BackToTop.stories.ts +127 -0
- package/src/Component/BackToTop/BackToTop.stories.tsx +53 -0
- package/src/Component/BackToTop/BackToTop.tsx +120 -0
- package/src/Component/BackToTop/Elements/BackToTop.ts +119 -0
- package/src/Component/BackToTop/README.md +164 -0
- package/src/Component/BackToTop/__snapshots__/BackToTop.stories.ts.snap +24 -0
- package/src/Component/BackToTop/__snapshots__/BackToTop.stories.tsx.snap +3 -0
- package/src/Component/BackToTop/back-to-top.css +70 -0
- package/src/Component/BackToTop/back-to-top.entry.js +1 -0
- package/src/Component/BackToTop/back-to-top.twig +26 -0
- package/src/Component/Card/Components/CardContent.tsx +1 -1
- package/src/Component/Card/Components/CardMedia.tsx +1 -1
- package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +3 -3
- package/src/Component/Card/card.css +1 -1
- package/src/Component/Carousel/Carousel.stories.ts +66 -36
- package/src/Component/Carousel/__snapshots__/Carousel.stories.tsx.snap +5 -5
- package/src/Component/Carousel/carousel.css +1 -1
- package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx +1 -1
- package/src/Component/ContentBlock/content-block.css +1 -1
- package/src/Component/CookieConsent/cookie-consent.css +3 -0
- package/src/Component/Dialog/dialog.css +5 -2
- package/src/Component/DropMenu/DropMenu.stories.ts +21 -2
- package/src/Component/DropMenu/DropMenu.tsx +14 -4
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +3 -3
- package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -2
- package/src/Component/DropMenu/drop-menu.twig +7 -1
- package/src/Component/GlobalAlert/global-alert.css +3 -0
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +1 -1
- package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +48 -13
- package/src/Component/InPageNavigation/in-page-navigation.twig +4 -6
- package/src/Component/ListItem/Components/ListItemMedia.tsx +1 -1
- package/src/Component/Navigation/_navigation-collapsible.css +3 -1
- package/src/Component/Navigation/_navigation-dropdown.css +3 -1
- package/src/Component/Pagination/Pagination.stories.ts +57 -27
- package/src/Component/Pagination/pagination.css +16 -7
- package/src/Component/Popover/__snapshots__/Popover.stories.tsx.snap +3 -3
- package/src/Component/Popover/popover.css +3 -1
- package/src/Component/Tabs/Components/TabDropMenu.tsx +7 -1
- package/src/Component/Tabs/Elements/Tabs.ts +13 -3
- package/src/Component/Tabs/Tabs.stories.ts +33 -12
- package/src/Component/Tabs/Tabs.stories.tsx +28 -14
- package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +3 -3
- package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -2
- package/src/Component/Tabs/tabs.css +4 -5
- package/src/Component/Translate/Elements/Translate.ts +76 -0
- package/src/Component/Translate/README.md +283 -0
- package/src/Component/Translate/Translate.stories.ts +87 -0
- package/src/Component/Translate/Translate.stories.tsx +77 -0
- package/src/Component/Translate/Translate.tsx +213 -0
- package/src/Component/Translate/__snapshots__/Translate.stories.ts.snap +18 -0
- package/src/Component/Translate/__snapshots__/Translate.stories.tsx.snap +3 -0
- package/src/Component/Translate/languages.ts +39 -0
- package/src/Component/Translate/translate.css +62 -0
- package/src/Component/Translate/translate.entry.js +1 -0
- package/src/Component/Translate/translate.twig +44 -0
- package/src/Form/Autocomplete/Autocomplete.stories.tsx +2 -1
- package/src/Form/FeedbackForm/Elements/FeedbackForm.ts +122 -0
- package/src/Form/FeedbackForm/FeedbackForm.stories.ts +99 -0
- package/src/Form/FeedbackForm/FeedbackForm.stories.tsx +73 -0
- package/src/Form/FeedbackForm/FeedbackForm.tsx +196 -0
- package/src/Form/FeedbackForm/README.md +233 -0
- package/src/Form/FeedbackForm/__snapshots__/FeedbackForm.stories.ts.snap +125 -0
- package/src/Form/FeedbackForm/__snapshots__/FeedbackForm.stories.tsx.snap +5 -0
- package/src/Form/FeedbackForm/feedback-form.css +74 -0
- package/src/Form/FeedbackForm/feedback-form.entry.js +1 -0
- package/src/Form/FeedbackForm/feedback-form.twig +80 -0
- package/src/Form/form.css +5 -3
- package/src/Layout/Grid/Grid.stories.ts +1 -0
- package/src/Layout/Grid/Grid.stories.tsx +26 -0
- package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +2 -0
- package/src/Layout/Grid/grid.css +12 -0
- package/src/Layout/Header/Components/GlobalToggle.tsx +1 -1
- package/src/Layout/Header/Header.stories.ts +53 -48
- package/src/Layout/Header/Header.stories.tsx +35 -22
- package/src/Layout/Header/Header.tsx +2 -2
- package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +14 -10
- package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -2
- package/src/Layout/Header/_header.css +4 -2
- package/src/Layout/Header/_toggles.css +9 -6
- package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +1 -1
- package/src/Utility/Elements/google-translate-widget.ts +293 -0
- package/src/Utility/_mixins.css +35 -13
- package/src/Utility/global.d.ts +4 -0
- package/src/Utility/utilities.ts +2 -0
- package/src/_custom-media.css +2 -2
- package/src/constants.css +3 -13
- package/src/elements.ts +3 -0
- package/src/enums.ts +2 -0
- package/src/react.ts +3 -0
- package/dist/build/chunks/Accordion-GN0sME4W.js +0 -1
- package/dist/build/chunks/AccordionGroup-Bzqp5__q.js +0 -1
- package/dist/build/chunks/AccordionMobile-DG5jSe8Q.js +0 -1
- package/dist/build/chunks/Autocomplete-B4RtkAyh.js +0 -1
- package/dist/build/chunks/ClosableAlert-DEhj8Nxm.js +0 -1
- package/dist/build/chunks/CookieConsent-BkCMRVST.js +0 -1
- package/dist/build/chunks/Dialog-Haahn-Yn.js +0 -1
- package/dist/build/chunks/DropMenu-1baQc8Yc.js +0 -1
- package/dist/build/chunks/Gallery-D8NGXy2Q.js +0 -1
- package/dist/build/chunks/GlobalToggle-B52fdBQu.js +0 -1
- package/dist/build/chunks/InPageNavigation-Dyn2TR-N.js +0 -1
- package/dist/build/chunks/Navigation-hOrfLq7h.js +0 -1
- package/dist/build/chunks/Popover-Cxg-s5Jn.js +0 -1
- package/dist/build/chunks/Sticky-BGCuuEJK.js +0 -1
- package/dist/build/chunks/Tabs-DYy1YTdU.js +0 -15
- package/dist/build/chunks/cookie-compliance-Bbm-0vpj.js +0 -1
- package/dist/build/chunks/enums-DLV_1NAf.js +0 -1
- package/dist/build/chunks/polyfills-C7pRt54M.js +0 -1
- package/dist/build/chunks/utilities-_Bq3TxAQ.js +0 -1
package/dist/build/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer popover-polyfill;@layer design-system.defaults{details{& summary{list-style-type:none;&:is(){content:"";display:none}}}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group){display:block}:where(:is(div.mx-accordion,mx-accordiondiv)){& .mx-accordion__toggle{appearance:none;color:inherit;font-size:inherit;background:initial;border:initial;padding:initial}}mx-accordion-group:not(:defined) .mx-accordions__toggle-all{display:none}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-accordion__title{gap:var(--spacing-s);flex-flow:wrap;align-items:center;margin-block-end:var(--spacing-m);display:flex}.mx-accordions__toggle-all{margin-inline-start:auto}.mx-accordion{& .mx-accordion__toggle{cursor:pointer;text-align:start;inline-size:100%}&>:is(h2,h3,h4,h5,h6){all:unset}&>.mx-accordion__content{opacity:
|
|
1
|
+
@layer popover-polyfill;@layer design-system.defaults{details{& summary{list-style-type:none;&:is(){content:"";display:none}}}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group){display:block}:where(:is(div.mx-accordion,mx-accordiondiv)){& .mx-accordion__toggle{appearance:none;color:inherit;font-size:inherit;background:initial;border:initial;padding:initial}}mx-accordion-group:not(:defined) .mx-accordions__toggle-all{display:none}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-accordion__title{gap:var(--spacing-s);flex-flow:wrap;align-items:center;margin-block-end:var(--spacing-m);display:flex}.mx-accordions__toggle-all{margin-inline-start:auto}.mx-accordion{& .mx-accordion__toggle{cursor:pointer;text-align:start;inline-size:100%}&>:is(h2,h3,h4,h5,h6){all:unset}&>.mx-accordion__content{opacity:1;transition-property:var(--transition-property,opacity, color, background-color, border-color, transform, rotate, display, overlay);transition-duration:var(--transition-duration,.5s);transition-timing-function:var(--ease);transition-behavior:allow-discrete;@starting-style{opacity:0}display:none;overflow:hidden}&:is([open],[data-open=true]){&>.mx-accordion__toggle{& .mx-icon--chevron-down{transform:rotate(180deg)}}&>.mx-accordion__content{opacity:1;display:block;@starting-style{opacity:0;display:block}}}}.mx-accordion--divided{border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));& .mx-accordion__toggle{padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0);justify-content:space-between;align-items:center;gap:var(--spacing-xxs);font-size:var(--font-size);font-weight:var(--font-weight-normal);display:flex;& .mx-icon{margin-inline-start:auto}}&:is([open],[data-open=true]){&>.mx-accordion__content{border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0)}}}}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import"./chunks/Accordion-
|
|
1
|
+
import "./chunks/Accordion-D2wp8hBG.js";
|
|
2
|
+
import "./chunks/AccordionGroup-BYtoAFxg.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./chunks/Autocomplete-
|
|
1
|
+
import "./chunks/Autocomplete-kRo8RNbC.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer popover-polyfill;@layer design-system.defaults{mx-back-to-top{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-back-to-top{--back-to-top-display:block;display:var(--back-to-top-display,none);z-index:var(--back-to-top-z-index,10);position:fixed;inset-block-end:calc(var(--back-to-top-gap,64px) + var(--back-to-top-offset,var(--sticky-offset,0px)));inset-inline-end:var(--back-to-top-inline-end,var(--spacing-m));@media print{--back-to-top-display:none}}.mx-back-to-top--l{display:var(--back-to-top-display,none);z-index:var(--back-to-top-z-index,10);position:fixed;inset-block-end:calc(var(--back-to-top-gap,64px) + var(--back-to-top-offset,var(--sticky-offset,0px)));inset-inline-end:var(--back-to-top-inline-end,var(--spacing-m));@media (width>=946px){--back-to-top-display:block}@media print{--back-to-top-display:none}}:is(.mx-back-to-top,.mx-back-to-top--l).is-enhanced{visibility:hidden;opacity:0;transition:visibility 0s linear .3s,opacity .3s;@media (prefers-reduced-motion:reduce){transition:none}&.is-visible{visibility:visible;opacity:1;transition:visibility linear,opacity .3s}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./chunks/BackToTop-4M-Wl7z3.js";
|
package/dist/build/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer popover-polyfill;@layer design-system.defaults{:where([class*=mx-background--]){background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme));& :where([class*=mx-background--]){--scheme:var(--colour-scheme);--background:var(--colour-background);--line-colour:var(--colour-border);--foreground-alt:var(--colour-foreground-alt);--embellished-colour:var(--colour-accent);--button-accent-scheme:dark}}.mx-background--alt{--scheme:var(--alt-scheme,var(--colour-scheme));--background:var(--colour-background-alt)}.mx-background--primary{--contrast-color:contrast-color(var(--colour-primary));--scheme:var(--primary-scheme,var(--colour-primary-scheme,var(--colour-scheme)));--background:var(--colour-primary);--line-colour:light-dark(var(--colour-primary-darker),var(--colour-primary-lighter));--foreground-alt:var(--colour-primary-light);--embellished-colour:var(--colour-primary-darker);--button-accent-scheme:var(--colour-accent-scheme,light)}.mx-background--accent{--contrast-color:contrast-color(var(--colour-accent));--scheme:var(--accent-scheme,var(--colour-accent-scheme,var(--colour-scheme)));--background:var(--colour-accent);--line-colour:light-dark(var(--colour-accent-darker),var(--colour-accent-lighter));--foreground-alt:var(--colour-accent-darkest);--embellished-colour:var(--colour-accent-darker);--button-accent-scheme:dark}.mx-background--reverse{--contrast-color:contrast-color(black);--scheme:var(--reverse-scheme,var(--colour-reverse-scheme,dark));--embellished-colour:var(--colour-border);--button-accent-scheme:var(--colour-accent-scheme,light);& .mx-background--image{--bg-img-brightness:.45;--bg-img-opacity:1}}.mx-background--box{border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding-inline:var(--gutter,1rem)}.mx-background--image{& img{object-fit:cover;min-block-size:100%;inline-size:100%;filter:brightness(var(--bg-img-brightness,1)) saturate(var(--bg-img-saturate,1.25)) opacity(var(--bg-img-opacity,.5));position:absolute}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:is(*){box-sizing:border-box;opacity:1;transition-property:opacity,color,background-color,border-color,transform,rotate,display,overlay;transition-duration:.5s;transition-timing-function:var(--ease);transition-behavior:allow-discrete;background-repeat:no-repeat;margin:0;@starting-style{opacity:0}}:focus{scroll-padding-block-end:4vh}:focus-visible{outline:var(--outline-size,2px) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset,var(--outline-size,2px))}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%;padding-inline:unset;padding-block:unset}:target,[id],.has-scroll-margin{scroll-margin-block-start:calc(var(--sticky-offset,0rem) + var(--scroll-margin,var(--spacing-m)))}:is(b,strong){font-weight:var(--font-weight-bold)}u{-webkit-text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-thickness:var(--embellished-line-height,1ch);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:var(--embellished-offset,-.35ch)}:is(ol,ul){padding-inline-start:var(--spacing-m);&[role=list]{padding-inline-start:0;list-style:none}}dl{gap:var(--spacing-xs);grid-template-rows:1fr;inline-size:100%;display:grid;&:has(>div){container-type:inline-size}& div{gap:var(--spacing-xxxs);align-content:start;display:grid}& dt{font-weight:var(--font-weight-bold)}&:where(:not(.mx-list--columns)){grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr;& div{grid-template-columns:subgrid;grid-column:span 2;@container (width<=60ch){&>:is(dt,dd){grid-column:span 2}}}}}p{text-wrap:pretty}.mx-vertical-flow{&>:where(:not(:first-child,.mx-vertical-flow__collapse)){margin-block-start:var(--flow-gap,var(--gap))}&.mx-rich-text>.mx-text--lede{--flow-gap:var(--gap-xl)}}.mx-vertical-flow-flex{align-items:start;gap:var(--flow-gap,var(--gap));flex-direction:column;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-vertical-flow-grid{align-items:start;gap:var(--flow-gap,var(--gap));display:grid;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-horizontal-flow-flex{gap:var(--flow-gap,var(--gap));flex-wrap:wrap;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s,h6,.mx-heading--xs){font-family:var(--heading-font-family,var(--font-family-display,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));letter-spacing:var(--heading-letter-spacing,0);text-wrap:balance;&[class*=mx-background--]{background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}}@supports (font-size:1cqi){:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s){--font-min:calc(var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-s), var(--font-min)), var(--font-min) + 1cqi, var(--heading-font-size))}}.mx-headline{--heading-font-size:var(--font-size-xxxl)}h1,.mx-heading--xxl{--heading-font-size:var(--font-size-xxl)}h2,.mx-heading--xl{--heading-font-size:var(--font-size-xl)}h3,.mx-heading--l{--heading-font-size:var(--font-size-l)}h4,.mx-heading--m{--heading-font-size:var(--font-size-ml)}h5,.mx-heading--s{--heading-font-size:var(--font-size-m)}h6,.mx-heading--xs{--heading-font-size:var(--font-size-s)}blockquote{border-inline-start:var(--line-width,6px) solid var(--line-colour,var(--blockquote-line-colour,var(--colour-accent)));font-size:var(--blockquote-font-size,var(--font-size-ml));padding-inline-start:var(--line-gap,var(--gap));& cite{font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));font-family:var(--font-family-ui,var(--font-family));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);font-style:normal;display:block}}hr{border:0;border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));block-size:0;margin-block:var(--line-gap,var(--spacing-m));display:block}a[href]{color:var(--link-colour,var(--colour-link));-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-decoration:underline;text-decoration-thickness:max(.08em,1px);&:hover,&:active{text-underline-offset:.2em;text-decoration-thickness:max(.09em,2px)}@media (forced-colors:active){--forced-colour:LinkText}}.mx-link--external{gap:var(--spacing-xxxs);align-items:center;margin-inline-end:var(--spacing-xxxs);display:inline-flex;&:after{content:"";block-size:var(--spacing-s);inline-size:var(--spacing-s);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}}.mx-link--more{font-weight:var(--font-weight-bold);display:inline-flex;&:hover .mx-icon{transform:translate(3px)}}.mx-link--download{&:hover .mx-icon{transform:translateY(3px)}}a:where([href]):has(.mx-icon){align-items:center;gap:var(--spacing-xxs);display:inline-flex}figure{inline-size:var(--width,100%);margin:0;display:block;& :is(picture,img,iframe,video){inline-size:100%}}figcaption{padding:var(--spacing-xxs);font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);display:block}img{vertical-align:bottom;block-size:auto;max-inline-size:100%}svg:not([fill]){fill:currentColor}.mx-video{&,& :is(embed,object,iframe){aspect-ratio:16/9;border:0;block-size:100%;inline-size:100%}}.mx-media--video{inline-size:100%}table{font-size:var(--font-size-s);border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums;inline-size:100%;margin:0;& th{font-weight:var(--font-weight-bold);text-align:start}& :is(td,th){padding:var(--spacing-xxs);border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));font-family:var(--font-family-ui,var(--font-family));vertical-align:top}& thead :is(td,th){border-block-end:var(--line-width,1.5px) solid currentcolor}& caption{padding:var(--spacing-xxs);text-align:start;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);caption-side:bottom}& tfoot :is(td,th){border-block-start:var(--line-width,1.5px) solid currentcolor;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h))}}.mx-table--flush{& :is(td,th){&:first-child{padding-inline-start:0}&:last-child{padding-inline-end:0}}}.mx-table--small{& :is(td,th){font-size:var(--font-size-s);line-height:var(--line-height-h)}}.mx-table--striped{& tbody tr{&:nth-child(2n){& :is(td,th){background-color:var(--colour-background-alt)}}}}.mx-table--bordered{& :is(td,th){border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-inline:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-table--responsive{max-inline-size:100%;@media (width<720px){-webkit-overflow-scrolling:touch;box-shadow:var(--box-shadow) inset;overflow-y:scroll;& table{inline-size:100%;margin-block:0;margin-inline:var(--spacing-s);& td{min-inline-size:20ch}}}}}@layer design-system.atoms{:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--lede,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){font-size:var(--font-size)}@supports (font-size:1cqi){:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--lede,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline){--heading-font-size:var(--font-size-xs);--font-size:var(--font-size-xs);text-transform:var(--heading-transform,uppercase);font-weight:var(--heading-font-weight,var(--font-weight-bold));font-family:var(--font-family-ui,var(--font-family));letter-spacing:var(--heading-letter-spacing,0);line-height:var(--line-height-h);text-wrap:balance}:is(.mx-text--eyebrow,.mx-text--section-headline){margin-block:0;&+:is(h2,h3,p){--flow-gap:var(--spacing-xxxxs)}}:is(.mx-text--embellished,.mx-text--embellished-headline){--contrast-color:contrast-color(var(--embellished-colour,var(--colour-accent)));text-wrap:balance;z-index:1;display:inline-block;position:relative;&:after{content:"";inline-size:min(var(--embellished-line-width,6ch), 100%);block-size:var(--embellished-line-height,1ch);background-color:var(--embellished-colour,var(--colour-accent));z-index:-1;display:block;position:absolute;inset-block-end:var(--embellished-offset,-.25ch);@container style((--contrast-color:white) and (--scheme:light)){background-color:var(--embellished-colour-rev,var(--colour-accent-light))}}&+:is(h2,h3,p){--flow-gap:var(--spacing-l)}}.mx-text--lede{--font-size:var(--font-size-ml)}.mx-text--xxxl{--font-size:var(--font-size-xxxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xxl{--font-size:var(--font-size-xxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xl{--font-size:var(--font-size-xl);line-height:var(--line-height-h)}.mx-text--l{--font-size:var(--font-size-l);line-height:var(--line-height-h)}.mx-text--m{--font-size:var(--font-size-m)}.mx-text--s{--font-size:var(--font-size-s)}.mx-text--xs{--font-size:var(--font-size-xs)}.mx-text--meta{--font-size:var(--font-size-xs);--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground);gap:.2rem;display:grid}.mx-text--alt{--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground)}.mx-text--primary{--foreground:var(--foreground-primary,light-dark(var(--colour-primary),var(--colour-primary-light)));color:var(--foreground)}.mx-text--accent{--foreground:var(--foreground-accent,var(--colour-accent));color:var(--foreground)}:where([class*=mx-text--][class*=mx-background--]){background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}.mx-rich-text{font-family:var(--font-family-prose,var(--font-family));& :is(p,li){max-inline-size:var(--prose-measure,var(--container-max-width))}}:is(.mx-media--left,.mx-media--right,.mx-media--center){@media (width>=540px){max-inline-size:50%;margin-block-end:var(--spacing-s);&:first-child{margin-block-start:0;&+*{margin-block-start:0!important}}}}.mx-media--center{margin-inline:auto}:is(.mx-media--left,[dir=rtl] .mx-media--right,.translated-rtl .mx-media--right){@media (width>=540px){float:left;margin-inline:0 var(--spacing-m)}}:is(.mx-media--right,[dir=rtl] .mx-media--left,.translated-rtl .mx-media--left){@media (width>=540px){float:right;margin-inline:var(--spacing-m) 0}}.mx-list{gap:var(--spacing-xxxs);counter-reset:fn;margin-block:0;padding-inline-start:0;list-style:none;display:grid;& li{counter-increment:fn;max-inline-size:var(--prose-measure,70ch)}}.mx-list--notes li{font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l);position:relative;&:before{content:counter(fn) ".";font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);font-variant-numeric:tabular-nums lining-nums;position:absolute;inset-block-start:2px;inset-inline-start:0}}.mx-list--refs li{text-indent:calc(var(--gap-l) * -1);font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l)}.mx-list--stats{--font-size:var(--stat-font-size,var(--font-size-xxl));grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));font-size:var(--list-font-size,var(--font-size-s));text-wrap:balance;grid-template-rows:1fr;@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}& :is(b,strong){font-family:var(--font-family-display,var(--font-family));font-size:var(--font-size);font-weight:var(--stat-font-weight,var(--font-weight-bold));font-variant-numeric:tabular-nums lining-nums;line-height:1;display:block;@supports (font-size:1cqi){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}}.mx-list--columns{grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}}.mx-list--summary{grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr auto;&>div{grid-template-columns:subgrid;padding-block:var(--spacing-xs);border-block-end:1px solid var(--colour-border);grid-column:span 3;&:first-child{border-block-start:2px solid var(--colour-foreground)}@container (width<=60ch){grid-column:1/-1;grid-template-columns:1fr auto;&>dt{grid-column:1/-1}}}& .mx-list__action{text-align:end;font-weight:var(--font-weight-bold)}}}@layer design-system.layout;@layer design-system.utilities{.mx-animated--fade-in{animation:fade-in .5s var(--ease)}.mx-animated--fade-out{animation:fade-out .5s var(--ease)}.mx-animated--spin:before{animation:2s linear infinite spin}.mx-animated--scale-up{animation:scale-up .5s var(--ease)}.mx-animated--scale-down{animation:scale-down .5s var(--ease)}.mx-text--left{text-align:start}.mx-text--right{text-align:end}.mx-text--center{text-align:center}.mx-spacing--reset{padding:0!important}.mx-spacing--top-reset{padding-block-start:0!important}.mx-spacing--bottom-reset{padding-block-end:0!important}.mx-spacing--left-reset{padding-inline-start:0!important}.mx-spacing--right-reset{padding-inline-end:0!important}.mx-spacing--xxs{padding:var(--spacing-xxs)}.mx-spacing--top-xxs{padding-block-start:var(--spacing-xxs)}.mx-spacing--bottom-xxs{padding-block-end:var(--spacing-xxs)}.mx-spacing--left-xxs{padding-inline-start:var(--spacing-xxs)}.mx-spacing--right-xxs{padding-inline-end:var(--spacing-xxs)}.mx-spacing--xs{padding:var(--spacing-xs)}.mx-spacing--top-xs{padding-block-start:var(--spacing-xs)}.mx-spacing--bottom-xs{padding-block-end:var(--spacing-xs)}.mx-spacing--left-xs{padding-inline-start:var(--spacing-xs)}.mx-spacing--right-xs{padding-inline-end:var(--spacing-xs)}.mx-spacing--s{padding:var(--spacing-s)}.mx-spacing--top-s{padding-block-start:var(--spacing-s)}.mx-spacing--bottom-s{padding-block-end:var(--spacing-s)}.mx-spacing--left-s{padding-inline-start:var(--spacing-s)}.mx-spacing--right-s{padding-inline-end:var(--spacing-s)}.mx-spacing--m{padding:var(--spacing-m)}.mx-spacing--top-m{padding-block-start:var(--spacing-m)}.mx-spacing--bottom-m{padding-block-end:var(--spacing-m)}.mx-spacing--left-m{padding-inline-start:var(--spacing-m)}.mx-spacing--right-m{padding-inline-end:var(--spacing-m)}.mx-spacing--l{padding:var(--spacing-l)}.mx-spacing--top-l{padding-block-start:var(--spacing-l)}.mx-spacing--bottom-l{padding-block-end:var(--spacing-l)}.mx-spacing--left-l{padding-inline-start:var(--spacing-l)}.mx-spacing--right-l{padding-inline-end:var(--spacing-l)}.mx-spacing--xl{padding:var(--spacing-xl)}.mx-spacing--top-xl{padding-block-start:var(--spacing-xl)}.mx-spacing--bottom-xl{padding-block-end:var(--spacing-xl)}.mx-spacing--left-xl{padding-inline-start:var(--spacing-xl)}.mx-spacing--right-xl{padding-inline-end:var(--spacing-xl)}.mx-spacing--xxl{padding:var(--spacing-xxl)}.mx-spacing--top-xxl{padding-block-start:var(--spacing-xxl)}.mx-spacing--bottom-xxl{padding-block-end:var(--spacing-xxl)}.mx-spacing--left-xxl{padding-inline-start:var(--spacing-xxl)}.mx-spacing--right-xxl{padding-inline-end:var(--spacing-xxl)}.mx-spacing--xxxl{padding:var(--spacing-xxxl)}.mx-spacing--top-xxxl{padding-block-start:var(--spacing-xxxl)}.mx-spacing--bottom-xxxl{padding-block-end:var(--spacing-xxxl)}.mx-spacing--left-xxxl{padding-inline-start:var(--spacing-xxxl)}.mx-spacing--right-xxxl{padding-inline-end:var(--spacing-xxxl)}.mx-spacing--xxxxl{padding:var(--spacing-xxxxl)}.mx-spacing--top-xxxxl{padding-block-start:var(--spacing-xxxxl)}.mx-spacing--bottom-xxxxl{padding-block-end:var(--spacing-xxxxl)}.mx-spacing--left-xxxxl{padding-inline-start:var(--spacing-xxxxl)}.mx-spacing--right-xxxxl{padding-inline-end:var(--spacing-xxxxl)}.mx-spacing--ul{padding:var(--spacing-ul)}.mx-spacing--top-ul{padding-block-start:var(--spacing-ul)}.mx-spacing--bottom-ul{padding-block-end:var(--spacing-ul)}.mx-spacing--left-ul{padding-inline-start:var(--spacing-ul)}.mx-spacing--right-ul{padding-inline-end:var(--spacing-ul)}.mx-spacing--uul{padding:var(--spacing-uul)}.mx-spacing--top-uul{padding-block-start:var(--spacing-uul)}.mx-spacing--bottom-uul{padding-block-end:var(--spacing-uul)}.mx-spacing--left-uul{padding-inline-start:var(--spacing-uul)}.mx-spacing--right-uul{padding-inline-end:var(--spacing-uul)}.mx-spacing--uuul{padding:var(--spacing-uuul)}.mx-spacing--top-uuul{padding-block-start:var(--spacing-uuul)}.mx-spacing--bottom-uuul{padding-block-end:var(--spacing-uuul)}.mx-spacing--left-uuul{padding-inline-start:var(--spacing-uuul)}.mx-spacing--right-uuul{padding-inline-end:var(--spacing-uuul)}.mx-margin--reset{margin:0!important}.mx-margin--top-reset{margin-block-start:0!important}.mx-margin--bottom-reset{margin-block-end:0!important}.mx-margin--left-reset{margin-inline-start:0!important}.mx-margin--right-reset{margin-inline-end:0!important}.mx-margin--xxs{margin:var(--spacing-xxs)}.mx-margin--top-xxs{margin-block-start:var(--spacing-xxs)}.mx-margin--bottom-xxs{margin-block-end:var(--spacing-xxs)}.mx-margin--left-xxs{margin-inline-start:var(--spacing-xxs)}.mx-margin--right-xxs{margin-inline-end:var(--spacing-xxs)}.mx-margin--xs{margin:var(--spacing-xs)}.mx-margin--top-xs{margin-block-start:var(--spacing-xs)}.mx-margin--bottom-xs{margin-block-end:var(--spacing-xs)}.mx-margin--left-xs{margin-inline-start:var(--spacing-xs)}.mx-margin--right-xs{margin-inline-end:var(--spacing-xs)}.mx-margin--s{margin:var(--spacing-s)}.mx-margin--top-s{margin-block-start:var(--spacing-s)}.mx-margin--bottom-s{margin-block-end:var(--spacing-s)}.mx-margin--left-s{margin-inline-start:var(--spacing-s)}.mx-margin--right-s{margin-inline-end:var(--spacing-s)}.mx-margin--m{margin:var(--spacing-m)}.mx-margin--top-m{margin-block-start:var(--spacing-m)}.mx-margin--bottom-m{margin-block-end:var(--spacing-m)}.mx-margin--left-m{margin-inline-start:var(--spacing-m)}.mx-margin--right-m{margin-inline-end:var(--spacing-m)}.mx-margin--l{margin:var(--spacing-l)}.mx-margin--top-l{margin-block-start:var(--spacing-l)}.mx-margin--bottom-l{margin-block-end:var(--spacing-l)}.mx-margin--left-l{margin-inline-start:var(--spacing-l)}.mx-margin--right-l{margin-inline-end:var(--spacing-l)}.mx-margin--xl{margin:var(--spacing-xl)}.mx-margin--top-xl{margin-block-start:var(--spacing-xl)}.mx-margin--bottom-xl{margin-block-end:var(--spacing-xl)}.mx-margin--left-xl{margin-inline-start:var(--spacing-xl)}.mx-margin--right-xl{margin-inline-end:var(--spacing-xl)}.mx-margin--xxl{margin:var(--spacing-xxl)}.mx-margin--top-xxl{margin-block-start:var(--spacing-xxl)}.mx-margin--bottom-xxl{margin-block-end:var(--spacing-xxl)}.mx-margin--left-xxl{margin-inline-start:var(--spacing-xxl)}.mx-margin--right-xxl{margin-inline-end:var(--spacing-xxl)}.mx-margin--xxxl{margin:var(--spacing-xxxl)}.mx-margin--top-xxxl{margin-block-start:var(--spacing-xxxl)}.mx-margin--bottom-xxxl{margin-block-end:var(--spacing-xxxl)}.mx-margin--left-xxxl{margin-inline-start:var(--spacing-xxxl)}.mx-margin--right-xxxl{margin-inline-end:var(--spacing-xxxl)}.mx-margin--xxxxl{margin:var(--spacing-xxxxl)}.mx-margin--top-xxxxl{margin-block-start:var(--spacing-xxxxl)}.mx-margin--bottom-xxxxl{margin-block-end:var(--spacing-xxxxl)}.mx-margin--left-xxxxl{margin-inline-start:var(--spacing-xxxxl)}.mx-margin--right-xxxxl{margin-inline-end:var(--spacing-xxxxl)}.mx-margin--ul{margin:var(--spacing-ul)}.mx-margin--top-ul{margin-block-start:var(--spacing-ul)}.mx-margin--bottom-ul{margin-block-end:var(--spacing-ul)}.mx-margin--left-ul{margin-inline-start:var(--spacing-ul)}.mx-margin--right-ul{margin-inline-end:var(--spacing-ul)}.mx-margin--uul{margin:var(--spacing-uul)}.mx-margin--top-uul{margin-block-start:var(--spacing-uul)}.mx-margin--bottom-uul{margin-block-end:var(--spacing-uul)}.mx-margin--left-uul{margin-inline-start:var(--spacing-uul)}.mx-margin--right-uul{margin-inline-end:var(--spacing-uul)}.mx-margin--uuul{margin:var(--spacing-uuul)}.mx-margin--top-uuul{margin-block-start:var(--spacing-uuul)}.mx-margin--bottom-uuul{margin-block-end:var(--spacing-uuul)}.mx-margin--left-uuul{margin-inline-start:var(--spacing-uuul)}.mx-margin--right-uuul{margin-inline-end:var(--spacing-uuul)}.mx-table--reset{& :is(td,th){border:unset;padding:unset;background-color:#0000}}}@layer design-system.components,design-system.layouts,design-system.print;@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{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}}
|
|
1
|
+
@layer popover-polyfill;@layer design-system.defaults{:where([class*=mx-background--]){background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme));& :where([class*=mx-background--]){--scheme:var(--colour-scheme);--background:var(--colour-background);--line-colour:var(--colour-border);--foreground-alt:var(--colour-foreground-alt);--embellished-colour:var(--colour-accent);--button-accent-scheme:dark}}.mx-background--alt{--scheme:var(--alt-scheme,var(--colour-scheme));--background:var(--colour-background-alt)}.mx-background--primary{--contrast-color:contrast-color(var(--colour-primary));--scheme:var(--primary-scheme,var(--colour-primary-scheme,var(--colour-scheme)));--background:var(--colour-primary);--line-colour:light-dark(var(--colour-primary-darker),var(--colour-primary-lighter));--foreground-alt:var(--colour-primary-light);--embellished-colour:var(--colour-primary-darker);--button-accent-scheme:var(--colour-accent-scheme,light)}.mx-background--accent{--contrast-color:contrast-color(var(--colour-accent));--scheme:var(--accent-scheme,var(--colour-accent-scheme,var(--colour-scheme)));--background:var(--colour-accent);--line-colour:light-dark(var(--colour-accent-darker),var(--colour-accent-lighter));--foreground-alt:var(--colour-accent-darkest);--embellished-colour:var(--colour-accent-darker);--button-accent-scheme:dark}.mx-background--reverse{--contrast-color:contrast-color(black);--scheme:var(--reverse-scheme,var(--colour-reverse-scheme,dark));--embellished-colour:var(--colour-border);--button-accent-scheme:var(--colour-accent-scheme,light);& .mx-background--image{--bg-img-brightness:.45;--bg-img-opacity:1}}.mx-background--box{border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding-inline:var(--gutter,1rem)}.mx-background--image{& img{object-fit:cover;min-block-size:100%;inline-size:100%;filter:brightness(var(--bg-img-brightness,1)) saturate(var(--bg-img-saturate,1.25)) opacity(var(--bg-img-opacity,.5));position:absolute}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:is(*){box-sizing:border-box;background-repeat:no-repeat;margin:0}:focus{scroll-padding-block-end:4vh}:focus-visible{outline:var(--outline-size,2px) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset,var(--outline-size,2px))}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%;padding-inline:unset;padding-block:unset}:target,[id],.has-scroll-margin{scroll-margin-block-start:calc(var(--sticky-offset,0rem) + var(--scroll-margin,var(--spacing-m)))}:is(b,strong){font-weight:var(--font-weight-bold)}u{-webkit-text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-thickness:var(--embellished-line-height,1ch);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:var(--embellished-offset,-.35ch)}:is(ol,ul){padding-inline-start:var(--spacing-m);&[role=list]{padding-inline-start:0;list-style:none}}dl{gap:var(--spacing-xs);grid-template-rows:1fr;inline-size:100%;display:grid;&:has(>div){container-type:inline-size}& div{gap:var(--spacing-xxxs);align-content:start;display:grid}& dt{font-weight:var(--font-weight-bold)}&:where(:not(.mx-list--columns)){grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr;& div{grid-template-columns:subgrid;grid-column:span 2;@container (width<=60ch){&>:is(dt,dd){grid-column:span 2}}}}}p{text-wrap:pretty}.mx-vertical-flow{&>:where(:not(:first-child,.mx-vertical-flow__collapse)){margin-block-start:var(--flow-gap,var(--gap))}&.mx-rich-text>.mx-text--lede{--flow-gap:var(--gap-xl)}}.mx-vertical-flow-flex{align-items:start;gap:var(--flow-gap,var(--gap));flex-direction:column;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-vertical-flow-grid{align-items:start;gap:var(--flow-gap,var(--gap));display:grid;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-horizontal-flow-flex{gap:var(--flow-gap,var(--gap));flex-wrap:wrap;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s,h6,.mx-heading--xs){font-family:var(--heading-font-family,var(--font-family-display,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));letter-spacing:var(--heading-letter-spacing,0);text-wrap:balance;&[class*=mx-background--]{background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}}@supports (font-size:1cqi){:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s){--font-min:calc(var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-s), var(--font-min)), var(--font-min) + 1cqi, var(--heading-font-size))}}.mx-headline{--heading-font-size:var(--font-size-xxxl)}h1,.mx-heading--xxl{--heading-font-size:var(--font-size-xxl)}h2,.mx-heading--xl{--heading-font-size:var(--font-size-xl)}h3,.mx-heading--l{--heading-font-size:var(--font-size-l)}h4,.mx-heading--m{--heading-font-size:var(--font-size-ml)}h5,.mx-heading--s{--heading-font-size:var(--font-size-m)}h6,.mx-heading--xs{--heading-font-size:var(--font-size-s)}blockquote{border-inline-start:var(--line-width,6px) solid var(--line-colour,var(--blockquote-line-colour,var(--colour-accent)));font-size:var(--blockquote-font-size,var(--font-size-ml));padding-inline-start:var(--line-gap,var(--gap));& cite{font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));font-family:var(--font-family-ui,var(--font-family));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);font-style:normal;display:block}}hr{border:0;border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));block-size:0;margin-block:var(--line-gap,var(--spacing-m));display:block}a[href]{color:var(--link-colour,var(--colour-link));-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-decoration:underline;text-decoration-thickness:max(.08em,1px);&:hover,&:active{text-underline-offset:.2em;text-decoration-thickness:max(.09em,2px)}@media (forced-colors:active){--forced-colour:LinkText}}.mx-link--external{gap:var(--spacing-xxxs);align-items:center;margin-inline-end:var(--spacing-xxxs);display:inline-flex;&:after{content:"";block-size:var(--spacing-s);inline-size:var(--spacing-s);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}}.mx-link--more{font-weight:var(--font-weight-bold);display:inline-flex;&:hover .mx-icon{transform:translate(3px)}}.mx-link--download{&:hover .mx-icon{transform:translateY(3px)}}a:where([href]):has(.mx-icon){align-items:center;gap:var(--spacing-xxs);display:inline-flex}figure{inline-size:var(--width,100%);margin:0;display:block;& :is(picture,img,iframe,video){inline-size:100%}}figcaption{padding:var(--spacing-xxs);font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);display:block}img{vertical-align:bottom;block-size:auto;max-inline-size:100%}svg:not([fill]){fill:currentColor}.mx-video{&,& :is(embed,object,iframe){aspect-ratio:16/9;border:0;block-size:100%;inline-size:100%}}.mx-media--video{inline-size:100%}table{font-size:var(--font-size-s);border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums;inline-size:100%;margin:0;& th{font-weight:var(--font-weight-bold);text-align:start}& :is(td,th){padding:var(--spacing-xxs);border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));font-family:var(--font-family-ui,var(--font-family));vertical-align:top}& thead :is(td,th){border-block-end:var(--line-width,1.5px) solid currentcolor}& caption{padding:var(--spacing-xxs);text-align:start;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);caption-side:bottom}& tfoot :is(td,th){border-block-start:var(--line-width,1.5px) solid currentcolor;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h))}}.mx-table--flush{& :is(td,th){&:first-child{padding-inline-start:0}&:last-child{padding-inline-end:0}}}.mx-table--small{& :is(td,th){font-size:var(--font-size-s);line-height:var(--line-height-h)}}.mx-table--striped{& tbody tr{&:nth-child(2n){& :is(td,th){background-color:var(--colour-background-alt)}}}}.mx-table--bordered{& :is(td,th){border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-inline:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-table--responsive{max-inline-size:100%;@media (width<720px){-webkit-overflow-scrolling:touch;box-shadow:var(--box-shadow) inset;overflow-y:scroll;& table{inline-size:100%;margin-block:0;margin-inline:var(--spacing-s);& td{min-inline-size:20ch}}}}}@layer design-system.atoms{:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--lede,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){font-size:var(--font-size)}@supports (font-size:1cqi){:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--lede,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline){--heading-font-size:var(--font-size-xs);--font-size:var(--font-size-xs);text-transform:var(--heading-transform,uppercase);font-weight:var(--heading-font-weight,var(--font-weight-bold));font-family:var(--font-family-ui,var(--font-family));letter-spacing:var(--heading-letter-spacing,0);line-height:var(--line-height-h);text-wrap:balance}:is(.mx-text--eyebrow,.mx-text--section-headline){margin-block:0;&+:is(h2,h3,p){--flow-gap:var(--spacing-xxxxs)}}:is(.mx-text--embellished,.mx-text--embellished-headline){--contrast-color:contrast-color(var(--embellished-colour,var(--colour-accent)));text-wrap:balance;z-index:1;display:inline-block;position:relative;&:after{content:"";inline-size:min(var(--embellished-line-width,6ch), 100%);block-size:var(--embellished-line-height,1ch);background-color:var(--embellished-colour,var(--colour-accent));z-index:-1;display:block;position:absolute;inset-block-end:var(--embellished-offset,-.25ch);@container style((--contrast-color:white) and (--scheme:light)){background-color:var(--embellished-colour-rev,var(--colour-accent-light))}}&+:is(h2,h3,p){--flow-gap:var(--spacing-l)}}.mx-text--lede{--font-size:var(--font-size-ml)}.mx-text--xxxl{--font-size:var(--font-size-xxxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xxl{--font-size:var(--font-size-xxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xl{--font-size:var(--font-size-xl);line-height:var(--line-height-h)}.mx-text--l{--font-size:var(--font-size-l);line-height:var(--line-height-h)}.mx-text--m{--font-size:var(--font-size-m)}.mx-text--s{--font-size:var(--font-size-s)}.mx-text--xs{--font-size:var(--font-size-xs)}.mx-text--meta{--font-size:var(--font-size-xs);--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground);gap:.2rem;display:grid}.mx-text--alt{--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground)}.mx-text--primary{--foreground:var(--foreground-primary,light-dark(var(--colour-primary),var(--colour-primary-light)));color:var(--foreground)}.mx-text--accent{--foreground:var(--foreground-accent,var(--colour-accent));color:var(--foreground)}:where([class*=mx-text--][class*=mx-background--]){background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}.mx-rich-text{font-family:var(--font-family-prose,var(--font-family));& :is(p,li){max-inline-size:var(--prose-measure,var(--container-max-width))}}:is(.mx-media--left,.mx-media--right,.mx-media--center){@media (width>=540px){max-inline-size:50%;margin-block-end:var(--spacing-s);&:first-child{margin-block-start:0;&+*{margin-block-start:0!important}}}}.mx-media--center{margin-inline:auto}:is(.mx-media--left,[dir=rtl] .mx-media--right,.translated-rtl .mx-media--right){@media (width>=540px){float:left;margin-inline:0 var(--spacing-m)}}:is(.mx-media--right,[dir=rtl] .mx-media--left,.translated-rtl .mx-media--left){@media (width>=540px){float:right;margin-inline:var(--spacing-m) 0}}.mx-list{gap:var(--spacing-xxxs);counter-reset:fn;margin-block:0;padding-inline-start:0;list-style:none;display:grid;& li{counter-increment:fn;max-inline-size:var(--prose-measure,70ch)}}.mx-list--notes li{font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l);position:relative;&:before{content:counter(fn) ".";font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);font-variant-numeric:tabular-nums lining-nums;position:absolute;inset-block-start:2px;inset-inline-start:0}}.mx-list--refs li{text-indent:calc(var(--gap-l) * -1);font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l)}.mx-list--stats{--font-size:var(--stat-font-size,var(--font-size-xxl));grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));font-size:var(--list-font-size,var(--font-size-s));text-wrap:balance;grid-template-rows:1fr;@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}& :is(b,strong){font-family:var(--font-family-display,var(--font-family));font-size:var(--font-size);font-weight:var(--stat-font-weight,var(--font-weight-bold));font-variant-numeric:tabular-nums lining-nums;line-height:1;display:block;@supports (font-size:1cqi){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}}.mx-list--columns{grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}}.mx-list--summary{grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr auto;&>div{grid-template-columns:subgrid;padding-block:var(--spacing-xs);border-block-end:1px solid var(--colour-border);grid-column:span 3;&:first-child{border-block-start:2px solid var(--colour-foreground)}@container (width<=60ch){grid-column:1/-1;grid-template-columns:1fr auto;&>dt{grid-column:1/-1}}}& .mx-list__action{text-align:end;font-weight:var(--font-weight-bold)}}}@layer design-system.layout;@layer design-system.utilities{.mx-animated--fade-in{animation:fade-in .5s var(--ease)}.mx-animated--fade-out{animation:fade-out .5s var(--ease)}.mx-animated--spin:before{animation:2s linear infinite spin}.mx-animated--scale-up{animation:scale-up .5s var(--ease)}.mx-animated--scale-down{animation:scale-down .5s var(--ease)}.mx-text--left{text-align:start}.mx-text--right{text-align:end}.mx-text--center{text-align:center}.mx-spacing--reset{padding:0!important}.mx-spacing--top-reset{padding-block-start:0!important}.mx-spacing--bottom-reset{padding-block-end:0!important}.mx-spacing--left-reset{padding-inline-start:0!important}.mx-spacing--right-reset{padding-inline-end:0!important}.mx-spacing--xxs{padding:var(--spacing-xxs)}.mx-spacing--top-xxs{padding-block-start:var(--spacing-xxs)}.mx-spacing--bottom-xxs{padding-block-end:var(--spacing-xxs)}.mx-spacing--left-xxs{padding-inline-start:var(--spacing-xxs)}.mx-spacing--right-xxs{padding-inline-end:var(--spacing-xxs)}.mx-spacing--xs{padding:var(--spacing-xs)}.mx-spacing--top-xs{padding-block-start:var(--spacing-xs)}.mx-spacing--bottom-xs{padding-block-end:var(--spacing-xs)}.mx-spacing--left-xs{padding-inline-start:var(--spacing-xs)}.mx-spacing--right-xs{padding-inline-end:var(--spacing-xs)}.mx-spacing--s{padding:var(--spacing-s)}.mx-spacing--top-s{padding-block-start:var(--spacing-s)}.mx-spacing--bottom-s{padding-block-end:var(--spacing-s)}.mx-spacing--left-s{padding-inline-start:var(--spacing-s)}.mx-spacing--right-s{padding-inline-end:var(--spacing-s)}.mx-spacing--m{padding:var(--spacing-m)}.mx-spacing--top-m{padding-block-start:var(--spacing-m)}.mx-spacing--bottom-m{padding-block-end:var(--spacing-m)}.mx-spacing--left-m{padding-inline-start:var(--spacing-m)}.mx-spacing--right-m{padding-inline-end:var(--spacing-m)}.mx-spacing--l{padding:var(--spacing-l)}.mx-spacing--top-l{padding-block-start:var(--spacing-l)}.mx-spacing--bottom-l{padding-block-end:var(--spacing-l)}.mx-spacing--left-l{padding-inline-start:var(--spacing-l)}.mx-spacing--right-l{padding-inline-end:var(--spacing-l)}.mx-spacing--xl{padding:var(--spacing-xl)}.mx-spacing--top-xl{padding-block-start:var(--spacing-xl)}.mx-spacing--bottom-xl{padding-block-end:var(--spacing-xl)}.mx-spacing--left-xl{padding-inline-start:var(--spacing-xl)}.mx-spacing--right-xl{padding-inline-end:var(--spacing-xl)}.mx-spacing--xxl{padding:var(--spacing-xxl)}.mx-spacing--top-xxl{padding-block-start:var(--spacing-xxl)}.mx-spacing--bottom-xxl{padding-block-end:var(--spacing-xxl)}.mx-spacing--left-xxl{padding-inline-start:var(--spacing-xxl)}.mx-spacing--right-xxl{padding-inline-end:var(--spacing-xxl)}.mx-spacing--xxxl{padding:var(--spacing-xxxl)}.mx-spacing--top-xxxl{padding-block-start:var(--spacing-xxxl)}.mx-spacing--bottom-xxxl{padding-block-end:var(--spacing-xxxl)}.mx-spacing--left-xxxl{padding-inline-start:var(--spacing-xxxl)}.mx-spacing--right-xxxl{padding-inline-end:var(--spacing-xxxl)}.mx-spacing--xxxxl{padding:var(--spacing-xxxxl)}.mx-spacing--top-xxxxl{padding-block-start:var(--spacing-xxxxl)}.mx-spacing--bottom-xxxxl{padding-block-end:var(--spacing-xxxxl)}.mx-spacing--left-xxxxl{padding-inline-start:var(--spacing-xxxxl)}.mx-spacing--right-xxxxl{padding-inline-end:var(--spacing-xxxxl)}.mx-spacing--ul{padding:var(--spacing-ul)}.mx-spacing--top-ul{padding-block-start:var(--spacing-ul)}.mx-spacing--bottom-ul{padding-block-end:var(--spacing-ul)}.mx-spacing--left-ul{padding-inline-start:var(--spacing-ul)}.mx-spacing--right-ul{padding-inline-end:var(--spacing-ul)}.mx-spacing--uul{padding:var(--spacing-uul)}.mx-spacing--top-uul{padding-block-start:var(--spacing-uul)}.mx-spacing--bottom-uul{padding-block-end:var(--spacing-uul)}.mx-spacing--left-uul{padding-inline-start:var(--spacing-uul)}.mx-spacing--right-uul{padding-inline-end:var(--spacing-uul)}.mx-spacing--uuul{padding:var(--spacing-uuul)}.mx-spacing--top-uuul{padding-block-start:var(--spacing-uuul)}.mx-spacing--bottom-uuul{padding-block-end:var(--spacing-uuul)}.mx-spacing--left-uuul{padding-inline-start:var(--spacing-uuul)}.mx-spacing--right-uuul{padding-inline-end:var(--spacing-uuul)}.mx-margin--reset{margin:0!important}.mx-margin--top-reset{margin-block-start:0!important}.mx-margin--bottom-reset{margin-block-end:0!important}.mx-margin--left-reset{margin-inline-start:0!important}.mx-margin--right-reset{margin-inline-end:0!important}.mx-margin--xxs{margin:var(--spacing-xxs)}.mx-margin--top-xxs{margin-block-start:var(--spacing-xxs)}.mx-margin--bottom-xxs{margin-block-end:var(--spacing-xxs)}.mx-margin--left-xxs{margin-inline-start:var(--spacing-xxs)}.mx-margin--right-xxs{margin-inline-end:var(--spacing-xxs)}.mx-margin--xs{margin:var(--spacing-xs)}.mx-margin--top-xs{margin-block-start:var(--spacing-xs)}.mx-margin--bottom-xs{margin-block-end:var(--spacing-xs)}.mx-margin--left-xs{margin-inline-start:var(--spacing-xs)}.mx-margin--right-xs{margin-inline-end:var(--spacing-xs)}.mx-margin--s{margin:var(--spacing-s)}.mx-margin--top-s{margin-block-start:var(--spacing-s)}.mx-margin--bottom-s{margin-block-end:var(--spacing-s)}.mx-margin--left-s{margin-inline-start:var(--spacing-s)}.mx-margin--right-s{margin-inline-end:var(--spacing-s)}.mx-margin--m{margin:var(--spacing-m)}.mx-margin--top-m{margin-block-start:var(--spacing-m)}.mx-margin--bottom-m{margin-block-end:var(--spacing-m)}.mx-margin--left-m{margin-inline-start:var(--spacing-m)}.mx-margin--right-m{margin-inline-end:var(--spacing-m)}.mx-margin--l{margin:var(--spacing-l)}.mx-margin--top-l{margin-block-start:var(--spacing-l)}.mx-margin--bottom-l{margin-block-end:var(--spacing-l)}.mx-margin--left-l{margin-inline-start:var(--spacing-l)}.mx-margin--right-l{margin-inline-end:var(--spacing-l)}.mx-margin--xl{margin:var(--spacing-xl)}.mx-margin--top-xl{margin-block-start:var(--spacing-xl)}.mx-margin--bottom-xl{margin-block-end:var(--spacing-xl)}.mx-margin--left-xl{margin-inline-start:var(--spacing-xl)}.mx-margin--right-xl{margin-inline-end:var(--spacing-xl)}.mx-margin--xxl{margin:var(--spacing-xxl)}.mx-margin--top-xxl{margin-block-start:var(--spacing-xxl)}.mx-margin--bottom-xxl{margin-block-end:var(--spacing-xxl)}.mx-margin--left-xxl{margin-inline-start:var(--spacing-xxl)}.mx-margin--right-xxl{margin-inline-end:var(--spacing-xxl)}.mx-margin--xxxl{margin:var(--spacing-xxxl)}.mx-margin--top-xxxl{margin-block-start:var(--spacing-xxxl)}.mx-margin--bottom-xxxl{margin-block-end:var(--spacing-xxxl)}.mx-margin--left-xxxl{margin-inline-start:var(--spacing-xxxl)}.mx-margin--right-xxxl{margin-inline-end:var(--spacing-xxxl)}.mx-margin--xxxxl{margin:var(--spacing-xxxxl)}.mx-margin--top-xxxxl{margin-block-start:var(--spacing-xxxxl)}.mx-margin--bottom-xxxxl{margin-block-end:var(--spacing-xxxxl)}.mx-margin--left-xxxxl{margin-inline-start:var(--spacing-xxxxl)}.mx-margin--right-xxxxl{margin-inline-end:var(--spacing-xxxxl)}.mx-margin--ul{margin:var(--spacing-ul)}.mx-margin--top-ul{margin-block-start:var(--spacing-ul)}.mx-margin--bottom-ul{margin-block-end:var(--spacing-ul)}.mx-margin--left-ul{margin-inline-start:var(--spacing-ul)}.mx-margin--right-ul{margin-inline-end:var(--spacing-ul)}.mx-margin--uul{margin:var(--spacing-uul)}.mx-margin--top-uul{margin-block-start:var(--spacing-uul)}.mx-margin--bottom-uul{margin-block-end:var(--spacing-uul)}.mx-margin--left-uul{margin-inline-start:var(--spacing-uul)}.mx-margin--right-uul{margin-inline-end:var(--spacing-uul)}.mx-margin--uuul{margin:var(--spacing-uuul)}.mx-margin--top-uuul{margin-block-start:var(--spacing-uuul)}.mx-margin--bottom-uuul{margin-block-end:var(--spacing-uuul)}.mx-margin--left-uuul{margin-inline-start:var(--spacing-uuul)}.mx-margin--right-uuul{margin-inline-end:var(--spacing-uuul)}.mx-table--reset{& :is(td,th){border:unset;padding:unset;background-color:#0000}}}@layer design-system.components,design-system.layouts,design-system.print;@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{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}}
|
package/dist/build/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-button{--outline-offset:1px;gap:var(--button-gap,var(--spacing-s));inline-size:fit-content;font-size:var(--button-font-size,var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family), sans-serif;line-height:var(--line-height-ui);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(--button-bg,var(--background,var(--colour-background)));color:var(--button-fg,var(--foreground,var(--colour-foreground)));letter-spacing:var(--button-letter-spacing,0);min-block-size:var(--button-min-height,unset);text-decoration-line:none;display:inline-flex;&:hover{cursor:pointer;text-decoration-line:none}&:disabled{cursor:not-allowed;opacity:.3;@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;opacity:1;color:graytext;background-color:buttonface;border-color:graytext}}@media (forced-colors:active){--forced-colour:ButtonText}}.mx-button--full-width{justify-content:center;inline-size:100%}.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(--button-min-height,var(--spacing-xl));block-size:var(--button-min-height,var(--spacing-xl));border-radius:var(--border-radius-round);flex-wrap:wrap;align-content:start;padding:0;overflow:hidden;&:before,&:after{--icon-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}&:has(.mx-icon){place-content:center}}.mx-button--dark{--line-colour:var(--button-dark-line,var(--link-colour,var(--colour-link)));--button-bg:var(--button-dark-bg,var(--link-colour,var(--colour-link)));--button-fg:var(--button-dark-fg,var(--colour-foreground-reverse));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-dark-bg,var(--link-colour,var(--colour-link)))}}.mx-button--light{--line-colour:var(--button-light-line,transparent);--button-bg:var(--button-light-bg,transparent);--button-fg:var(--button-light-fg,var(--link-colour,var(--colour-link)));text-decoration-line:underline;&:hover{text-decoration-line:underline}}.mx-button--accent{--line-colour:var(--button-accent-line,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-bg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-fg:var(--button-accent-fg,var(--colour-foreground));color-scheme:var(--button-accent-scheme,var(--colour-accent-scheme,light));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--line-colour:var(--button-fg);color-scheme:var(--button-accent-scheme-rev,var(--button-accent-scheme,dark))}}.mx-button--destructive{--line-colour:var(--colour-error);--button-bg:var(--colour-error);--button-fg:var(--colour-foreground-reverse);&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-error)}}.mx-button--white{--button-bg:var(--colour-background);--button-fg:var(--colour-foreground);--line-colour:var(--colour-background);color-scheme:light;&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-foreground-reverse)}}}@layer design-system.layout,design-system.utilities,design-system.components;
|
|
1
|
+
@layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-button{--outline-offset:1px;gap:var(--button-gap,var(--spacing-s));inline-size:fit-content;font-size:var(--button-font-size,var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family), sans-serif;line-height:var(--line-height-ui);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(--button-bg,var(--background,var(--colour-background)));color:var(--button-fg,var(--foreground,var(--colour-foreground)));letter-spacing:var(--button-letter-spacing,0);min-block-size:var(--button-min-height,unset);align-items:center;text-decoration-line:none;display:inline-flex;&:hover{cursor:pointer;text-decoration-line:none}&:disabled{cursor:not-allowed;opacity:.3;@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;opacity:1;color:graytext;background-color:buttonface;border-color:graytext}}@media (forced-colors:active){--forced-colour:ButtonText}}.mx-button--full-width{justify-content:center;inline-size:100%}.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(--button-min-height,var(--spacing-xl));block-size:var(--button-min-height,var(--spacing-xl));border-radius:var(--border-radius-round);flex-wrap:wrap;align-content:start;padding:0;overflow:hidden;&:before,&:after{--icon-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}&:has(.mx-icon){place-content:center}}.mx-button--dark{--line-colour:var(--button-dark-line,var(--link-colour,var(--colour-link)));--button-bg:var(--button-dark-bg,var(--link-colour,var(--colour-link)));--button-fg:var(--button-dark-fg,var(--colour-foreground-reverse));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-dark-bg,var(--link-colour,var(--colour-link)))}}.mx-button--light{--line-colour:var(--button-light-line,transparent);--button-bg:var(--button-light-bg,transparent);--button-fg:var(--button-light-fg,var(--link-colour,var(--colour-link)));text-decoration-line:underline;&:hover{text-decoration-line:underline}}.mx-button--accent{--line-colour:var(--button-accent-line,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-bg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-fg:var(--button-accent-fg,var(--colour-foreground));color-scheme:var(--button-accent-scheme,var(--colour-accent-scheme,light));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--line-colour:var(--button-fg);color-scheme:var(--button-accent-scheme-rev,var(--button-accent-scheme,dark))}}.mx-button--destructive{--line-colour:var(--colour-error);--button-bg:var(--colour-error);--button-fg:var(--colour-foreground-reverse);&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-error)}}.mx-button--white{--button-bg:var(--colour-background);--button-fg:var(--colour-foreground);--line-colour:var(--colour-background);color-scheme:light;&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-foreground-reverse)}}}@layer design-system.layout,design-system.utilities,design-system.components;
|
package/dist/build/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-card{gap:var(--card-gap,var(--gap));block-size:100%;display:grid;&[class*=mx-background--]{border-radius:var(--border-radius);@container card (width>=720px){--content-min-spacing:var(--content-max-spacing,var(--spacing-m))}& .mx-card__content{padding-inline:var(--content-min-spacing,var(--spacing-s));padding-block-end:var(--content-min-spacing,var(--spacing-s))}&:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content{padding-block-start:var(--content-min-spacing,var(--spacing-s))}& .mx-card__icon{padding-inline:var(--content-min-spacing,var(--spacing-s));padding-block-start:var(--content-min-spacing,var(--spacing-s))}&.mx-background--box{padding-inline:unset}}&:has(.mx-card__media){grid-template:"media""content"1fr/1fr;@container card (width>=720px){--card-gap:var(--gap-l);--card-alignment:center;grid-template:"media content" 1fr / var(--media-col,1fr) var(--content-col,1fr);&.mx-card--reversed{grid-template-areas:"content media";grid-template-columns:var(--content-col,1fr) var(--media-col,1fr)}}@container card (width>=946px){--card-gap:var(--large-card-gap,6rem)}&[class*=mx-background--]{@container card (width>=720px){& .mx-card__content{padding-block-start:var(--content-min-spacing,var(--spacing-s))}&:where(:not(.mx-card--reversed)) .mx-card__content{padding-inline-start:0}&.mx-card--reversed .mx-card__content{padding-inline-end:0}}}& .mx-card__content{align-self:var(--align-content,var(--card-alignment,stretch));grid-area:content}& .mx-card__media{align-self:var(--align-media,var(--card-alignment,stretch));grid-area:media;inline-size:100%;& img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);object-fit:cover;inline-size:100%}}& .
|
|
1
|
+
@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-card{gap:var(--card-gap,var(--gap));block-size:100%;display:grid;&[class*=mx-background--]{border-radius:var(--border-radius);@container card (width>=720px){--content-min-spacing:var(--content-max-spacing,var(--spacing-m))}& .mx-card__content{padding-inline:var(--content-min-spacing,var(--spacing-s));padding-block-end:var(--content-min-spacing,var(--spacing-s))}&:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content{padding-block-start:var(--content-min-spacing,var(--spacing-s))}& .mx-card__icon{padding-inline:var(--content-min-spacing,var(--spacing-s));padding-block-start:var(--content-min-spacing,var(--spacing-s))}&.mx-background--box{padding-inline:unset}}&:has(.mx-card__media){grid-template:"media""content"1fr/1fr;@container card (width>=720px){--card-gap:var(--gap-l);--card-alignment:center;grid-template:"media content" 1fr / var(--media-col,1fr) var(--content-col,1fr);&.mx-card--reversed{grid-template-areas:"content media";grid-template-columns:var(--content-col,1fr) var(--media-col,1fr)}}@container card (width>=946px){--card-gap:var(--large-card-gap,6rem)}&[class*=mx-background--]{@container card (width>=720px){& .mx-card__content{padding-block-start:var(--content-min-spacing,var(--spacing-s))}&:where(:not(.mx-card--reversed)) .mx-card__content{padding-inline-start:0}&.mx-card--reversed .mx-card__content{padding-inline-end:0}}}& .mx-card__content{align-self:var(--align-content,var(--card-alignment,stretch));grid-area:content}& .mx-card__media{align-self:var(--align-media,var(--card-alignment,stretch));grid-area:media;inline-size:100%;& img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);object-fit:cover;inline-size:100%}}& .skeleton--bg,& .mx-card__icon{grid-area:media}}& .mx-link-list{inline-size:100%}}.mx-card__content>a:last-child{margin-block-start:auto}.mx-grid:has(>:nth-child(2):last-child)>:is(.mx-card,.mx-container:has(.mx-card)){inline-size:min(100%, var(--max-card-width,37ch));margin-inline:auto}.mx-container:has(>.mx-card){--container-name:card}.mx-card--block{position:relative;& a{&:before{content:"";block-size:100%;inline-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}&:is(:focus,:focus-visible){outline:unset}}&:has(a[aria-label]){& a:not(:has(.mx-icon)){margin-block-start:calc(var(--flow-gap,var(--gap)) * -1)}&:hover :is(h2,h3,h4){color:var(--link-colour,var(--colour-link))}}&:focus-within{outline:var(--outline-size,2px) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset,2px);&.mx-background--box{outline-offset:var(--outline-offset,-2px)}}}}.mx-card--collapse{@media (width<540px){& :is(p,.mx-text--lede){display:none}}@media (320px<width<720px){--flow-gap:var(--spacing-xxxs);&:has(.mx-card__media){--collapsed-media-col:var(--collapsed-image-width,100px);--ratio:1;grid-template:"content media" / var(--collapsed-content-col,1fr) var(--collapsed-media-col,1fr)}}}:is(.mx-card--collapse:where(:not(.mx-list-item)),.mx-container:has(>.mx-card--collapse)){&:where(:not(:first-child)){@media (width<720px){border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block-start:var(--gap)}}}
|
package/dist/build/carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.components.carousel{.mx-carousel{gap:var(--vertical-gap,var(--gap));display:grid}.mx-carousel__scrollable{padding-inline:calc(var(--outline-size,2px) * 2);padding-block:calc(var(--outline-size,2px) * 2);margin-inline:calc(var(--outline-size,2px) * -2);margin-block:calc(var(--outline-size,2px) * -2);scroll-padding-inline:calc(var(--outline-size,2px) * 2);gap:var(--horizontal-gap,var(--gap));grid-auto-flow:column;grid-auto-columns:minmax(var(--inline-size,25ch), 1fr);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-color:var(--scrollbar-color,var(--line-colour,var(--colour-border)) transparent);scrollbar-width:thin;list-style:none;display:grid;overflow:auto hidden;&>[data-index]{scroll-snap-align:start;scroll-snap-stop:always;display:grid;&[inert]{opacity:.3}&.mx-container,& .mx-container{inline-size:100%;display:grid}}&.overflowing:not(.no-bar){padding-block-end:var(--scrollbar-gap,var(--gap))}&.no-bar{scrollbar-width:none;&::-webkit-scrollbar{display:none}}}.mx-carousel__buttons{&:not([hidden]){gap:var(--gap-s);display:flex}& button[disabled]{opacity:.5}}.mx-carousel__pagination{align-items:center;gap:var(--spacing-xxxs);padding-inline:0;list-style:none;display:flex;&[data-pagination=counter]{--border-radius:var(--border-radius-round);--indent:200%}& button{border-radius:var(--border-radius);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));text-align:center;cursor:pointer;min-block-size:2em;min-inline-size:2em;text-indent:var(--indent,unset);font-family:inherit;overflow:hidden;&[disabled]{--background:var(--active-background,var(--colour-border));cursor:not-allowed}@media (pointer:
|
|
1
|
+
@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.components.carousel{.mx-carousel{gap:var(--vertical-gap,var(--gap));display:grid}.mx-carousel__scrollable{padding-inline:calc(var(--outline-size,2px) * 2);padding-block:calc(var(--outline-size,2px) * 2);margin-inline:calc(var(--outline-size,2px) * -2);margin-block:calc(var(--outline-size,2px) * -2);scroll-padding-inline:calc(var(--outline-size,2px) * 2);gap:var(--horizontal-gap,var(--gap));grid-auto-flow:column;grid-auto-columns:minmax(var(--inline-size,25ch), 1fr);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-color:var(--scrollbar-color,var(--line-colour,var(--colour-border)) transparent);scrollbar-width:thin;list-style:none;display:grid;overflow:auto hidden;&>[data-index]{scroll-snap-align:start;scroll-snap-stop:always;display:grid;&[inert]{opacity:.3}&.mx-container,& .mx-container{inline-size:100%;display:grid}}&.overflowing:not(.no-bar){padding-block-end:var(--scrollbar-gap,var(--gap))}&.no-bar{scrollbar-width:none;&::-webkit-scrollbar{display:none}}}.mx-carousel__buttons{&:not([hidden]){gap:var(--gap-s);display:flex}& button[disabled]{opacity:.5}}.mx-carousel__pagination{align-items:center;gap:var(--spacing-xxxs);padding-inline:0;list-style:none;display:flex;&[data-pagination=counter]{--border-radius:var(--border-radius-round);--indent:200%}& button{border-radius:var(--border-radius);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));text-align:center;cursor:pointer;min-block-size:2em;min-inline-size:2em;text-indent:var(--indent,unset);font-family:inherit;overflow:hidden;&[disabled]{--background:var(--active-background,var(--colour-border));cursor:not-allowed}@media (pointer:fine){transition:scale .1s linear;&:active{border-color:var(--outline-color,currentcolor);scale:1.5}}}}}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { s as e } from "./utilities-Dd-08SW6.js";
|
|
2
|
+
//#region src/Component/Accordion/Elements/Accordion.ts
|
|
3
|
+
var t = class extends HTMLElement {
|
|
4
|
+
internals_;
|
|
5
|
+
controller;
|
|
6
|
+
constructor() {
|
|
7
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
8
|
+
}
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
if (!this.details || !this.trigger) return;
|
|
11
|
+
let { signal: e } = this.controller;
|
|
12
|
+
document.addEventListener("beforeprint", this.handleOpen, { signal: e }), document.addEventListener("afterprint", this.handleClose, { signal: e }), this.handleHash(), document.addEventListener("hashchange", this.handleHash, { signal: e });
|
|
13
|
+
}
|
|
14
|
+
disconnectedCallback() {
|
|
15
|
+
this.controller.abort();
|
|
16
|
+
}
|
|
17
|
+
handleOpen = () => {
|
|
18
|
+
this.details && (this.details.open = !0);
|
|
19
|
+
};
|
|
20
|
+
handleClose = () => {
|
|
21
|
+
this.details && (this.details.open = !1);
|
|
22
|
+
};
|
|
23
|
+
handleHash = () => {
|
|
24
|
+
let { hash: e } = window.location;
|
|
25
|
+
e && e === `#${this.details?.id}` && this.handleOpen();
|
|
26
|
+
};
|
|
27
|
+
get details() {
|
|
28
|
+
let e = this.querySelector("details");
|
|
29
|
+
if (!e) throw Error(`${this.localName} must contain a <details> element.`);
|
|
30
|
+
return e.id = e.id || this.generatedId(), e;
|
|
31
|
+
}
|
|
32
|
+
get trigger() {
|
|
33
|
+
let e = this.querySelector("summary");
|
|
34
|
+
if (!e) throw Error(`${this.localName} must contain a <summary> element.`);
|
|
35
|
+
return e;
|
|
36
|
+
}
|
|
37
|
+
generatedId = () => {
|
|
38
|
+
let t = this.trigger?.textContent?.trim();
|
|
39
|
+
return t ? e(t) : "";
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
customElements.get("mx-accordion") || customElements.define("mx-accordion", t);
|
|
43
|
+
//#endregion
|
|
44
|
+
export { t };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
//#region src/Component/Accordion/Elements/AccordionGroup.ts
|
|
2
|
+
var e = 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.accordions || !this.expandTrigger || !this.collapseTrigger) return;
|
|
10
|
+
this.handleToggle();
|
|
11
|
+
let { signal: e } = this.controller;
|
|
12
|
+
this.addEventListener("click", this.handleClick, { signal: e }), this.accordions.forEach((t) => t.addEventListener("toggle", this.handleToggle, { signal: e }));
|
|
13
|
+
}
|
|
14
|
+
disconnectedCallback() {
|
|
15
|
+
this.controller.abort();
|
|
16
|
+
}
|
|
17
|
+
handleClick = ({ target: e }) => {
|
|
18
|
+
e === this.expandTrigger && this.handleExpand(), e === this.collapseTrigger && this.handleCollapse();
|
|
19
|
+
};
|
|
20
|
+
handleExpand = () => {
|
|
21
|
+
this.accordions.forEach((e) => e.open = !0), this.expandTrigger.disabled = !0, this.collapseTrigger.disabled = !1;
|
|
22
|
+
};
|
|
23
|
+
handleCollapse = () => {
|
|
24
|
+
this.accordions.forEach((e) => e.open = !1), this.expandTrigger.disabled = !1, this.collapseTrigger.disabled = !0;
|
|
25
|
+
};
|
|
26
|
+
handleToggle = () => {
|
|
27
|
+
this.expandTrigger.disabled = [...this.accordions].every((e) => e.open === !0), this.collapseTrigger.disabled = [...this.accordions].every((e) => e.open !== !0);
|
|
28
|
+
};
|
|
29
|
+
get accordions() {
|
|
30
|
+
let e = this.querySelectorAll("details");
|
|
31
|
+
if (!e.length) throw Error(`${this.localName} must contain at least one <details> element.`);
|
|
32
|
+
return e;
|
|
33
|
+
}
|
|
34
|
+
get expandTrigger() {
|
|
35
|
+
let e = this.querySelector("button[data-expand]");
|
|
36
|
+
if (!e) throw Error(`${this.localName} must contain a <button data-expand> element.`);
|
|
37
|
+
return e;
|
|
38
|
+
}
|
|
39
|
+
get collapseTrigger() {
|
|
40
|
+
let e = this.querySelector("button[data-collapse]");
|
|
41
|
+
if (!e) throw Error(`${this.localName} must contain a <button data-collapse> element.`);
|
|
42
|
+
return e;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
customElements.get("mx-accordion-group") || customElements.define("mx-accordion-group", e);
|
|
46
|
+
//#endregion
|
|
47
|
+
export { e as t };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { t as e } from "./Accordion-D2wp8hBG.js";
|
|
2
|
+
//#region src/Component/Accordion/Elements/AccordionMobile.ts
|
|
3
|
+
var t = class extends e {
|
|
4
|
+
mq;
|
|
5
|
+
toggleAttribute;
|
|
6
|
+
constructor() {
|
|
7
|
+
super(), this.mq = this.getAttribute("mq") || "(max-width: 720px)";
|
|
8
|
+
}
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
super.connectedCallback(), this.handleBreakpoint(this.breakpoint);
|
|
11
|
+
let { signal: e } = this.controller;
|
|
12
|
+
this.breakpoint.addEventListener("change", this.handleBreakpoint, { signal: e });
|
|
13
|
+
}
|
|
14
|
+
disconnectedCallback() {
|
|
15
|
+
this.controller.abort();
|
|
16
|
+
}
|
|
17
|
+
handleBreakpoint = ({ matches: e }) => {
|
|
18
|
+
this.details && this.details.toggleAttribute("open", !e);
|
|
19
|
+
};
|
|
20
|
+
get breakpoint() {
|
|
21
|
+
return window.matchMedia(this.mq);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
customElements.get("mx-accordionmobile") || customElements.define("mx-accordionmobile", t);
|
|
25
|
+
//#endregion
|
|
26
|
+
export { t };
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
//#region src/Form/Autocomplete/Elements/Autocomplete.ts
|
|
2
|
+
var e = class extends HTMLElement {
|
|
3
|
+
internals_;
|
|
4
|
+
controller;
|
|
5
|
+
observer;
|
|
6
|
+
activeOption;
|
|
7
|
+
constructor() {
|
|
8
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController(), this.activeOption = null;
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
if (!this.input || !this.listbox || !this.status) return;
|
|
12
|
+
let { signal: e } = this.controller;
|
|
13
|
+
this.input.addEventListener("input", this.handleInput, { signal: e }), this.input.addEventListener("keydown", this.handleKeydown, { signal: e }), this.input.addEventListener("focus", this.handleFocus, { signal: e }), this.input.addEventListener("blur", this.handleBlur, { signal: e }), this.listbox.addEventListener("mousedown", this.handleListboxMousedown, { signal: e }), this.listbox.addEventListener("click", this.handleOptionClick, { signal: e }), this.observer = new MutationObserver(this.handleOptionsChange), this.observer.observe(this.listbox, { childList: !0 });
|
|
14
|
+
}
|
|
15
|
+
disconnectedCallback() {
|
|
16
|
+
this.controller.abort(), this.observer?.disconnect();
|
|
17
|
+
}
|
|
18
|
+
handleOptionsChange = () => {
|
|
19
|
+
this.activeOption && !this.options.includes(this.activeOption) && this.setActive(null), this.updateVisibility();
|
|
20
|
+
};
|
|
21
|
+
handleInput = () => {
|
|
22
|
+
this.setActive(null), this.dispatchSearch(), this.updateVisibility();
|
|
23
|
+
};
|
|
24
|
+
handleFocus = () => {
|
|
25
|
+
this.updateVisibility();
|
|
26
|
+
};
|
|
27
|
+
handleBlur = () => {
|
|
28
|
+
this.close();
|
|
29
|
+
};
|
|
30
|
+
handleListboxMousedown = (e) => {
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
};
|
|
33
|
+
handleKeydown = (e) => {
|
|
34
|
+
if (!this.isOpen) (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.updateVisibility());
|
|
35
|
+
else switch (e.key) {
|
|
36
|
+
case "ArrowDown":
|
|
37
|
+
e.preventDefault(), this.moveActive(1);
|
|
38
|
+
break;
|
|
39
|
+
case "ArrowUp":
|
|
40
|
+
e.preventDefault(), this.moveActive(-1);
|
|
41
|
+
break;
|
|
42
|
+
case "Home":
|
|
43
|
+
e.preventDefault(), this.setActive(this.visibleOptions[0] ?? null);
|
|
44
|
+
break;
|
|
45
|
+
case "End":
|
|
46
|
+
e.preventDefault(), this.setActive(this.visibleOptions.at(-1) ?? null);
|
|
47
|
+
break;
|
|
48
|
+
case "Enter":
|
|
49
|
+
if (!this.activeOption) return;
|
|
50
|
+
e.preventDefault(), this.select(this.activeOption);
|
|
51
|
+
break;
|
|
52
|
+
case "Escape": e.preventDefault(), this.close();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
handleOptionClick = (e) => {
|
|
56
|
+
let t = e.target.closest("[role=\"option\"]");
|
|
57
|
+
t && this.select(t);
|
|
58
|
+
};
|
|
59
|
+
dispatchSearch() {
|
|
60
|
+
let e = new CustomEvent("mx-autocomplete-search", {
|
|
61
|
+
bubbles: !0,
|
|
62
|
+
detail: { query: this.input.value.trim() }
|
|
63
|
+
});
|
|
64
|
+
this.dispatchEvent(e);
|
|
65
|
+
}
|
|
66
|
+
updateVisibility() {
|
|
67
|
+
let e = this.input.value.trim().length > 0, t = this.visibleOptions.length, n = e && t > 0;
|
|
68
|
+
this.listbox.hidden = !n, this.input.setAttribute("aria-expanded", String(n)), this.status.textContent = e ? t === 0 ? this.noResultsLabel : `${t} result${t === 1 ? "" : "s"} available` : "";
|
|
69
|
+
}
|
|
70
|
+
moveActive(e) {
|
|
71
|
+
let t = this.visibleOptions;
|
|
72
|
+
if (t.length === 0) return;
|
|
73
|
+
let n = ((this.activeOption ? t.indexOf(this.activeOption) : -1) + e + t.length) % t.length;
|
|
74
|
+
this.setActive(t[n]);
|
|
75
|
+
}
|
|
76
|
+
setActive(e) {
|
|
77
|
+
this.activeOption?.setAttribute("aria-selected", "false"), this.activeOption = e, e?.setAttribute("aria-selected", "true"), this.input.setAttribute("aria-activedescendant", e?.id ?? ""), e?.scrollIntoView({ block: "nearest" });
|
|
78
|
+
}
|
|
79
|
+
select(e) {
|
|
80
|
+
let t = e.textContent ?? "";
|
|
81
|
+
this.input.value = t, this.close(), this.input.focus();
|
|
82
|
+
let n = new CustomEvent("mx-autocomplete-select", {
|
|
83
|
+
bubbles: !0,
|
|
84
|
+
detail: {
|
|
85
|
+
value: e.dataset.value ?? t,
|
|
86
|
+
label: t
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
this.dispatchEvent(n);
|
|
90
|
+
}
|
|
91
|
+
close() {
|
|
92
|
+
this.listbox.hidden = !0, this.input.setAttribute("aria-expanded", "false"), this.status.textContent = "", this.setActive(null);
|
|
93
|
+
}
|
|
94
|
+
get isOpen() {
|
|
95
|
+
return !this.listbox.hidden;
|
|
96
|
+
}
|
|
97
|
+
get noResultsLabel() {
|
|
98
|
+
return this.dataset.noResultsLabel || "No results found";
|
|
99
|
+
}
|
|
100
|
+
get control() {
|
|
101
|
+
let e = this.querySelector("[data-control]");
|
|
102
|
+
if (!e) throw Error(`${this.localName} must contain a [data-control] element.`);
|
|
103
|
+
return e;
|
|
104
|
+
}
|
|
105
|
+
get input() {
|
|
106
|
+
let e = this.control.querySelector("input[role=\"combobox\"]");
|
|
107
|
+
if (!e) throw Error(`${this.localName} must contain an <input role="combobox">.`);
|
|
108
|
+
return e;
|
|
109
|
+
}
|
|
110
|
+
get listbox() {
|
|
111
|
+
let e = this.querySelector("[role=\"listbox\"]");
|
|
112
|
+
if (!e) throw Error(`${this.localName} must contain a [role="listbox"] element.`);
|
|
113
|
+
return e;
|
|
114
|
+
}
|
|
115
|
+
get status() {
|
|
116
|
+
let e = this.querySelector("[data-autocomplete-status]");
|
|
117
|
+
if (!e) throw Error(`${this.localName} must contain a [data-autocomplete-status] element.`);
|
|
118
|
+
return e;
|
|
119
|
+
}
|
|
120
|
+
get options() {
|
|
121
|
+
return Array.from(this.listbox.querySelectorAll("[role=\"option\"]"));
|
|
122
|
+
}
|
|
123
|
+
get visibleOptions() {
|
|
124
|
+
return this.options.filter((e) => !e.hidden);
|
|
125
|
+
}
|
|
126
|
+
get pending() {
|
|
127
|
+
return this.control.getAttribute("aria-busy") === "true";
|
|
128
|
+
}
|
|
129
|
+
set pending(e) {
|
|
130
|
+
this.control.setAttribute("aria-busy", String(e));
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
customElements.get("mx-autocomplete") || customElements.define("mx-autocomplete", e);
|
|
134
|
+
//#endregion
|
|
135
|
+
export { e as t };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
//#region src/Component/BackToTop/Elements/BackToTop.ts
|
|
2
|
+
var e = (e) => {
|
|
3
|
+
let t = Number.parseFloat(e);
|
|
4
|
+
return Number.isNaN(t) ? window.innerHeight : e.endsWith("vh") ? t / 100 * window.innerHeight : t;
|
|
5
|
+
}, t = class extends HTMLElement {
|
|
6
|
+
internals_;
|
|
7
|
+
controller;
|
|
8
|
+
io;
|
|
9
|
+
constructor() {
|
|
10
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
11
|
+
}
|
|
12
|
+
connectedCallback() {
|
|
13
|
+
let { signal: t } = this.controller;
|
|
14
|
+
this.classList.add("is-enhanced"), this.trigger?.addEventListener("click", this.handleClick, { signal: t });
|
|
15
|
+
let n = this.getAttribute("target"), r = n ? document.querySelector(n) : null;
|
|
16
|
+
if (r) {
|
|
17
|
+
this.io = new IntersectionObserver(([{ boundingClientRect: e }]) => {
|
|
18
|
+
this.setVisible(e.y < 0);
|
|
19
|
+
}), this.io.observe(r);
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
let i = e(this.getAttribute("visibleafter") || "100vh");
|
|
23
|
+
this.setVisible(window.scrollY > i), window.addEventListener("scroll", () => this.setVisible(window.scrollY > i), {
|
|
24
|
+
signal: t,
|
|
25
|
+
passive: !0
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
disconnectedCallback() {
|
|
29
|
+
this.controller.abort(), this.io?.disconnect();
|
|
30
|
+
}
|
|
31
|
+
get trigger() {
|
|
32
|
+
return this.querySelector("a");
|
|
33
|
+
}
|
|
34
|
+
setVisible(e) {
|
|
35
|
+
this.classList.contains("is-visible") !== e && (this.classList.toggle("is-visible", e), this.dispatchEvent(new CustomEvent("back-to-top-toggle", {
|
|
36
|
+
bubbles: !0,
|
|
37
|
+
cancelable: !0,
|
|
38
|
+
detail: {
|
|
39
|
+
isVisible: e,
|
|
40
|
+
target: this
|
|
41
|
+
}
|
|
42
|
+
})));
|
|
43
|
+
}
|
|
44
|
+
handleClick = (e) => {
|
|
45
|
+
let t = e.currentTarget.getAttribute("href");
|
|
46
|
+
if (!t?.startsWith("#")) return;
|
|
47
|
+
let n = document.querySelector(t);
|
|
48
|
+
if (!n) return;
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
let r = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
51
|
+
n.scrollIntoView({
|
|
52
|
+
behavior: r ? "auto" : "smooth",
|
|
53
|
+
block: "start"
|
|
54
|
+
});
|
|
55
|
+
let i = n.hasAttribute("tabindex");
|
|
56
|
+
i || n.setAttribute("tabindex", "-1"), n.focus({ preventScroll: !0 }), i || n.addEventListener("blur", () => n.removeAttribute("tabindex"), {
|
|
57
|
+
once: !0,
|
|
58
|
+
signal: this.controller.signal
|
|
59
|
+
}), window.history?.pushState?.(null, "", t);
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
customElements.get("mx-back-to-top") || customElements.define("mx-back-to-top", t);
|
|
63
|
+
//#endregion
|
|
64
|
+
export { t };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { s as e, t } from "./utilities-Dd-08SW6.js";
|
|
2
|
+
//#region src/Component/GlobalAlert/Elements/ClosableAlert.ts
|
|
3
|
+
var n = class extends HTMLElement {
|
|
4
|
+
internals_;
|
|
5
|
+
controller;
|
|
6
|
+
constructor() {
|
|
7
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
8
|
+
}
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
if (!this.container) return;
|
|
11
|
+
if (this.id = this.id || this.generatedId(), this.localStorage) {
|
|
12
|
+
this.controller.abort(), this.remove();
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
let { signal: e } = this.controller;
|
|
16
|
+
this.close?.addEventListener("click", this.handleClose, { signal: e });
|
|
17
|
+
}
|
|
18
|
+
disconnectedCallback() {
|
|
19
|
+
this.controller.abort(), this.close.remove();
|
|
20
|
+
}
|
|
21
|
+
handleClose = () => {
|
|
22
|
+
this.controller.abort(), this.remove(), this.localStorage = "true", document.body?.focus?.();
|
|
23
|
+
let e = new CustomEvent("GlobalAlert-close", {
|
|
24
|
+
bubbles: !0,
|
|
25
|
+
cancelable: !0,
|
|
26
|
+
detail: {
|
|
27
|
+
id: this.id,
|
|
28
|
+
target: this
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
this.dispatchEvent(e);
|
|
32
|
+
};
|
|
33
|
+
get localStorage() {
|
|
34
|
+
return localStorage.getItem(this.id);
|
|
35
|
+
}
|
|
36
|
+
set localStorage(e) {
|
|
37
|
+
localStorage.setItem(this.id, e);
|
|
38
|
+
}
|
|
39
|
+
get container() {
|
|
40
|
+
let e = this.querySelector("[data-container]");
|
|
41
|
+
if (!e) throw Error(`${this.localName} must contain a [data-container] element.`);
|
|
42
|
+
return e;
|
|
43
|
+
}
|
|
44
|
+
get close() {
|
|
45
|
+
let e = this.querySelector(".mx-icon--close");
|
|
46
|
+
return e || (e = t(`<button class="mx-icon mx-icon--close" aria-controls="${this.id}" aria-label="Close GlobalAlert" type="button"></button>`), this.container.appendChild(e)), e;
|
|
47
|
+
}
|
|
48
|
+
generatedId() {
|
|
49
|
+
let t = `mx-alert-${Math.floor(Math.random() * 1e4)}`;
|
|
50
|
+
return e(t, 20);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
customElements.get("mx-closable-alert") || customElements.define("mx-closable-alert", n);
|
|
54
|
+
//#endregion
|
|
55
|
+
export { n as t };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { t as e } from "./cookie-compliance-CG6x-TcV.js";
|
|
2
|
+
//#region src/Component/CookieConsent/Elements/CookieConsent.ts
|
|
3
|
+
var t = class extends HTMLElement {
|
|
4
|
+
internals_;
|
|
5
|
+
compliance;
|
|
6
|
+
constructor() {
|
|
7
|
+
super(), this.internals_ = this.attachInternals();
|
|
8
|
+
}
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
this.compliance = new e(this), this.compliance.init();
|
|
11
|
+
}
|
|
12
|
+
disconnectedCallback() {
|
|
13
|
+
this.compliance?.destroy();
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
customElements.get("mx-cookie-consent") || customElements.define("mx-cookie-consent", t);
|
|
17
|
+
//#endregion
|
|
18
|
+
export { t };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { i as e, r as t } from "./utilities-Dd-08SW6.js";
|
|
2
|
+
//#region src/Component/Dialog/Elements/Dialog.ts
|
|
3
|
+
var n = class extends HTMLElement {
|
|
4
|
+
internals_;
|
|
5
|
+
controller;
|
|
6
|
+
scrollLockClass = "body--scroll-lock";
|
|
7
|
+
constructor() {
|
|
8
|
+
super(), this.internals_ = this.attachInternals(), this.controller = new AbortController();
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
if (!this.dialog) return;
|
|
12
|
+
let { signal: n } = this.controller;
|
|
13
|
+
this.openBtns?.forEach((e) => e.addEventListener("click", this.handleOpen, { signal: n })), this.closeBtns?.forEach((e) => e.addEventListener("click", this.handleClose, { signal: n })), document.addEventListener("click", (t) => {
|
|
14
|
+
this.dialog?.open && e(t, this.dialog, this.handleClose, [...this.openBtns, ...this.closeBtns]);
|
|
15
|
+
}, { signal: n }), document.addEventListener("keydown", (e) => {
|
|
16
|
+
this.dialog?.open && t(e, this.handleClose);
|
|
17
|
+
}, { signal: n });
|
|
18
|
+
}
|
|
19
|
+
disconnectedCallback() {
|
|
20
|
+
this.dialog && (typeof this.dialog.close == "function" && this.dialog.close(), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "false")), this.isModal && document.body.classList.remove(this.scrollLockClass), this.controller.abort());
|
|
21
|
+
}
|
|
22
|
+
handleOpen = (e) => {
|
|
23
|
+
this.dialog && (e.preventDefault(), typeof this.dialog.show == "function" && (this.isModal ? this.dialog.showModal() : this.dialog.show()), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "true")), this.isModal && document.body.classList.add(this.scrollLockClass));
|
|
24
|
+
};
|
|
25
|
+
handleClose = () => {
|
|
26
|
+
this.dialog && (typeof this.dialog.close == "function" && this.dialog.close(), this.openBtns?.forEach((e) => e.setAttribute("aria-expanded", "false")), this.isModal && document.body.classList.remove(this.scrollLockClass));
|
|
27
|
+
};
|
|
28
|
+
get dialog() {
|
|
29
|
+
let e = this.querySelector("dialog");
|
|
30
|
+
if (!e) throw Error(`${this.localName} must contain a <dialog> element.`);
|
|
31
|
+
return e;
|
|
32
|
+
}
|
|
33
|
+
get openBtns() {
|
|
34
|
+
let e = document.querySelectorAll(`[href="#${this.id}"], [aria-controls="${this.id}"]`);
|
|
35
|
+
return e?.forEach((e) => {
|
|
36
|
+
e.setAttribute("aria-controls", this.id);
|
|
37
|
+
}), e;
|
|
38
|
+
}
|
|
39
|
+
get closeBtns() {
|
|
40
|
+
return this.querySelectorAll("button[data-close]");
|
|
41
|
+
}
|
|
42
|
+
get isModal() {
|
|
43
|
+
return this.hasAttribute("data-modal");
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
customElements.get("mx-dialog") || customElements.define("mx-dialog", n);
|
|
47
|
+
//#endregion
|
|
48
|
+
export { n as t };
|