npm - @pnx-mixtape/mxds - Versions diffs - 0.1.0-rc.3 → 0.1.0-rc.4 - Mend

@pnx-mixtape/mxds 0.1.0-rc.3 → 0.1.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/build/accordion.css +1 -1
package/dist/build/base.css +1 -1
package/dist/build/carousel.css +1 -1
package/dist/build/constants.css +1 -1
package/dist/build/cookie-consent.css +1 -1
package/dist/build/dialog.css +1 -1
package/dist/build/form.css +1 -1
package/dist/build/global-alert.css +1 -1
package/dist/build/grid.css +1 -1
package/dist/build/header.css +1 -1
package/dist/build/navigation.css +1 -1
package/dist/build/popover.css +1 -1
package/dist/build/tabs.css +1 -1
package/package.json +1 -1
package/src/Atom/_generic.css +0 -10
package/src/Component/Accordion/accordion.css +3 -1
package/src/Component/Carousel/carousel.css +1 -1
package/src/Component/CookieConsent/cookie-consent.css +3 -0
package/src/Component/Dialog/dialog.css +5 -2
package/src/Component/GlobalAlert/global-alert.css +3 -0
package/src/Component/Navigation/_navigation-collapsible.css +3 -1
package/src/Component/Navigation/_navigation-dropdown.css +3 -1
package/src/Component/Popover/popover.css +3 -1
package/src/Component/Tabs/tabs.css +4 -5
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/_header.css +4 -2
package/src/Layout/Header/_toggles.css +4 -1
package/src/Utility/_mixins.css +35 -13
package/src/_custom-media.css +2 -2
package/src/constants.css +3 -13

package/dist/build/accordion.css CHANGED Viewed

	@@ -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: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	+ @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)}}}}

package/dist/build/base.css CHANGED Viewed

	@@ -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/carousel.css CHANGED Viewed

	@@ -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:~~coarse~~){transition:scale .1s linear;&:active{border-color:var(--outline-color,currentcolor);scale:1.5}}}}}
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}}}}}

package/dist/build/constants.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{:root{--colour-primary-light:color-mix(in oklch, var(--colour-primary), white 90%);--colour-primary-lighter:color-mix(in oklch, var(--colour-primary), white 20%);--colour-primary-darker:color-mix(in oklch, var(--colour-primary), black 20%);--colour-primary-dark:color-mix(in oklch, var(--colour-primary), black 40%);--colour-primary-darkest:color-mix(in oklch, var(--colour-primary), black 50%);--colour-primary-scheme:dark;--colour-accent-light:color-mix(in oklch, var(--colour-accent), white 90%);--colour-accent-lighter:color-mix(in oklch, var(--colour-accent), white 20%);--colour-accent-darker:color-mix(in oklch, var(--colour-accent), black 10%);--colour-accent-dark:color-mix(in oklch, var(--colour-accent), black 40%);--colour-accent-darkest:color-mix(in oklch, var(--colour-accent), black 50%);--colour-accent-scheme:light;--colour-scheme:light;color-scheme:var(--scheme);--colour-background:light-dark(#fff,#14140b);--colour-background-alt:light-dark(#f6f6ee,#0d0d0d);--colour-foreground:light-dark(#14140b,#fff);--colour-foreground-alt:light-dark(#424224,#9e9e94);--colour-border:light-dark(#dbdbd7,#333);--colour-link:light-dark(#0048ff,#e6edff);--colour-foreground-reverse:light-dark(#fff,#14140b);--colour-background-reverse:light-dark(#14140b,#fff);--colour-reverse-scheme:dark;--colour-error:light-dark(#a80022,oklch(89.2372% .0372404 22.4103));--colour-success:light-dark(#008500,oklch(90.6868% .0363644 142.495));--colour-warning:light-dark(#a35f00,oklch(91.0139% .0249352 63.8851));--colour-info:light-dark(#0048ff,oklch(90.2505% .0545782 263.487));--font-family:system-ui, sans-serif;--type-ratio:1.414;--base-font-size:max(1rem, 16px);--font-size:var(--base-font-size);--font-size-xs:calc(var(--base-font-size) * pow(var(--type-ratio), -.5));--font-size-s:calc(var(--base-font-size) * pow(var(--type-ratio), -.25));--font-size-m:~~1rem~~;--font-size-ml:calc(var(--base-font-size) * pow(var(--type-ratio), .5));--font-size-l:calc(var(--base-font-size) * pow(var(--type-ratio), 1));--font-size-xl:calc(var(--base-font-size) * pow(var(--type-ratio), 2));--font-size-xxl:calc(var(--base-font-size) * pow(var(--type-ratio), 3));--font-size-xxxl:calc(var(--base-font-size) * pow(var(--type-ratio), 4));--font-size-diff:.3;--line-height:1.6;--line-height-h:1.2;--line-height-ui:.9rem;--font-weight-normal:400;--font-weight-bold:700;--spacing-xxxxs:.25em;--spacing-xxxs:.5em;--spacing-xxs:.75em;--spacing-xs:.875em;--spacing-s:1em;--spacing-m:1.5em;--spacing-l:2em;--spacing-xl:2.5em;--spacing-xxl:3em;--spacing-xxxl:3.5em;--spacing-xxxxl:3.5em;--spacing-ul:4.5em;--spacing-uul:5em;--spacing-uuul:5.5em;--outline-size:2px;--outline-style:solid;--_colour-outline:#0048ff;--outline-color:light-dark(var(--_colour-outline),color-mix(in oklch, var(--_colour-outline), white 90%));--container-max-width-narrow:58ch;--container-max-width:76ch;--gutter-min:1em;--gutter-max:2em;--gap-s:1em;--gap:1.5em;--gap-l:2em;--gap-xl:2.5em;--breakpoint-xs:420px;--breakpoint-s:540px;--breakpoint-m:720px;--breakpoint-l:946px;--breakpoint-xl:1100px;--shadow-color:#21212126;--shadow-size:.875em;--shadow-shape:0 0 var(--shadow-size);--box-shadow:var(--shadow-shape) var(--shadow-color);--border-radius:4px;--border-radius-l:2em;--border-radius-round:50%;--ratio:16 / 9;--ease:cubic-bezier(.25, 0, .3, 1)}@media (width<720px){:root{--section-xl:var(--spacing-xxl);--type-ratio:1.2}}}@layer design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@property --scheme{syntax:"light\|dark";inherits:true;initial-value:light}@property --contrast-color{syntax:"<color>";inherits:true;initial-value:#000}~~@property --colour-primary{syntax:"<color>";inherits:true;initial-value:#0048ff}@property --colour-accent{syntax:"<color>";inherits:true;initial-value:#fafa61}~~
1	+ @layer popover-polyfill;@layer design-system.defaults{:root{--colour-primary:#0048ff;--colour-primary-light:color-mix(in oklch, var(--colour-primary), white 90%);--colour-primary-lighter:color-mix(in oklch, var(--colour-primary), white 20%);--colour-primary-darker:color-mix(in oklch, var(--colour-primary), black 20%);--colour-primary-dark:color-mix(in oklch, var(--colour-primary), black 40%);--colour-primary-darkest:color-mix(in oklch, var(--colour-primary), black 50%);--colour-primary-scheme:dark;--colour-accent:#fafa61;--colour-accent-light:color-mix(in oklch, var(--colour-accent), white 90%);--colour-accent-lighter:color-mix(in oklch, var(--colour-accent), white 20%);--colour-accent-darker:color-mix(in oklch, var(--colour-accent), black 10%);--colour-accent-dark:color-mix(in oklch, var(--colour-accent), black 40%);--colour-accent-darkest:color-mix(in oklch, var(--colour-accent), black 50%);--colour-accent-scheme:light;--colour-scheme:light;color-scheme:var(--scheme);--colour-background:light-dark(#fff,#14140b);--colour-background-alt:light-dark(#f6f6ee,#0d0d0d);--colour-foreground:light-dark(#14140b,#fff);--colour-foreground-alt:light-dark(#424224,#9e9e94);--colour-border:light-dark(#dbdbd7,#333);--colour-link:light-dark(#0048ff,#e6edff);--colour-foreground-reverse:light-dark(#fff,#14140b);--colour-background-reverse:light-dark(#14140b,#fff);--colour-reverse-scheme:dark;--colour-error:light-dark(#a80022,oklch(89.2372% .0372404 22.4103));--colour-success:light-dark(#008500,oklch(90.6868% .0363644 142.495));--colour-warning:light-dark(#a35f00,oklch(91.0139% .0249352 63.8851));--colour-info:light-dark(#0048ff,oklch(90.2505% .0545782 263.487));--font-family:system-ui, sans-serif;--type-ratio:1.414;--base-font-size:max(1rem, 16px);--font-size:var(--base-font-size);--font-size-xs:calc(var(--base-font-size) * pow(var(--type-ratio), -.5));--font-size-s:calc(var(--base-font-size) * pow(var(--type-ratio), -.25));--font-size-m:var(--base-font-size);--font-size-ml:calc(var(--base-font-size) * pow(var(--type-ratio), .5));--font-size-l:calc(var(--base-font-size) * pow(var(--type-ratio), 1));--font-size-xl:calc(var(--base-font-size) * pow(var(--type-ratio), 2));--font-size-xxl:calc(var(--base-font-size) * pow(var(--type-ratio), 3));--font-size-xxxl:calc(var(--base-font-size) * pow(var(--type-ratio), 4));--font-size-diff:.3;--line-height:1.6;--line-height-h:1.2;--line-height-ui:.9rem;--font-weight-normal:400;--font-weight-bold:700;--spacing-xxxxs:.25em;--spacing-xxxs:.5em;--spacing-xxs:.75em;--spacing-xs:.875em;--spacing-s:1em;--spacing-m:1.5em;--spacing-l:2em;--spacing-xl:2.5em;--spacing-xxl:3em;--spacing-xxxl:3.5em;--spacing-xxxxl:3.5em;--spacing-ul:4.5em;--spacing-uul:5em;--spacing-uuul:5.5em;--outline-size:2px;--outline-style:solid;--_colour-outline:#0048ff;--outline-color:light-dark(var(--_colour-outline),color-mix(in oklch, var(--_colour-outline), white 90%));--container-max-width-narrow:58ch;--container-max-width:76ch;--gutter-min:1em;--gutter-max:2em;--gap-s:1em;--gap:1.5em;--gap-l:2em;--gap-xl:2.5em;--breakpoint-xs:420px;--breakpoint-s:540px;--breakpoint-m:720px;--breakpoint-l:946px;--breakpoint-xl:1100px;--shadow-color:#21212126;--shadow-size:.875em;--shadow-shape:0 0 var(--shadow-size);--box-shadow:var(--shadow-shape) var(--shadow-color);--border-radius:4px;--border-radius-l:2em;--border-radius-round:50%;--ratio:16 / 9;--ease:cubic-bezier(.25, 0, .3, 1)}@media (width<720px){:root{--section-xl:var(--spacing-xxl);--type-ratio:1.2}}}@layer design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@property --scheme{syntax:"light\|dark";inherits:true;initial-value:light}@property --contrast-color{syntax:"<color>";inherits:true;initial-value:#000}

package/dist/build/cookie-consent.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{mx-cookie-consent{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-cookie-consent{z-index:var(--cookie-consent-z-index,100);background-color:var(--cookie-consent-background,var(--colour-background));color:var(--cookie-consent-foreground,var(--colour-foreground));box-shadow:var(--cookie-consent-shadow,var(--box-shadow));border-block-start:var(--cookie-consent-line-width,1px) solid var(--cookie-consent-line-colour,transparent);position:fixed;inset-block-end:0;inset-inline:0;&[inert]{display:none}}.mx-cookie-consent__inner{justify-content:space-between;align-items:center;gap:var(--gap-s);padding-block:var(--spacing-s);padding-inline:var(--spacing-m);flex-wrap:wrap;margin-inline:auto;display:flex}.mx-cookie-consent__actions{gap:var(--spacing-xs);flex-wrap:wrap;flex-shrink:0;display:flex}}
1	+ @layer popover-polyfill;@layer design-system.defaults{mx-cookie-consent{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-cookie-consent{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}z-index:var(--cookie-consent-z-index,100);background-color:var(--cookie-consent-background,var(--colour-background));color:var(--cookie-consent-foreground,var(--colour-foreground));box-shadow:var(--cookie-consent-shadow,var(--box-shadow));border-block-start:var(--cookie-consent-line-width,1px) solid var(--cookie-consent-line-colour,transparent);position:fixed;inset-block-end:0;inset-inline:0;&[inert]{display:none}}.mx-cookie-consent__inner{justify-content:space-between;align-items:center;gap:var(--gap-s);padding-block:var(--spacing-s);padding-inline:var(--spacing-m);flex-wrap:wrap;margin-inline:auto;display:flex}.mx-cookie-consent__actions{gap:var(--spacing-xs);flex-wrap:wrap;flex-shrink:0;display:flex}}

package/dist/build/dialog.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{mx-dialog{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-dialog{inline-size:min(100%, var(--container-max-width));overscroll-behavior:contain;background-color:var(--dialog-background,var(--colour-background));border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));~~opacity:0;~~place-self:center;max-block-size:90vh;padding:0;overflow:auto hidden;transform:translateY(100%);&::backdrop{opacity:0;background-color:#ffffffbf}&[open]{opacity:1;transform:translateY(0);@starting-style{opacity:0;transform:translateY(100%)}&::backdrop{opacity:.8;@starting-style{opacity:0}}}& .mx-dialog__content{padding:var(--spacing-s);@media (width>=720px){padding-block:var(--spacing-l);padding-inline:var(--spacing-xl)}}&>.mx-icon--close{z-index:11;border:0;position:absolute;inset-block-start:var(--spacing-xxs);inset-inline-end:var(--spacing-xxs)}}.mx-dialog--fullscreen{box-shadow:none;border:0;block-size:100%;max-block-size:none;inline-size:100%;inset-block-start:0;&[open]{display:grid}}}
1	+ @layer popover-polyfill;@layer design-system.defaults{mx-dialog{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-dialog{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}inline-size:min(100%, var(--container-max-width));overscroll-behavior:contain;background-color:var(--dialog-background,var(--colour-background));border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));place-self:center;max-block-size:90vh;padding:0;overflow:auto hidden;transform:translateY(100%);&::backdrop{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}background-color:#ffffffbf}&[open]{opacity:1;transform:translateY(0);@starting-style{opacity:0;transform:translateY(100%)}&::backdrop{opacity:.8;@starting-style{opacity:0}}}& .mx-dialog__content{padding:var(--spacing-s);@media (width>=720px){padding-block:var(--spacing-l);padding-inline:var(--spacing-xl)}}&>.mx-icon--close{z-index:11;border:0;position:absolute;inset-block-start:var(--spacing-xxs);inset-inline-end:var(--spacing-xxs)}}.mx-dialog--fullscreen{box-shadow:none;border:0;block-size:100%;max-block-size:none;inline-size:100%;inset-block-start:0;&[open]{display:grid}}}

package/dist/build/form.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-form-item{max-inline-size:var(--container-max-width);&:has([required]) :is(.mx-label,.mx-legend){&.mx-required{color:var(--colour-error)}}&:has([required]:valid) :is(.mx-label,.mx-legend){--colour-error:currentcolor}}.mx-form-item--inline{align-items:flex-start;display:flex}.mx-form-actions{align-items:center;gap:var(--spacing-s);flex-wrap:wrap;display:flex}:is(.mx-input__text,.mx-input__select,.mx-input__textarea){--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);box-shadow:none;font:inherit;letter-spacing:inherit;word-spacing:inherit;max-inline-size:100%;padding-block:calc(var(--form-spacing,var(--spacing-s)) - (var(--line-width,2px) * 2));padding-inline:var(--form-spacing,var(--spacing-s));border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));border-radius:var(--border-radius);background-color:var(--form-background,var(--background,var(--colour-background)));color:var(--form-colour,var(--foreground,var(--colour-foreground)));line-height:var(--line-height-ui);block-size:var(--form-element-height,var(--spacing-xxl));&::placeholder{color:var(--placeholder-colour,var(--foreground-alt,var(--colour-foreground-alt)));opacity:1}&[disabled]{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext;background-color:canvas;border-color:graytext}}}.mx-input--small{border-width:1px;min-inline-size:0}.mx-input--wide{inline-size:100%}.mx-input__divider{padding:var(--form-spacing,var(--spacing-s));line-height:var(--line-height-ui)}.mx-input--icon{border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));min-inline-size:100%;max-inline-size:100%;display:inline-block;position:relative;&:before{block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:var(--form-spacing,var(--spacing-s))}& .mx-input__text{inline-size:100%;background-color:#0000;padding-inline-start:calc(var(--form-spacing,var(--spacing-s)) * 2.5)}&:has(.mx-validate:user-valid):before{background-color:var(--success-foreground,var(--colour-success))}&:has(:is(.mx-validate:user-invalid,[aria-invalid=true])):before{background-color:var(--error-foreground,var(--colour-error))}}.mx-form--inline-button{border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));min-inline-size:100%;max-inline-size:100%;display:flex;position:relative;&:has(.mx-input__text:focus-visible){outline:var(--outline-size) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:calc(var(--line-width,2px) * -1)}&:has(.mx-validate:user-valid),.mx-validate &:has(:user-valid){border-color:var(--success-foreground,var(--colour-success))}&:has(.mx-validate:user-invalid),.mx-validate &:has(:user-invalid),&:has([aria-invalid=true]){border-color:var(--error-foreground,var(--colour-error))}& .mx-input__text{background-color:#0000;border:0;flex-grow:1;&:focus-visible{outline:none}}& .mx-button{margin:var(--spacing-xxxxs);block-size:calc(var(--form-element-height,var(--spacing-xxl)) - var(--spacing-xxxs));border:0;border-radius:3px;flex-shrink:0}}:is(.mx-label,.mx-legend){font-size:var(--font-size);color:var(--label-foreground,var(--foreground,var(--colour-foreground)));gap:4px;margin-block-end:var(--spacing-xxxs);display:flex;&.mx-label--inline{margin-block-end:0;margin-inline-end:var(--spacing-xxs);display:inline-flex}}.mx-checkbox [type=checkbox]{box-shadow:none;appearance:none;inline-size:var(--control-size,var(--spacing-m));block-size:var(--control-size,var(--spacing-m));background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);font-size:1rem;display:flex;@media (pointer:coarse){--control-size:2rem}&:checked:after{content:"";background-color:var(--checkbox-colour,currentcolor);block-size:.75rem;inline-size:.75rem;margin:auto;display:block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%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='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-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)}}&[disabled]{cursor:not-allowed;&+label{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext}}@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;color:graytext;background-color:canvas;border-color:graytext}}}.mx-radio [type=radio]{box-shadow:none;appearance:none;inline-size:var(--control-size,var(--spacing-m));block-size:var(--control-size,var(--spacing-m));background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:50%;font-size:1rem;display:flex;@media (pointer:coarse){--control-size:2rem}&:checked:after{content:"";background-color:var(--radio-colour,var(--colour-primary));border-radius:50%;block-size:.5rem;inline-size:.5rem;margin:auto;display:block;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&[disabled]{cursor:not-allowed;&+label{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext}}@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;color:graytext;background-color:canvas;border-color:graytext}}}:is(.mx-radio,.mx-checkbox){--outline-size:var(--line-width,2px);--outline-offset:var(--outline-size,2px);align-items:center;gap:var(--control-gap,var(--spacing-xxs));margin-block-end:var(--spacing-xxxs);display:flex;&:last-child{margin-block-end:0}& label{cursor:pointer;margin:0}& input{flex-shrink:0;&:focus-visible{outline:var(--outline-size) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset)}}&.mx-form-item--inline{margin-inline-end:var(--control-gap,var(--spacing-xxs));display:inline-flex}}@supports (appearance:base-select){.mx-input__select,::picker(select){appearance:base-select}::picker(select){border-radius:var(--border-radius);border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));inset-block-start:var(--spacing-xxxs)}}.mx-input__select{--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);appearance:none;cursor:pointer;background-color:var(--background,var(--colour-background));background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%3e%3c/svg%3e");background-position:right var(--form-spacing,var(--spacing-s)) center;padding-block:0;padding-inline-end:var(--spacing-xl);@supports (appearance:base-select){&,& ::picker(select){appearance:base-select;background-image:none;padding-inline-end:0}& selectedcontent{align-items:center;column-gap:var(--spacing-xxxs);block-size:100%;display:flex}& option{padding-block:var(--spacing-xxs)}}@supports not (appearance:base-select){@media (forced-colors:active){appearance:auto;background-image:none;padding-inline-end:revert}}&::picker-icon{aspect-ratio:1;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%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='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&:open::picker-icon{rotate:180deg}& option::checkmark{content:"";inline-size:var(--icon-size,var(--spacing-s));block-size:var(--icon-size,var(--spacing-s));background-color:currentColor;display:block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%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='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&[multiple]{background-image:none;block-size:auto}&.mx-input--small{background-position:right var(--spacing-xs) center;padding-inline-end:var(--spacing-m)}}:is(.translated-rtl .mx-input__select,[dir=rtl] .mx-input__select){background-position:left var(--spacing-s) center;&.mx-input--small{background-position:left var(--spacing-xs) center}}.mx-input__textarea{--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);block-size:calc(4 * var(--form-element-height,var(--spacing-xxl)));inline-size:100%}.mx-fieldset{border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding:var(--form-spacing,var(--spacing-s));min-inline-size:0;& legend{padding-block:0;padding-inline:var(--form-spacing,var(--spacing-s))}&:is(.mx-fieldset--plain,:has(.mx-checkbox,.mx-radio)){border:0;padding:0;& legend{padding:0}}&.mx-fieldset--inline{gap:var(--spacing-xxs);flex-wrap:wrap;display:flex;& :is(.form__item,.form__item--inline){margin:0}}}.mx-description{margin-block:var(--form-spacing,var(--spacing-s));font-size:var(--font-size-xs);margin-inline:0;&:last-child{margin-block-end:0}}:is(.mx-success-message,.mx-error-message){margin-block:var(--form-spacing,var(--spacing-s));font-size:var(--font-size-s);color:var(--foreground,var(--colour-foreground));gap:var(--spacing-xxs);margin-inline:0;display:flex;&:last-child{margin-block-end:0}&:before{content:"";inline-size:var(--spacing-m);block-size:var(--spacing-m);flex-shrink:0;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}.mx-error-message:before{background-color:var(--error-foreground,var(--colour-error));-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm3.5%2010.1l-1.4%201.4L8%209.4l-2.1%202.1-1.4-1.4L6.6%208%204.5%205.9l1.4-1.4L8%206.6l2.1-2.1%201.4%201.4L9.4%208l2.1%202.1z'%20/%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='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm3.5%2010.1l-1.4%201.4L8%209.4l-2.1%202.1-1.4-1.4L6.6%208%204.5%205.9l1.4-1.4L8%206.6l2.1-2.1%201.4%201.4L9.4%208l2.1%202.1z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}.mx-success-message:before{background-color:var(--success-foreground,var(--colour-success));-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zM7%2011.4L3.6%208%205%206.6l2%202%204-4L12.4%206%207%2011.4z'%20/%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='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zM7%2011.4L3.6%208%205%206.6l2%202%204-4L12.4%206%207%2011.4z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}.mx-validate,:is(.mx-checkbox,.mx-radio,.mx-autocomplete).mx-validate :is(input,select,textarea){&:user-valid:not([aria-invalid=true]){border-color:var(--success-foreground,var(--colour-success))}&:user-invalid{border-color:var(--error-foreground,var(--colour-error))}}.mx-input__text[aria-invalid=true],.mx-input__select[aria-invalid=true],.mx-input__textarea[aria-invalid=true],.mx-checkbox [type=checkbox][aria-invalid=true],.mx-radio [type=radio][aria-invalid=true]{border-color:var(--error-foreground,var(--colour-error))}}@layer design-system.layout,design-system.utilities;@layer design-system.components{.mx-choice-card{border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));transition:border-color .12s linear,background-color .12s linear;display:block;position:relative;& label{gap:var(--spacing-xxxs);padding-block:var(--choice-padding-block,var(--spacing-s));padding-inline:calc(var(--control-size,var(--spacing-m)) + var(--choice-padding-inline,var(--spacing-m)) * 2) var(--choice-padding-inline,var(--spacing-m));min-block-size:calc(var(--control-size,var(--spacing-m)) + var(--choice-padding-block,var(--spacing-s)) * 2);cursor:pointer;font-weight:var(--font-weight-bold);display:grid}& input{position:absolute;inset-block-start:var(--choice-padding-block,var(--spacing-s));inset-inline-start:var(--choice-padding-inline,var(--spacing-m))}&:has(input:checked){border-color:var(--choice-colour-active,var(--colour-primary));background-color:color-mix(in oklch, var(--choice-colour-active,var(--colour-primary)), white 95%)}&:hover{border-color:var(--choice-colour-active,var(--colour-primary))}&:has(.mx-validate:user-valid),.mx-validate &:has(:user-valid){border-color:var(--success-foreground,var(--colour-success))}&:has(.mx-validate:user-invalid),.mx-validate &:has(:user-invalid),&:has([aria-invalid=true]){border-color:var(--error-foreground,var(--colour-error))}}.mx-choice-divider{align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-s);color:var(--colour-foreground-alt);margin-block-end:var(--spacing-xxxs);display:flex;&:before,&:after{content:"";background-color:var(--colour-border);flex:1;block-size:1px}}.mx-choice-card__hint{font-weight:var(--font-weight-normal);font-size:var(--font-size-s);color:var(--colour-foreground-alt)}.mx-description+.mx-choice-card{margin-block-start:var(--spacing-xxxs)}}
1	+ @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-form-item{max-inline-size:var(--container-max-width);&:has([required]) :is(.mx-label,.mx-legend){&:after,&>.mx-required{color:var(--colour-error)}}&:has([required]:valid) :is(.mx-label,.mx-legend){--colour-error:currentcolor}}.mx-form-item--inline{align-items:flex-start;display:flex}.mx-form-actions{align-items:center;gap:var(--spacing-s);flex-wrap:wrap;display:flex}:is(.mx-input__text,.mx-input__select,.mx-input__textarea){--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);box-shadow:none;font:inherit;letter-spacing:inherit;word-spacing:inherit;max-inline-size:100%;padding-block:calc(var(--form-spacing,var(--spacing-s)) - (var(--line-width,2px) * 2));padding-inline:var(--form-spacing,var(--spacing-s));border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));border-radius:var(--border-radius);background-color:var(--form-background,var(--background,var(--colour-background)));color:var(--form-colour,var(--foreground,var(--colour-foreground)));line-height:var(--line-height-ui);block-size:var(--form-element-height,var(--spacing-xxl));&::placeholder{color:var(--placeholder-colour,var(--foreground-alt,var(--colour-foreground-alt)));opacity:1}&[disabled]{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext;background-color:canvas;border-color:graytext}}}.mx-input--small{border-width:1px;min-inline-size:0}.mx-input--wide{inline-size:100%}.mx-input__divider{padding:var(--form-spacing,var(--spacing-s));line-height:var(--line-height-ui)}.mx-input--icon{border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));min-inline-size:100%;max-inline-size:100%;display:inline-block;position:relative;&:before{block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:var(--form-spacing,var(--spacing-s))}& .mx-input__text{inline-size:100%;background-color:#0000;padding-inline-start:calc(var(--form-spacing,var(--spacing-s)) * 2.5)}&:has(.mx-validate:user-valid):before{background-color:var(--success-foreground,var(--colour-success))}&:has(:is(.mx-validate:user-invalid,[aria-invalid=true])):before{background-color:var(--error-foreground,var(--colour-error))}}.mx-form--inline-button{border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));min-inline-size:100%;max-inline-size:100%;display:flex;position:relative;&:has(.mx-input__text:focus-visible){outline:var(--outline-size) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:calc(var(--line-width,2px) * -1)}&:has(.mx-validate:user-valid),.mx-validate &:has(:user-valid){border-color:var(--success-foreground,var(--colour-success))}&:has(.mx-validate:user-invalid),.mx-validate &:has(:user-invalid),&:has([aria-invalid=true]){border-color:var(--error-foreground,var(--colour-error))}& .mx-input__text{background-color:#0000;border:0;flex-grow:1;inline-size:100%;&:focus-visible{outline:none}}& .mx-button{margin:var(--spacing-xxxxs);block-size:calc(var(--form-element-height,var(--spacing-xxl)) - var(--spacing-xxxs));border:0;border-radius:3px;flex-shrink:0}}:is(.mx-label,.mx-legend){font-size:var(--font-size);color:var(--label-foreground,var(--foreground,var(--colour-foreground)));gap:4px;margin-block-end:var(--spacing-xxxs);display:flex;&.mx-label--inline{margin-block-end:0;margin-inline-end:var(--spacing-xxs);display:inline-flex}}.mx-checkbox [type=checkbox]{box-shadow:none;appearance:none;inline-size:var(--control-size,var(--spacing-m));block-size:var(--control-size,var(--spacing-m));background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);font-size:1rem;display:flex;@media (pointer:fine){--control-size:2rem}&:checked:after{content:"";background-color:var(--checkbox-colour,currentcolor);block-size:.75rem;inline-size:.75rem;margin:auto;display:block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%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='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-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)}}&[disabled]{cursor:not-allowed;&+label{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext}}@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;color:graytext;background-color:canvas;border-color:graytext}}}.mx-radio [type=radio]{box-shadow:none;appearance:none;inline-size:var(--control-size,var(--spacing-m));block-size:var(--control-size,var(--spacing-m));background-color:var(--background,var(--colour-background));border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:50%;font-size:1rem;display:flex;@media (pointer:fine){--control-size:2rem}&:checked:after{content:"";background-color:var(--radio-colour,var(--colour-primary));border-radius:50%;block-size:.5rem;inline-size:.5rem;margin:auto;display:block;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&[disabled]{cursor:not-allowed;&+label{opacity:var(--disabled-opacity,.6);cursor:not-allowed;@media (forced-colors:active){forced-color-adjust:none;opacity:1;color:graytext}}@media (forced-colors:active){--forced-colour:GrayText;forced-color-adjust:none;color:graytext;background-color:canvas;border-color:graytext}}}:is(.mx-radio,.mx-checkbox){--outline-size:var(--line-width,2px);--outline-offset:var(--outline-size,2px);align-items:center;gap:var(--control-gap,var(--spacing-xxs));margin-block-end:var(--spacing-xxxs);display:flex;&:last-child{margin-block-end:0}& label{cursor:pointer;margin:0}& input{flex-shrink:0;&:focus-visible{outline:var(--outline-size) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset)}}&.mx-form-item--inline{margin-inline-end:var(--control-gap,var(--spacing-xxs));display:inline-flex}}@supports (appearance:base-select){.mx-input__select,::picker(select){appearance:base-select}::picker(select){border-radius:var(--border-radius);border:var(--line-width,2px) solid var(--line-colour,var(--line-colour,var(--colour-border)));inset-block-start:var(--spacing-xxxs)}}.mx-input__select{--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);appearance:none;cursor:pointer;background-color:var(--background,var(--colour-background));background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%3e%3c/svg%3e");background-position:right var(--form-spacing,var(--spacing-s)) center;padding-block:0;padding-inline-end:var(--spacing-xl);@supports (appearance:base-select){&,& ::picker(select){appearance:base-select;background-image:none;padding-inline-end:0}& selectedcontent{align-items:center;column-gap:var(--spacing-xxxs);block-size:100%;display:flex}& option{padding-block:var(--spacing-xxs)}}@supports not (appearance:base-select){@media (forced-colors:active){appearance:auto;background-image:none;padding-inline-end:revert}}&::picker-icon{aspect-ratio:1;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%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='M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206z'%20/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&:open::picker-icon{rotate:180deg}& option::checkmark{content:"";inline-size:var(--icon-size,var(--spacing-s));block-size:var(--icon-size,var(--spacing-s));background-color:currentColor;display:block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%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='M5.6%209.6L2.4%206.4%200%208.8l5.6%205.6L16%204l-2.4-2.4z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}&[multiple]{background-image:none;block-size:auto}&.mx-input--small{background-position:right var(--spacing-xs) center;padding-inline-end:var(--spacing-m)}}:is(.translated-rtl .mx-input__select,[dir=rtl] .mx-input__select){background-position:left var(--spacing-s) center;&.mx-input--small{background-position:left var(--spacing-xs) center}}.mx-input__textarea{--outline-size:var(--line-width,2px);--outline-offset:calc(var(--outline-size,2px) * -1);block-size:calc(4 * var(--form-element-height,var(--spacing-xxl)));inline-size:100%}.mx-fieldset{border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding:var(--form-spacing,var(--spacing-s));min-inline-size:0;& legend{padding-block:0;padding-inline:var(--form-spacing,var(--spacing-s))}&:is(.mx-fieldset--plain,:has(.mx-checkbox,.mx-radio)){border:0;padding:0;& legend{padding:0}}&.mx-fieldset--inline{gap:var(--spacing-xxs);flex-wrap:wrap;display:flex;& :is(.form__item,.form__item--inline){margin:0}}}.mx-description{margin-block:var(--form-spacing,var(--spacing-s));font-size:var(--font-size-xs);margin-inline:0;&:last-child{margin-block-end:0}}:is(.mx-success-message,.mx-error-message){margin-block:var(--form-spacing,var(--spacing-s));font-size:var(--font-size-s);color:var(--foreground,var(--colour-foreground));gap:var(--spacing-xxs);margin-inline:0;display:flex;&:last-child{margin-block-end:0}&:before{content:"";inline-size:var(--spacing-m);block-size:var(--spacing-m);flex-shrink:0;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}.mx-error-message:before{background-color:var(--error-foreground,var(--colour-error));-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm3.5%2010.1l-1.4%201.4L8%209.4l-2.1%202.1-1.4-1.4L6.6%208%204.5%205.9l1.4-1.4L8%206.6l2.1-2.1%201.4%201.4L9.4%208l2.1%202.1z'%20/%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='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm3.5%2010.1l-1.4%201.4L8%209.4l-2.1%202.1-1.4-1.4L6.6%208%204.5%205.9l1.4-1.4L8%206.6l2.1-2.1%201.4%201.4L9.4%208l2.1%202.1z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}.mx-success-message:before{background-color:var(--success-foreground,var(--colour-success));-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zM7%2011.4L3.6%208%205%206.6l2%202%204-4L12.4%206%207%2011.4z'%20/%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='M8%200C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zM7%2011.4L3.6%208%205%206.6l2%202%204-4L12.4%206%207%2011.4z'%20/%3e%3c/svg%3e");@media (forced-colors:active){forced-color-adjust:none;background-color:var(--forced-colour,CanvasText)}}.mx-validate,:is(.mx-checkbox,.mx-radio,.mx-autocomplete).mx-validate :is(input,select,textarea){&:user-valid:not([aria-invalid=true]){border-color:var(--success-foreground,var(--colour-success))}&:user-invalid{border-color:var(--error-foreground,var(--colour-error))}}.mx-input__text[aria-invalid=true],.mx-input__select[aria-invalid=true],.mx-input__textarea[aria-invalid=true],.mx-checkbox [type=checkbox][aria-invalid=true],.mx-radio [type=radio][aria-invalid=true]{border-color:var(--error-foreground,var(--colour-error))}}@layer design-system.layout,design-system.utilities;@layer design-system.components{.mx-choice-card{border:var(--line-width,2px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);background-color:var(--background,var(--colour-background));transition:border-color .12s linear,background-color .12s linear;display:block;position:relative;& label{gap:var(--spacing-xxxs);padding-block:var(--choice-padding-block,var(--spacing-s));padding-inline:calc(var(--control-size,var(--spacing-m)) + var(--choice-padding-inline,var(--spacing-m)) * 2) var(--choice-padding-inline,var(--spacing-m));min-block-size:calc(var(--control-size,var(--spacing-m)) + var(--choice-padding-block,var(--spacing-s)) * 2);cursor:pointer;font-weight:var(--font-weight-bold);display:grid}& input{position:absolute;inset-block-start:var(--choice-padding-block,var(--spacing-s));inset-inline-start:var(--choice-padding-inline,var(--spacing-m))}&:has(input:checked){border-color:var(--choice-colour-active,var(--colour-primary));background-color:color-mix(in oklch, var(--choice-colour-active,var(--colour-primary)), white 95%)}&:hover{border-color:var(--choice-colour-active,var(--colour-primary))}&:has(.mx-validate:user-valid),.mx-validate &:has(:user-valid){border-color:var(--success-foreground,var(--colour-success))}&:has(.mx-validate:user-invalid),.mx-validate &:has(:user-invalid),&:has([aria-invalid=true]){border-color:var(--error-foreground,var(--colour-error))}}.mx-choice-divider{align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-s);color:var(--colour-foreground-alt);margin-block-end:var(--spacing-xxxs);display:flex;&:before,&:after{content:"";background-color:var(--colour-border);flex:1;block-size:1px}}.mx-choice-card__hint{font-weight:var(--font-weight-normal);font-size:var(--font-size-s);color:var(--colour-foreground-alt)}.mx-description+.mx-choice-card{margin-block-start:var(--spacing-xxxs)}}

package/dist/build/global-alert.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{mx-closable-alert{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-global-alert{background-color:var(--alert-background,var(--colour-primary-light));color:var(--alert-foreground,var(--colour-foreground));color-scheme:var(--alert-scheme,light);& .mx-global-alert__inner{gap:var(--gap-s);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-s);display:grid;&:has(.mx-icon--close){grid-template-columns:auto min-content;grid-template-areas:"content close";& .message__content{grid-area:content}}}& a{color:inherit}&.mx-global-alert--critical{--alert-foreground:var(--critical-alert-foreground,var(--colour-error));--alert-background:var(--critical-alert-background,color-mix(in oklch, var(--colour-error), white 95%))}& .mx-icon--close{--icon-size:1rem;appearance:none;inline-size:var(--spacing-l);block-size:var(--spacing-l);color:inherit;background-color:#0000;border:0;grid-area:close;justify-content:end;padding:0}}}
1	+ @layer popover-polyfill;@layer design-system.defaults{mx-closable-alert{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-global-alert{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}background-color:var(--alert-background,var(--colour-primary-light));color:var(--alert-foreground,var(--colour-foreground));color-scheme:var(--alert-scheme,light);& .mx-global-alert__inner{gap:var(--gap-s);padding-block:var(--spacing-xxs);padding-inline:var(--spacing-s);display:grid;&:has(.mx-icon--close){grid-template-columns:auto min-content;grid-template-areas:"content close";& .message__content{grid-area:content}}}& a{color:inherit}&.mx-global-alert--critical{--alert-foreground:var(--critical-alert-foreground,var(--colour-error));--alert-background:var(--critical-alert-background,color-mix(in oklch, var(--colour-error), white 95%))}& .mx-icon--close{--icon-size:1rem;appearance:none;inline-size:var(--spacing-l);block-size:var(--spacing-l);color:inherit;background-color:#0000;border:0;grid-area:close;justify-content:end;padding:0}}}

package/dist/build/grid.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-grid{grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));grid-template-rows:1fr;display:grid;@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}&:is(ul,ol){padding-inline-start:unset;list-style:none}}[class=mx-grid--cols-]{--grid-repeat:1}.mx-grid--cols-xs-2{@media (width>=420px){--grid-repeat:2}}.mx-grid--cols-sm-2{@media (width>=540px){--grid-repeat:2}}.mx-grid--cols-md-2{@media (width>=720px){--grid-repeat:2}}.mx-grid--cols-lg-2{@media (width>=946px){--grid-repeat:2}}.mx-grid--cols-xl-2{@media (width>=1100px){--grid-repeat:2}}.mx-grid--cols-md-3{@media (width>=720px){--grid-repeat:3}}.mx-grid--cols-lg-3{@media (width>=946px){--grid-repeat:3}}.mx-grid--cols-xl-3{@media (width>=1100px){--grid-repeat:3}}.mx-grid--cols-md-4{@media (width>=720px){--grid-repeat:4}}.mx-grid--cols-lg-4{@media (width>=946px){--grid-repeat:4}}.mx-grid--cols-xl-4{@media (width>=1100px){--grid-repeat:4}}.mx-grid--collapse{--grid-gap:0}.mx-grid--collapse-cols{column-gap:0}.mx-grid--collapse-rows{row-gap:0}[class=mx-grid-item__span-]{grid-column:auto / var(--grid-span,auto)}.mx-grid-item__span-xs-2{@media (width>=420px){--grid-span:span 2}}.mx-grid-item__span-sm-2{@media (width>=540px){--grid-span:span 2}}.mx-grid-item__span-md-2{@media (width>=720px){--grid-span:span 2}}.mx-grid-item__span-lg-2{@media (width>=946px){--grid-span:span 2}}.mx-grid-item__span-xl-2{@media (width>=1100px){--grid-span:span 2}}.mx-grid-item__span-md-3{@media (width>=720px){--grid-span:span 3}}.mx-grid-item__span-lg-3{@media (width>=946px){--grid-span:span 3}}.mx-grid-item__span-xl-3{@media (width>=1100px){--grid-span:span 3}}.mx-grid-item__span-md-4{@media (width>=720px){--grid-span:span 4}}.mx-grid-item__span-lg-4{@media (width>=946px){--grid-span:span 4}}.mx-grid-item__span-xl-4{@media (width>=1100px){--grid-span:span 4}}}
1	+ @layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-grid{grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));grid-template-rows:1fr;display:grid;@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}&:is(ul,ol){padding-inline-start:unset;list-style:none}}[class=mx-grid--cols-]{--grid-repeat:1}.mx-grid--cols-xs-2{@media (width>=420px){--grid-repeat:2}}.mx-grid--cols-sm-2{@media (width>=540px){--grid-repeat:2}}.mx-grid--cols-md-2{@media (width>=720px){--grid-repeat:2}}.mx-grid--cols-lg-2{@media (width>=946px){--grid-repeat:2}}.mx-grid--cols-xl-2{@media (width>=1100px){--grid-repeat:2}}.mx-grid--cols-md-3{@media (width>=720px){--grid-repeat:3}}.mx-grid--cols-lg-3{@media (width>=946px){--grid-repeat:3}}.mx-grid--cols-xl-3{@media (width>=1100px){--grid-repeat:3}}.mx-grid--cols-md-4{@media (width>=720px){--grid-repeat:4}}.mx-grid--cols-lg-4{@media (width>=946px){--grid-repeat:4}}.mx-grid--cols-xl-4{@media (width>=1100px){--grid-repeat:4}}.mx-grid--collapse{--grid-gap:0}.mx-grid--collapse-cols{column-gap:0}.mx-grid--collapse-rows{row-gap:0}.mx-grid--masonry{@supports (display:grid-lanes){display:grid-lanes;grid-template-rows:none}}[class=mx-grid-item__span-]{grid-column:auto / var(--grid-span,auto)}.mx-grid-item__span-xs-2{@media (width>=420px){--grid-span:span 2}}.mx-grid-item__span-sm-2{@media (width>=540px){--grid-span:span 2}}.mx-grid-item__span-md-2{@media (width>=720px){--grid-span:span 2}}.mx-grid-item__span-lg-2{@media (width>=946px){--grid-span:span 2}}.mx-grid-item__span-xl-2{@media (width>=1100px){--grid-span:span 2}}.mx-grid-item__span-md-3{@media (width>=720px){--grid-span:span 3}}.mx-grid-item__span-lg-3{@media (width>=946px){--grid-span:span 3}}.mx-grid-item__span-xl-3{@media (width>=1100px){--grid-span:span 3}}.mx-grid-item__span-md-4{@media (width>=720px){--grid-span:span 4}}.mx-grid-item__span-lg-4{@media (width>=946px){--grid-span:span 4}}.mx-grid-item__span-xl-4{@media (width>=1100px){--grid-span:span 4}}}

package/dist/build/header.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-header__toggles{gap:var(--toggle-gap,var(--spacing-xs));z-index:var(--toggle-index,3);padding-inline-end:2px;display:flex;position:relative;@media (width>=720px){display:none}& .mx-button--secondary{border-color:#0000}& [hidden]{display:none}}.mx-header__collapse-toggle{opacity:1;inline-size:100%;z-index:var(--collapse-index,2);align-items:center;display:grid;position:fixed;inset:0;@starting-style{opacity:0;display:grid}@media (width<720px){padding-inline:var(--gutter,var(--spacing-l));grid-template-columns:inherit;& .mx-header__nav-inner{grid-column:full}}@media (width>=720px){block-size:auto;inline-size:auto;position:relative}&[inert]{opacity:0;transition-duration:.4s;display:none}}.global-nav-up-only{@media (width<720px){display:none}}.mx-header__inner{grid-template-columns:1fr auto;align-items:center;display:grid}.mx-header__brand{gap:var(--brand-gap,var(--gap));align-items:center;margin-inline-end:auto;display:flex}.mx-header__name{display:grid}.mx-header__main{gap:var(--main-gap,var(--gap));align-items:center;display:flex}.mx-header__search{& form{margin-block:var(--spacing-m)}& input{@media (width>=720px){max-inline-size:150px}}}.mx-header__nav-inner{@media (width>=720px){display:flex}}.mx-header__nav-right{margin-block:var(--spacing-m);@media (width>=720px){margin-block:0;margin-inline-start:auto;padding-block:4px}}}
1	+ @layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-header__toggles{gap:var(--toggle-gap,var(--spacing-xs));z-index:var(--toggle-index,3);align-self:var(--toggle-align,start);padding-inline-end:2px;display:flex;position:relative;@media (width>=720px){display:none}& .mx-button--secondary{border-color:#0000}& [hidden]{display:none}}.mx-header__collapse-toggle{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}inline-size:100%;z-index:var(--collapse-index,2);align-items:center;display:grid;position:fixed;inset:0;@starting-style{opacity:0;display:grid}@media (width<720px){padding-inline:var(--gutter,var(--spacing-l));grid-template-columns:inherit;& .mx-header__nav-inner{grid-column:full}}@media (width>=720px){block-size:auto;inline-size:auto;position:relative}&[inert]{opacity:0;transition-duration:.4s;display:none}}.global-nav-up-only{@media (width<720px){display:none}}.mx-header__inner{grid-template-columns:minmax(var(--brand-logo-width,120px), 1fr) auto;align-items:center;gap:var(--header-gap,var(--spacing-xxxs));display:grid}.mx-header__brand{gap:var(--brand-gap,var(--spacing-xxxs) var(--gap));flex-wrap:wrap;align-items:center;margin-inline-end:auto;display:flex}.mx-header__name{display:grid}.mx-header__main{gap:var(--main-gap,var(--gap));align-items:center;display:flex}.mx-header__search{& form{margin-block:var(--spacing-m)}& input{@media (width>=720px){max-inline-size:150px}}}.mx-header__nav-inner{@media (width>=720px){display:flex}}.mx-header__nav-right{margin-block:var(--spacing-m);@media (width>=720px){margin-block:0;margin-inline-start:auto;padding-block:4px}}}

package/dist/build/navigation.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-nav{--link-colour:currentcolor;&:where(:not(:has(ul))),& ul{font-size:var(--nav-font-size,var(--font-size));flex-direction:column;padding-inline-start:0;list-style-type:none;display:flex}& a[href]{-webkit-text-decoration-line:var(--nav-underline,none);text-decoration-line:var(--nav-underline,none);&:hover{-webkit-text-decoration-line:var(--nav-active-underline,underline);text-decoration-line:var(--nav-active-underline,underline)}}}.mx-nav--inline{&:where(:not(:has(ul))),&>ul{align-items:center;gap:var(--nav-gap,var(--spacing-s));flex-flow:wrap}}.mx-nav__toggle{background:unset;appearance:none;color:var(--toggle-foreground,var(--foreground,var(--colour-foreground)));inline-size:var(--spacing-l);block-size:var(--spacing-l);cursor:pointer;border:0;padding:0;position:absolute;inset-block-start:var(--toggle-top,12px);inset-inline-end:0}.mx-nav--open{&>.mx-nav__toggle:before{transform:rotate(180deg)}}}@layer design-system.layout,design-system.utilities;@layer design-system.components{.mx-nav--collapsible{--outline-offset:-1px;& .mx-nav__toggle{inset-inline:auto var(--spacing-xxs);@media (width>=720px){display:block}}& ul li{position:relative;&:has([aria-current=page],.is-active)>a{font-weight:var(--font-weight-bold)}& a{color:inherit;border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline:var(--indent,var(--spacing-xxs)) var(--item-spacing,var(--spacing-xxs));display:block}}& .mx-nav__level-2>li>a{--indent:var(--spacing-s);@media (width>=720px){--indent:var(--spacing-m)}}& .mx-nav__level-3>li>a{--indent:var(--spacing-m);@media (width>=720px){--indent:var(--spacing-l)}}& :is([aria-current=page],.is-active>a){background-color:var(--nav-active-background,var(--background,var(--colour-background-alt)));color:var(--nav-active-foreground,inherit)}& li>ul{opacity:1;display:grid;@starting-style{opacity:0;display:grid}&[inert]{opacity:0;transition-duration:.4s;display:none}}& li:is(.mx-nav__has-subnav,:has(>ul))>a{padding-inline-end:var(--spacing-l)}}.mx-nav--dropdown{--outline-offset:-1px;--nav-active-underline:none;margin-block:var(--spacing-m);@media (width>=720px){margin-block:0}& li{margin:0;&:is(.mx-nav__has-subnav,:has(>ul)){position:relative;&>a{--toggle-gap:var(--spacing-l)}}}& a{display:block;&[aria-expanded=true]{@media (width>=720px){background-color:var(--nav-expanded-background,var(--background,var(--colour-background-alt)));color:var(--nav-expanded-foreground,inherit);&+.mx-nav__toggle{color:var(--nav-expanded-foreground,inherit)}}}}& li>ul{opacity:1;display:grid;@starting-style{opacity:0;display:grid}&[inert]{opacity:0;transition-duration:.4s;display:none}}& .mx-nav__level-1{margin:0;overflow:hidden;@media (width>=720px){flex-flow:row;justify-content:flex-start;align-items:center;overflow:visible}&>li>a:where(:not(.mx-button)){padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline-end:var(--toggle-gap,var(--item-spacing,var(--spacing-xxs)));@media (width>=720px){padding-inline-start:var(--item-spacing,var(--spacing-xxs))}}}& .mx-nav__level-2{inline-size:100%;margin:0;display:grid;position:relative;inset-inline-start:0;@media (width>=720px){inline-size:var(--dropdown-width,270px);border-radius:var(--border-radius);background-color:var(--nav-expanded-background,var(--background,var(--colour-background-alt)));color:var(--nav-expanded-foreground,inherit);position:absolute;& .mx-nav__toggle:before{transform:rotate(-90deg)}}&>li>a:where(:not(.mx-button)){padding:var(--item-spacing,var(--spacing-xxs));@media (width<720px){padding-inline-start:var(--spacing-l)}}}& .mx-nav--reverse .nav__level-2{@media (width>=720px){inset-inline:auto 0;& .mx-nav__toggle:before{transform:rotate(90deg)}}}& .mx-nav__separator{border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-nav--mega-nav{@media (width<720px){max-block-size:100%;overflow:auto}& .mx-nav__level-2 ul{border-block-start:1px solid var(--border-colour);inline-size:100%;padding-inline-start:var(--spacing-l);display:block;position:relative;@media (width>=720px){inline-size:var(--dropdown-width,270px);border-radius:0 var(--border-radius) var(--border-radius) 0;background-color:var(--expanded-background,var(--colour-background-alt));min-block-size:100%;color:var(--expanded-foreground,inherit);border-block-start:0;padding-inline-start:0;position:absolute;inset-block-start:0;inset-inline-start:var(--dropdown-width,270px)}&>li>a:where(:not(.mx-button)){padding:var(--item-spacing,var(--spacing-xxs));@media (width<720px){padding-inline-start:var(--spacing-l)}}}& .mx-nav--reverse .mx-nav__level-2 ul{@media (width>=720px){border-radius:var(--border-radius) 0 0 var(--border-radius);inset-inline-start:calc(var(--dropdown-width,270px) * -1)}}}}
1	+ @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-nav{--link-colour:currentcolor;&:where(:not(:has(ul))),& ul{font-size:var(--nav-font-size,var(--font-size));flex-direction:column;padding-inline-start:0;list-style-type:none;display:flex}& a[href]{-webkit-text-decoration-line:var(--nav-underline,none);text-decoration-line:var(--nav-underline,none);&:hover{-webkit-text-decoration-line:var(--nav-active-underline,underline);text-decoration-line:var(--nav-active-underline,underline)}}}.mx-nav--inline{&:where(:not(:has(ul))),&>ul{align-items:center;gap:var(--nav-gap,var(--spacing-s));flex-flow:wrap}}.mx-nav__toggle{background:unset;appearance:none;color:var(--toggle-foreground,var(--foreground,var(--colour-foreground)));inline-size:var(--spacing-l);block-size:var(--spacing-l);cursor:pointer;border:0;padding:0;position:absolute;inset-block-start:var(--toggle-top,12px);inset-inline-end:0}.mx-nav--open{&>.mx-nav__toggle:before{transform:rotate(180deg)}}}@layer design-system.layout,design-system.utilities;@layer design-system.components{.mx-nav--collapsible{--outline-offset:-1px;& .mx-nav__toggle{inset-inline:auto var(--spacing-xxs);@media (width>=720px){display:block}}& ul li{position:relative;&:has([aria-current=page],.is-active)>a{font-weight:var(--font-weight-bold)}& a{color:inherit;border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline:var(--indent,var(--spacing-xxs)) var(--item-spacing,var(--spacing-xxs));display:block}}& .mx-nav__level-2>li>a{--indent:var(--spacing-s);@media (width>=720px){--indent:var(--spacing-m)}}& .mx-nav__level-3>li>a{--indent:var(--spacing-m);@media (width>=720px){--indent:var(--spacing-l)}}& :is([aria-current=page],.is-active>a){background-color:var(--nav-active-background,var(--background,var(--colour-background-alt)));color:var(--nav-active-foreground,inherit)}& li>ul{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:grid;@starting-style{opacity:0;display:grid}&[inert]{opacity:0;transition-duration:.4s;display:none}}& li:is(.mx-nav__has-subnav,:has(>ul))>a{padding-inline-end:var(--spacing-l)}}.mx-nav--dropdown{--outline-offset:-1px;--nav-active-underline:none;margin-block:var(--spacing-m);@media (width>=720px){margin-block:0}& li{margin:0;&:is(.mx-nav__has-subnav,:has(>ul)){position:relative;&>a{--toggle-gap:var(--spacing-l)}}}& a{display:block;&[aria-expanded=true]{@media (width>=720px){background-color:var(--nav-expanded-background,var(--background,var(--colour-background-alt)));color:var(--nav-expanded-foreground,inherit);&+.mx-nav__toggle{color:var(--nav-expanded-foreground,inherit)}}}}& li>ul{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:grid;@starting-style{opacity:0;display:grid}&[inert]{opacity:0;transition-duration:.4s;display:none}}& .mx-nav__level-1{margin:0;overflow:hidden;@media (width>=720px){flex-flow:row;justify-content:flex-start;align-items:center;overflow:visible}&>li>a:where(:not(.mx-button)){padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline-end:var(--toggle-gap,var(--item-spacing,var(--spacing-xxs)));@media (width>=720px){padding-inline-start:var(--item-spacing,var(--spacing-xxs))}}}& .mx-nav__level-2{inline-size:100%;margin:0;display:grid;position:relative;inset-inline-start:0;@media (width>=720px){inline-size:var(--dropdown-width,270px);border-radius:var(--border-radius);background-color:var(--nav-expanded-background,var(--background,var(--colour-background-alt)));color:var(--nav-expanded-foreground,inherit);position:absolute;& .mx-nav__toggle:before{transform:rotate(-90deg)}}&>li>a:where(:not(.mx-button)){padding:var(--item-spacing,var(--spacing-xxs));@media (width<720px){padding-inline-start:var(--spacing-l)}}}& .mx-nav--reverse .nav__level-2{@media (width>=720px){inset-inline:auto 0;& .mx-nav__toggle:before{transform:rotate(90deg)}}}& .mx-nav__separator{border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-nav--mega-nav{@media (width<720px){max-block-size:100%;overflow:auto}& .mx-nav__level-2 ul{border-block-start:1px solid var(--border-colour);inline-size:100%;padding-inline-start:var(--spacing-l);display:block;position:relative;@media (width>=720px){inline-size:var(--dropdown-width,270px);border-radius:0 var(--border-radius) var(--border-radius) 0;background-color:var(--expanded-background,var(--colour-background-alt));min-block-size:100%;color:var(--expanded-foreground,inherit);border-block-start:0;padding-inline-start:0;position:absolute;inset-block-start:0;inset-inline-start:var(--dropdown-width,270px)}&>li>a:where(:not(.mx-button)){padding:var(--item-spacing,var(--spacing-xxs));@media (width<720px){padding-inline-start:var(--spacing-l)}}}& .mx-nav--reverse .mx-nav__level-2 ul{@media (width>=720px){border-radius:var(--border-radius) 0 0 var(--border-radius);inset-inline-start:calc(var(--dropdown-width,270px) * -1)}}}}

package/dist/build/popover.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{mx-popover{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-popover__trigger:has(~:popover-open){&:before,& .mx-icon--chevron-down{rotate:180deg}}:where(.mx-popover){opacity:0;padding:var(--popover-padding,var(--spacing-xs));background-color:var(--popover-background,var(--colour-background));color:var(--popover-foreground,var(--colour-foreground));border:var(--popover-line-width,1px) solid var(--popover-line-colour,transparent);border-radius:var(--popover-radius,var(--border-radius));box-shadow:var(--popover-shadow,var(--box-shadow));max-inline-size:var(--popover-width,30ch);margin-block:var(--popover-top,var(--spacing-xxxs)) 0;position-area:block-end center;position-try-fallbacks:flip-block flip-inline;inline-size:max-content;min-inline-size:anchor-size(width);margin-inline:0;display:none;position:absolute;&[data-placement=bottom-start]{position-area:block-end span-inline-end}&[data-placement=bottom-end]{position-area:block-end span-inline-start}&[data-placement=top]{position-area:block-start center;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=top-start]{position-area:block-start span-inline-end;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=top-end]{position-area:block-start span-inline-start;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=right]{position-area:center inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=right-start]{position-area:span-block-end inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=right-end]{position-area:span-block-start inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=left]{position-area:center inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&[data-placement=left-start]{position-area:span-block-end inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&[data-placement=left-end]{position-area:span-block-start inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&:popover-open{opacity:1;display:block;@starting-style{opacity:0;display:block}}& :is(h2,h3){--heading-font-size:var(--font-size-m)}}}
1	+ @layer popover-polyfill;@layer design-system.defaults{mx-popover{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-popover__trigger:has(~:popover-open){&:before,& .mx-icon--chevron-down{rotate:180deg}}:where(.mx-popover){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}padding:var(--popover-padding,var(--spacing-xs));background-color:var(--popover-background,var(--colour-background));color:var(--popover-foreground,var(--colour-foreground));border:var(--popover-line-width,1px) solid var(--popover-line-colour,transparent);border-radius:var(--popover-radius,var(--border-radius));box-shadow:var(--popover-shadow,var(--box-shadow));max-inline-size:var(--popover-width,30ch);margin-block:var(--popover-top,var(--spacing-xxxs)) 0;position-area:block-end center;position-try-fallbacks:flip-block flip-inline;inline-size:max-content;min-inline-size:anchor-size(width);margin-inline:0;display:none;position:absolute;&[data-placement=bottom-start]{position-area:block-end span-inline-end}&[data-placement=bottom-end]{position-area:block-end span-inline-start}&[data-placement=top]{position-area:block-start center;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=top-start]{position-area:block-start span-inline-end;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=top-end]{position-area:block-start span-inline-start;margin-block:0 var(--popover-top,var(--spacing-xxxs))}&[data-placement=right]{position-area:center inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=right-start]{position-area:span-block-end inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=right-end]{position-area:span-block-start inline-end;margin-block:0;margin-inline:var(--popover-top,var(--spacing-xxs)) 0}&[data-placement=left]{position-area:center inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&[data-placement=left-start]{position-area:span-block-end inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&[data-placement=left-end]{position-area:span-block-start inline-start;margin-block:0;margin-inline:0 var(--popover-top,var(--spacing-xxs))}&:popover-open{opacity:1;display:block;@starting-style{opacity:0;display:block}}& :is(h2,h3){--heading-font-size:var(--font-size-m)}}}

package/dist/build/tabs.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer popover-polyfill;@layer design-system.defaults{mx-tabs{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-tabs{grid-template-areas:"tabs""panels";display:grid;position:relative;&:where(:not(:first-child)){margin-block-start:var(--flow-gap,var(--gap))}&:not(:defined){gap:var(--flow-gap,var(--gap))}& mx-dropmenu{grid-area:tabs}}.mx-tabs__list{grid-area:tabs;@media (width>=720px){gap:var(--spacing-xxs);flex-wrap:wrap;display:flex}& button{min-inline-size:var(--tab-min-width,0);padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,var(--spacing-m));background-color:var(--tab-background,var(--background,var(--colour-background)));color:var(--tab-foreground,var(--foreground,var(--colour-foreground)));font-family:inherit;font-size:var(--tab-font-size,var(--font-size-xs));border:0;display:block;&[aria-selected=true]{background-color:var(--tab-active-background,var(--colour-background-alt));color:var(--tab-active-foreground,var(--colour-foreground));font-weight:var(--font-weight-bold);text-decoration-line:underline}}}.mx-tabs__panel{opacity:1;~~inline~~-~~size~~:~~100%;@~~starting-style{opacity:0}&[inert]{opacity:0;transition-duration:.4s}}.mx-tabs:defined .mx-tabs__panel{padding:var(--tab-panels-padding,var(--section-l,var(--spacing-xl)) 0);grid-area:panels}.mx-tabs--lined{@media (width>=720px){& .mx-tabs__list{border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));& button{border-radius:var(--border-radius) var(--border-radius) 0 0;border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-block-end:0}}}}.mx-tabs--centered{@media (width>=720px){& .mx-tabs__list{place-content:center}}}}
1	+ @layer popover-polyfill;@layer design-system.defaults{mx-tabs{display:block}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-tabs{grid-template-areas:"tabs""panels";display:grid;position:relative;&:where(:not(:first-child)){margin-block-start:var(--flow-gap,var(--gap))}&:not(:defined){gap:var(--flow-gap,var(--gap))}& mx-dropmenu{grid-area:tabs}}.mx-tabs__list{grid-area:tabs;@media (width>=720px){gap:var(--spacing-xxs);flex-wrap:wrap;display:flex}& button{min-inline-size:var(--tab-min-width,0);padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,var(--spacing-m));background-color:var(--tab-background,var(--background,var(--colour-background)));color:var(--tab-foreground,var(--foreground,var(--colour-foreground)));font-family:inherit;font-size:var(--tab-font-size,var(--font-size-xs));cursor:pointer;border:0;display:block;&[aria-selected=true]{background-color:var(--tab-active-background,var(--colour-background-alt));color:var(--tab-active-foreground,var(--colour-foreground));font-weight:var(--font-weight-bold);text-decoration-line:underline}}}.mx-tabs__panel{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}inline-size:100%;&[inert]{opacity:0;transition-duration:.4s}}.mx-tabs:defined .mx-tabs__panel{padding:var(--tab-panels-padding,var(--section-l,var(--spacing-xl)) 0);grid-area:panels}.mx-tabs--lined{@media (width>=720px){& .mx-tabs__list{border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));& button{border-radius:var(--border-radius) var(--border-radius) 0 0;border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-block-end:0}}}}.mx-tabs--centered{@media (width>=720px){& .mx-tabs__list{place-content:center}}}}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.1.0-rc.3",
+  "version": "0.1.0-rc.4",
   "license": "MIT",
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",

package/src/Atom/_generic.css CHANGED Viewed

@@ -9,16 +9,6 @@
     box-sizing: border-box;
     background-repeat: no-repeat;
     margin: 0;
-    opacity: 1;
-    transition-property:
-      opacity, color, background-color, border-color, transform, rotate, display, overlay;
-    transition-duration: 0.5s;
-    transition-timing-function: var(--ease);
-    transition-behavior: allow-discrete;
-    @starting-style {
-      opacity: 0;
-    }
   }
   :focus {

package/src/Component/Accordion/accordion.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Accordion
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   details {
@@ -59,8 +60,9 @@
     }
     & > .mx-accordion__content {
+      @add-mixin transition;
       display: none;
-      opacity: 0;
       overflow: hidden;
     }

package/src/Component/Carousel/carousel.css CHANGED Viewed

@@ -97,7 +97,7 @@
         cursor: not-allowed;
       }
-      @media (pointer: coarse) {
+      @media (--touch) {
         transition: scale 0.1s linear;
         &:active {

package/src/Component/CookieConsent/cookie-consent.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * CookieConsent
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   mx-cookie-consent {
@@ -11,6 +12,8 @@
 @layer design-system.components {
   /* @public --cookie-consent-background --cookie-consent-foreground --cookie-consent-shadow --cookie-consent-z-index --cookie-consent-line-width --cookie-consent-line-colour */
   .mx-cookie-consent {
+    @add-mixin transition;
     position: fixed;
     inset-block-end: 0;
     inset-inline: 0;

package/src/Component/Dialog/dialog.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Dialog
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   mx-dialog {
@@ -10,6 +11,8 @@
 @layer design-system.components {
   .mx-dialog {
+    @add-mixin transition;
     inline-size: min(100%, var(--container-max-width));
     max-block-size: 90vh;
     overflow: auto hidden;
@@ -18,12 +21,12 @@
     border: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     padding: 0;
     place-self: center;
-    opacity: 0;
     transform: translateY(100%);
     &::backdrop {
+      @add-mixin transition;
       background-color: hsl(0deg 0% 100% / 75%);
-      opacity: 0;
     }
     &[open] {

package/src/Component/GlobalAlert/global-alert.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Messages
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   mx-closable-alert {
@@ -11,6 +12,8 @@
 @layer design-system.components {
   /* @public --alert-background --alert-foreground --alert-scheme */
   .mx-global-alert {
+    @add-mixin transition;
     background-color: var(--alert-background, var(--colour-primary-light));
     color: var(--alert-foreground, var(--colour-foreground));
     color-scheme: var(--alert-scheme, light);

package/src/Component/Navigation/_navigation-collapsible.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Collapsible Navigation
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.components {
   .mx-nav--collapsible {
@@ -55,7 +56,8 @@
     }
     & li > ul {
-      opacity: 1;
+      @add-mixin transition;
       display: grid;
       @starting-style {

package/src/Component/Navigation/_navigation-dropdown.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Dropdown Navigation
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.components {
   .mx-nav--dropdown {
@@ -44,8 +45,9 @@
     }
     & li > ul {
+      @add-mixin transition;
       display: grid;
-      opacity: 1;
       @starting-style {
         opacity: 0;

package/src/Component/Popover/popover.css CHANGED Viewed

@@ -3,6 +3,7 @@
  *
  * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   mx-popover {
@@ -20,8 +21,9 @@
   /* @public --popover-padding --popover-background --popover-foreground --popover-radius --popover-width */
   :where(.mx-popover) {
+    @add-mixin transition;
     display: none;
-    opacity: 0;
     position: absolute;
     padding: var(--popover-padding, var(--spacing-xs));
     background-color: var(--popover-background, var(--colour-background));

package/src/Component/Tabs/tabs.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Tabs
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.defaults {
   mx-tabs {
@@ -46,6 +47,7 @@
       background-color: var(--tab-background, var(--background, var(--colour-background)));
       color: var(--tab-foreground, var(--foreground, var(--colour-foreground)));
       font-size: var(--tab-font-size, var(--font-size-xs));
+      cursor: pointer;
       &[aria-selected="true"] {
         background-color: var(--tab-active-background, var(--colour-background-alt));
@@ -57,12 +59,9 @@
   }
   .mx-tabs__panel {
-    inline-size: 100%;
-    opacity: 1;
+    @add-mixin transition;
-    @starting-style {
-      opacity: 0;
-    }
+    inline-size: 100%;
     &[inert] {
       opacity: 0;

package/src/Form/form.css CHANGED Viewed

@@ -9,7 +9,8 @@
     max-inline-size: var(--container-max-width);
     &:has([required]) :is(.mx-label, .mx-legend) {
-      &:is(::after, .mx-required) {
+      &::after,
+      & > .mx-required {
         color: var(--colour-error);
       }
     }
@@ -171,6 +172,7 @@
       background-color: transparent;
       border: 0;
       flex-grow: 1;
+      inline-size: 100%;
       &:focus-visible {
         outline: none;
@@ -217,7 +219,7 @@
     border-radius: var(--border-radius);
     font-size: 1rem;
-    @media (pointer: coarse) {
+    @media (--touch) {
       --control-size: 2rem;
     }
@@ -284,7 +286,7 @@
     border-radius: 50%;
     font-size: 1rem;
-    @media (pointer: coarse) {
+    @media (--touch) {
       --control-size: 2rem;
     }

package/src/Layout/Grid/Grid.stories.ts CHANGED Viewed

@@ -54,6 +54,7 @@ const meta: Meta<GridType> = {
     chromatic: {
       modes: {
         mobile: modes["xs"],
+        ipad: modes["md"],
         desktop: modes["xl"],
       },
     },

package/src/Layout/Grid/Grid.stories.tsx CHANGED Viewed

@@ -102,6 +102,32 @@ export const Container: Story = {
     ],
   },
 }
+/**
+ * Uses the experimental CSS Grid Lanes `display: grid-lanes` to pack items
+ * into the shortest column (masonry/waterfall), instead of the default
+ * row-by-row grid. Falls back to the regular auto-fit grid in browsers
+ * without support.
+ * @see https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/
+ */
+export const Masonry: Story = {
+  args: {
+    className: "mx-grid--masonry",
+    children: [
+      { value: "Short item" },
+      {
+        value:
+          "A taller item with more content, showing how Grid Lanes packs items into the shortest column instead of a fixed row height.",
+      },
+      { value: "Medium length item with a little more text than the short one." },
+      { value: "Short" },
+      {
+        value: "Another tall item demonstrating the waterfall packing behaviour of CSS Grid Lanes.",
+      },
+      { value: "Tiny" },
+    ],
+  },
+}
 export const List: Story = {
   render: ({ children, ...args }) => (
     <Component wrapper as={SectionTypes.LIST} {...args}>

package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap CHANGED Viewed

@@ -9,3 +9,5 @@ exports[`Dynamic 1`] = `"<div class="mx-grid"><div class="">1</div><div class=""
 exports[`Fixed 1`] = `"<div class="mx-grid mx-grid--cols-md-3"><div class="mx-grid-item__span-md-2">1</div><div class="">2</div></div>"`;
 exports[`List 1`] = `"<ul class="mx-grid mx-grid--cols-md-3"><li class="mx-grid-item__span-md-2">1</li><li class="">2</li></ul>"`;
+exports[`Masonry 1`] = `"<div class="mx-grid mx-grid--masonry"><div class="">Short item</div><div class="">A taller item with more content, showing how Grid Lanes packs items into the shortest column instead of a fixed row height.</div><div class="">Medium length item with a little more text than the short one.</div><div class="">Short</div><div class="">Another tall item demonstrating the waterfall packing behaviour of CSS Grid Lanes.</div><div class="">Tiny</div></div>"`;

package/src/Layout/Grid/grid.css CHANGED Viewed

@@ -103,6 +103,18 @@
   .mx-grid--collapse-rows {
     row-gap: 0;
   }
+  /**
+   * Experimental: CSS Grid Lanes masonry (waterfall). Falls back to the
+   * standard auto-fit/auto-fill grid above until browser support lands.
+   * https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/
+   */
+  .mx-grid--masonry {
+    @supports (display: grid-lanes) {
+      display: grid-lanes;
+      grid-template-rows: none;
+    }
+  }
 }
 /**

package/src/Layout/Header/_header.css CHANGED Viewed

@@ -5,15 +5,17 @@
 @layer design-system.layouts {
   .mx-header__inner {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: minmax(var(--brand-logo-width, 120px), 1fr) auto;
     align-items: center;
+    gap: var(--header-gap, var(--spacing-xxxs));
   }
   .mx-header__brand {
     display: flex;
-    gap: var(--brand-gap, var(--gap));
+    gap: var(--brand-gap, var(--spacing-xxxs) var(--gap));
     align-items: center;
     margin-inline-end: auto;
+    flex-wrap: wrap;
   }
   .mx-header__name {

package/src/Layout/Header/_toggles.css CHANGED Viewed

@@ -1,6 +1,7 @@
 /**
  * Global Header
  */
+@import "../../Utility/_mixins.css";
 @layer design-system.layouts {
   .mx-header__toggles {
@@ -9,6 +10,7 @@
     padding-inline-end: 2px;
     position: relative;
     z-index: var(--toggle-index, 3);
+    align-self: var(--toggle-align, start);
     @media (--global-nav-up) {
       display: none;
@@ -24,8 +26,9 @@
   }
   .mx-header__collapse-toggle {
+    @add-mixin transition;
     inline-size: 100%;
-    opacity: 1;
     display: grid;
     position: fixed;
     z-index: var(--collapse-index, 2);

package/src/Utility/_mixins.css CHANGED Viewed

@@ -1,3 +1,6 @@
+/* stylelint-disable no-invalid-position-declaration -- the mixin body is
+   always inlined into a rule, so the declarations do have a parent. */
 @define-mixin sr-only {
   clip-path: inset(50%);
   inline-size: 1px;
@@ -8,6 +11,38 @@
   white-space: nowrap;
 }
+@define-mixin sr-undo {
+  clip-path: none;
+  position: revert !important;
+  margin: revert;
+  block-size: revert;
+  inline-size: revert;
+  overflow: revert;
+  white-space: revert;
+}
+@define-mixin transition {
+  opacity: 1;
+  transition-property: var(
+    --transition-property,
+    opacity,
+    color,
+    background-color,
+    border-color,
+    transform,
+    rotate,
+    display,
+    overlay
+  );
+  transition-duration: var(--transition-duration, 0.5s);
+  transition-timing-function: var(--ease);
+  transition-behavior: allow-discrete;
+  @starting-style {
+    opacity: 0;
+  }
+}
 /**
  * Pseudo-elements that draw something — a masked icon, a radio dot — paint it
  * with background-color, which forced-colors mode flattens to Canvas: the
@@ -22,22 +57,9 @@
  *
  * Add to any rule that paints a glyph via background-color.
  */
-/* stylelint-disable no-invalid-position-declaration -- the mixin body is
-   always inlined into a rule, so the declarations do have a parent. */
 @define-mixin forced-colors-paint {
   @media (--forced-colors) {
     forced-color-adjust: none;
     background-color: var(--forced-colour, CanvasText);
   }
 }
-/* stylelint-enable no-invalid-position-declaration */
-@define-mixin sr-undo {
-  clip-path: none;
-  position: revert !important;
-  margin: revert;
-  block-size: revert;
-  inline-size: revert;
-  overflow: revert;
-  white-space: revert;
-}

package/src/_custom-media.css CHANGED Viewed

@@ -21,8 +21,8 @@
 @custom-media --collapse-card-down (token("breakpoint.xxs") < width < token("breakpoint.collapsedCard"));
 /* Util media queries */
-@custom-media --touch (hover: none);
-@custom-media --mouse (hover);
+@custom-media --touch (pointer: fine);
+@custom-media --mouse (pointer: coarse);
 @custom-media --dark (prefers-color-scheme: dark);
 @custom-media --light (prefers-color-scheme: light);
 @custom-media --use-motion (prefers-reduced-motion: no-preference);

package/src/constants.css CHANGED Viewed

@@ -16,27 +16,17 @@
   initial-value: black;
 }
-@property --colour-primary {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: token("colour.primary.colour");
-}
-@property --colour-accent {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: token("colour.accent.colour");
-}
 @layer design-system.defaults {
   :root {
     /* Brand colors */
+    --colour-primary: token("colour.primary.colour");
     --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
     --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
     --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 20%);
     --colour-primary-dark: color-mix(in oklch, var(--colour-primary), black 40%);
     --colour-primary-darkest: color-mix(in oklch, var(--colour-primary), black 50%);
     --colour-primary-scheme: token("colour.primary.scheme");
+    --colour-accent: token("colour.accent.colour");
     --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
     --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
     --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
@@ -89,7 +79,7 @@
     --font-size: var(--base-font-size);
     --font-size-xs: calc(var(--base-font-size) * pow(var(--type-ratio), -0.5));
     --font-size-s: calc(var(--base-font-size) * pow(var(--type-ratio), -0.25));
-    --font-size-m: 1rem;
+    --font-size-m: var(--base-font-size);
     --font-size-ml: calc(var(--base-font-size) * pow(var(--type-ratio), 0.5));
     --font-size-l: calc(var(--base-font-size) * pow(var(--type-ratio), 1));
     --font-size-xl: calc(var(--base-font-size) * pow(var(--type-ratio), 2));