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

package/src/Utility/print.css

@@ -40,7 +40,6 @@
   *,
   *::before,
   *::after {
-    background: var(--colour-background);
     color: var(--colour-foreground);
     box-shadow: none;
     text-shadow: none;
@@ -64,8 +63,7 @@
     .mx-accordions__toggle-all,
     .mx-hero-banner__aside-image,
     .mx-card__media,
-    .mx-results-bar__sort,
-    .mx-icon
+    .mx-results-bar__sort
   ) {
     display: none;
   }
@@ -79,6 +77,10 @@
     display: none;
   }
 
+  /**
+   * Override grid layouts and add spacing.
+   */
+
   :is(
     .mx-grid,
     .mx-page,
@@ -108,6 +110,18 @@
     padding-block: var(--spacing-uul) 0;
   }
 
+  .mx-vertical-flow-grid > *:not(:first-child) {
+    margin-block-start: var(--gap);
+  }
+
+  :is(mx-accordion, .mx-carousel__scrollable li, .mx-tabs__panel):not(:first-child) {
+    margin-block-start: var(--spacing-m);
+  }
+
+  /**
+   * Add dividers to separate header, hero, sidebar and footer content.
+   */
+
   .mx-header {
     border-block-end: 2px solid currentcolor;
   }
@@ -140,23 +154,9 @@
     }
   }
 
-  .mx-nav--breadcrumbs {
-    & ul {
-      gap: 0;
-    }
-
-    & li:not(:last-child)::after {
-      content: "/";
-      mask: unset;
-      margin-inline: 1ch;
-      inline-size: unset;
-    }
-  }
-
-  .mx-footer__aoc {
-    padding-block-end: unset;
-    font-size: var(--font-size-s);
-  }
+  /**
+   * Page breaks and typography.
+   */
 
   :is(pre, blockquote, tr, img, p, li, .mx-hero-banner) {
     break-inside: avoid;
@@ -203,6 +203,34 @@
     }
   }
 
+  /**
+   * General style fixes.
+   */
+
+  .mx-icon {
+    /* mask-image in print is treated the same background-image and is invisible, so we override it. */
+    print-color-adjust: exact;
+  }
+
+  .mx-nav--breadcrumbs {
+    & ul {
+      gap: 0;
+    }
+
+    /* Forward slash separator for breadcrumbs */
+    & li:not(:last-child)::after {
+      content: "/";
+      mask: unset;
+      margin-inline: 1ch;
+      inline-size: unset;
+    }
+  }
+
+  .mx-footer__aoc {
+    padding-block-end: unset;
+    font-size: var(--font-size-s);
+  }
+
   .mx-rich-text {
     max-inline-size: unset;
   }
@@ -216,6 +244,7 @@
   }
 
   :is(.mx-card--block a) {
+    /* Show card links */
     & .sr-only:only-child {
       clip-path: unset;
       inline-size: unset;
@@ -232,7 +261,7 @@
     }
   }
 
-  .mx-card--block:has(a .sr-only:only-child) a {
+  .mx-card--block:has(a[aria-label]) a:not(:has(.mx-icon)) {
     margin-block-start: unset;
   }
 
@@ -253,14 +282,6 @@
     border: unset;
   }
 
-  .mx-vertical-flow-grid > *:not(:first-child) {
-    margin-block-start: var(--gap);
-  }
-
-  :is(mx-accordion, .mx-carousel__scrollable li, .mx-tabs__panel):not(:first-child) {
-    margin-block-start: var(--spacing-m);
-  }
-
   .mx-accordion {
     &.mx-accordion--divided {
       border-block-end: unset;
@@ -312,6 +333,7 @@
   }
 
   .mx-video {
+    /* Show video url */
     &::after {
       content: "Video: " attr(data-title) " (" attr(data-src) ")";
       display: block;

package/src/Utility/utilities.css

@@ -5,12 +5,12 @@
   .hidden,
   .visually-hidden,
   .sr-only {
-    @mixin sr-only;
+    @add-mixin sr-only;
   }
 
   .visually-hidden.visually-hidden--focussable:focus,
   .sr-only.sr-only--focussable:focus {
-    @mixin sr-undo;
+    @add-mixin sr-undo;
   }
 
   [hidden] {
@@ -91,3 +91,23 @@
     opacity: var(--opacity-low);
   }
 }
+
+/**
+ * Pending/busy state. Any element with `aria-busy="true"` gets a trailing
+ * spinner automatically - no per-component markup or class required, so any
+ * component can adopt a pending state just by reflecting `aria-busy`. Reuses
+ * the shared `spin` keyframe from Atom/_animated.css (see `.mx-animated--spin`).
+ */
+@layer design-system.utilities {
+  [aria-busy="true"]::after {
+    content: "";
+    display: inline-block;
+    align-self: center;
+    inline-size: var(--spinner-size, var(--spacing-xs));
+    block-size: var(--spinner-size, var(--spacing-xs));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-primary));
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+}

package/src/_custom-media.css

@@ -33,3 +33,4 @@
 @custom-media --low-contrast (prefers-contrast: less);
 @custom-media --portrait (orientation: portrait);
 @custom-media --landscape (orientation: landscape);
+@custom-media --forced-colors (forced-colors: active);

package/src/constants.css

@@ -16,17 +16,27 @@
   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%);

package/src/enums.ts

@@ -5,6 +5,11 @@
  */
 export const EMPTY_ARRAY: never[] = []
 
+/**
+ * Shared debounce timer.
+ */
+export const DEBOUNCE_MS = 400
+
 export enum Alignment {
   LEFT = "left",
   RIGHT = "right",
@@ -45,11 +50,20 @@ export enum TextStyles {
   S = "mx-text--s",
   XS = "mx-text--xs",
   LEDE = "mx-text--lede",
+  META = "mx-text--meta",
   PRIMARY = "mx-text--primary",
   ACCENT = "mx-text--accent",
   ALT = "mx-text--alt",
 }
 
+export enum ListStyles {
+  NOTES = "mx-list--notes",
+  REFS = "mx-list--refs",
+  STATS = "mx-list--stats",
+  COLUMNS = "mx-list--columns",
+  SUMMARY = "mx-list--summary",
+}
+
 export enum Icons {
   ARROW_DOWN = "arrow-down",
   ARROW_LEFT = "arrow-left",
@@ -141,6 +155,14 @@ export enum FormStatus {
   INVALID = "invalid",
 }
 
+export enum TagVariants {
+  INFO = "info",
+  SUCCESS = "success",
+  WARNING = "warning",
+  ERROR = "error",
+  FEATURED = "featured",
+}
+
 export enum TabStyles {
   DEFAULT = "default",
   CENTERED = "centered",

package/src/react.ts

@@ -40,6 +40,7 @@ export { default as FormItem } from "./Form/FormItem/FormItem"
 export { default as FormTitle } from "./Form/Form/FormTitle"
 export { default as Form } from "./Form/Form/Form"
 export { default as Icon } from "./Atom/Icon/Icon"
+export { default as List } from "./Atom/List/List"
 export { default as Grid } from "./Layout/Grid/Grid"
 export { default as Page } from "./Layout/Page/Page"
 export { default as HeroBanner } from "./Component/HeroBanner/HeroBanner"
@@ -87,8 +88,12 @@ export { default as SideNavigationTree } from "./Component/SideNavigation/Compon
 export { default as CookieConsent } from "./Component/CookieConsent/CookieConsent"
 export { default as Gallery } from "./Component/Gallery/Gallery"
 export { default as GalleryTrigger } from "./Component/Gallery/Components/GalleryTrigger"
+export { default as ProgressIndicator } from "./Component/ProgressIndicator/ProgressIndicator"
 export { default as FormSearch } from "./Form/Search/FormSearch"
 export { default as Autocomplete } from "./Form/Autocomplete/Autocomplete"
+export { default as CheckboxCard } from "./Form/CheckboxCard/CheckboxCard"
+export { default as RadioCard } from "./Form/RadioCard/RadioCard"
+export { default as OneTimeCode } from "./Form/OneTimeCode/OneTimeCode"
 export { default as Masthead } from "./Layout/Masthead/Masthead"
 export { default as Sidebar } from "./Layout/Sidebar/Sidebar"
 export { default as Footer } from "./Layout/Footer/Footer"

package/tools/lint-classnames.mjs

@@ -73,7 +73,7 @@ function collect() {
   const usages = [] // { className, file, line } | { prefix, suffix, file, line, raw }
 
   // postcss-mixins can generate whole class families at build time (e.g.
-  // `@mixin icon chevron-left;` -> `.mx-icon--chevron-left`) that never
+  // `@add-mixin icon chevron-left;` -> `.mx-icon--chevron-left`) that never
   // appear as literal selector text — collect templates + invocations across
   // ALL css files first (a definition and its invocations can live in
   // different files) and synthesize the resulting classes before the normal

package/tools/test-utils/screen-reader.ts

@@ -0,0 +1,33 @@
+import { virtual } from "@guidepup/virtual-screen-reader"
+
+const MAX_STEPS = 200
+const END_OF_DOCUMENT = "end of document"
+
+/**
+ * Steps a virtual screen reader through the whole page (Storybook renders one
+ * story per page, so `document.body` scopes exactly to the story under test)
+ * until it announces "end of document", returning the full spoken-phrase log.
+ *
+ * Always stops the screen reader, even if a step throws, so play functions
+ * stay isolated per this repo's "leave the DOM as you found it" convention.
+ */
+export const runScreenReaderWalkthrough = async (): Promise<string[]> => {
+  await virtual.start({ container: document.body })
+
+  try {
+    let steps = 0
+    while ((await virtual.lastSpokenPhrase()) !== END_OF_DOCUMENT) {
+      if (steps >= MAX_STEPS) {
+        throw new Error(
+          `Screen reader walkthrough exceeded ${MAX_STEPS} steps without reaching "${END_OF_DOCUMENT}".`,
+        )
+      }
+      await virtual.next()
+      steps += 1
+    }
+
+    return await virtual.spokenPhraseLog()
+  } finally {
+    await virtual.stop()
+  }
+}

package/dist/build/chunks/DropMenu-Co9jZZ4S.js

@@ -1 +0,0 @@
-import{t as e}from"./Popover-De_CQqcd.js";var t=class extends e{controller;closeOnClick;constructor(){super(),this.controller=new AbortController}async connectedCallback(){if(await super.connectedCallback(),!this.container||!this.trigger)return;this.closeOnClick=this.hasAttribute(`closeonclick`);let{signal:e}=this.controller;document.addEventListener(`click`,e=>{let t=e.target,n=t.closest(`a, button`);t!==this.container&&![...this.items].includes(n)||(this.handleSelect(e),e.preventDefault())},{signal:e}),document.addEventListener(`keydown`,e=>{let{target:t,key:n}=e;if(!(t!==this.container&&![...this.items].includes(t)))switch(n){case`Enter`:e.preventDefault(),this.handleSelect(e);break;case`ArrowDown`:case`ArrowRight`:e.preventDefault(),this.moveFocus(t,1);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),this.moveFocus(t,-1)}},{signal:e})}disconnectedCallback(){this.controller.abort()}handleSelect=e=>{let t=e.target;this.items?.forEach(e=>{e instanceof HTMLButtonElement&&e.setAttribute(`aria-checked`,String(e===t))});let n=new CustomEvent(`drop-menu-select`,{bubbles:!0,cancelable:!0,detail:{event:e,target:t}});this.container.dispatchEvent(n),this.closeOnClick&&this.container.togglePopover()};moveFocus=(e,t)=>{let n=[...this.items],r=n.indexOf(e);if(r===-1)return;let i=r;for(let e=0;e<n.length&&(i=(i+t+n.length)%n.length,n[i].getAttribute(`tabindex`)===`-1`);e+=1);n[i]?.focus()};get items(){return this.container.querySelectorAll(`a, button`)}};customElements.get(`mx-dropmenu`)||customElements.define(`mx-dropmenu`,t);export{t};

package/dist/build/chunks/Gallery-BT3cxS5m.js

@@ -1 +0,0 @@
-import{n as e}from"./cookie-compliance-Bbm-0vpj.js";import{t}from"./utilities-C5dAO2YA.js";import{t as n}from"./Dialog-Ds8gzhri.js";var r=class extends HTMLElement{internals_;controller;debounced;loop;paginationType;activePage;itemMap;iO;rO;mO;ioTimeout;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.track)return;this.buttons&&(this.buttons.hidden=!1),this.activePage=0,this.track.scrollLeft=0,this.debounced=null,this.loop=this.hasAttribute(`loop`);let{signal:e}=this.controller;this.prev&&(this.prev.disabled=!0,this.prev.addEventListener(`click`,()=>this.handleNavigation(this.activePage-1),{signal:e})),this.next&&this.next.addEventListener(`click`,()=>this.handleNavigation(this.activePage+1),{signal:e}),this.track.addEventListener(`scroll`,this.handleScroll,{signal:e}),this.pagination&&(this.paginationType=this.pagination.getAttribute(`data-pagination`),this.pagination.addEventListener(`click`,this.handlePagination,{signal:e})),Array.from(this.track.children).forEach((e,t)=>{e.setAttribute(`data-index`,String(t))});let t=this.track.querySelectorAll(`[data-index]`);this.itemMap=new Map,this.iO=new IntersectionObserver(e=>{e.forEach(({target:e,intersectionRatio:t})=>{let n=e;t>.5?(n.removeAttribute(`inert`),n.setAttribute(`aria-hidden`,`false`),this.itemMap.set(n,!0)):(n.setAttribute(`inert`,``),n.setAttribute(`aria-hidden`,`true`),this.itemMap.set(n,!1))})},{root:this.track,threshold:.5}),t.forEach(e=>this.iO.observe(e)),this.rO=new ResizeObserver(e=>{e.forEach(()=>this.handleOverflow())}),this.rO.observe(this.track),this.mO=new MutationObserver(e=>{e.forEach(()=>this.handleOverflow())}),this.mO.observe(this.track,{childList:!0})}disconnectedCallback(){this.controller.abort(),this.mO.disconnect(),this.iO.disconnect(),this.rO.disconnect(),clearTimeout(this.debounced),clearTimeout(this.ioTimeout)}handleNavigation=(e,t=`arrow`)=>{let n=e>this.activePage,r=this.loop&&this.next.hasAttribute(`data-restart`);if(e===0||r&&n&&t===`arrow`){this.activePage=0,this.items[0].scrollIntoView({inline:`start`,block:`nearest`}),this.next.removeAttribute(`data-restart`);return}this.activePage=e,this.items[this.visibleCount*e].scrollIntoView({inline:`start`,block:`nearest`}),r&&!n&&this.next.removeAttribute(`data-restart`);let i=new CustomEvent(`carousel-slide`,{bubbles:!0,cancelable:!0,detail:{page:this.activePage,type:t}});this.dispatchEvent(i)};handleDisabled=()=>{let e=!1;if(this.prev&&(this.prev.disabled=this.track.scrollLeft<200),(this.next||this.pagination)&&(e=Math.round(this.track.scrollLeft)>=Math.round(this.track.scrollWidth-this.track.offsetWidth)),this.next&&(this.loop?e&&this.next.setAttribute(`data-restart`,``):this.next.disabled=e),this.pagination){let t=Math.round(this.track.offsetLeft+this.track.scrollLeft);if(e)this.activePage=this.pageStartItems.length-1;else{let e=0,n=1/0;this.pageStartItems.forEach((r,i)=>{let a=Math.abs(Math.round(r.offsetLeft)-t);a<n&&(n=a,e=i)}),this.activePage=e}this.pagination.querySelectorAll(`button`).forEach(e=>{let t=e.getAttribute(`data-index`);if(!t)return;let n=parseInt(t,10)===this.activePage;e.disabled=n,n?e.setAttribute(`aria-current`,`page`):e.removeAttribute(`aria-current`)})}};handleScroll=()=>{clearTimeout(this.debounced),this.debounced=setTimeout(this.handleDisabled,this.pagination?100:200)};handleOverflow=()=>{let{scrollWidth:e,clientWidth:t}=this.track,n=e>t;this.track.classList.toggle(`overflowing`,n),n?(this.pagination&&(this.ioTimeout=setTimeout(this.buildPagination,200)),this.track.setAttribute(`tabindex`,`0`)):this.track.removeAttribute(`tabindex`)};buildPagination=()=>{if(!this.pagination.hidden){let e=this.pagination.querySelectorAll(`button`);if(e.length===this.pageStartItems.length)return;e.forEach(e=>e.remove())}let e=Array.from({length:this.pageStartItems.length}).fill(null);if(e.length<=0)return;e.forEach((n,r)=>{let i=r+1,a=t(`<button type="button" data-index="${r}" aria-label="Page ${i}">${i}</button>`);this.pagination.append(a),e[r]=a});let n=e[0];n.disabled=!0,n.setAttribute(`aria-current`,`page`),this.pagination.hidden=!1};handlePagination=t=>{let n=t.target.getAttribute(`data-index`);if(!n||!e.integer(n,0))return;let r=parseInt(n,10);this.handleNavigation(r,`pagination`)};get track(){let e=this.querySelector(`[data-track]`);if(!e)throw Error(`${this.localName} must contain an element with [data-track].`);return e}get buttons(){return this.querySelector(`[data-buttons]`)}get prev(){return this.buttons?.querySelector(`.mx-carousel__prev`)}get next(){return this.buttons?.querySelector(`.mx-carousel__next`)}get pagination(){return this.querySelector(`[data-pagination]`)}get items(){return[...this.itemMap.keys()]}get visibleCount(){return[...this.itemMap.values()].filter(e=>e).length}get pageStartItems(){return[...this.items].filter((e,t)=>t%this.visibleCount===0)}};customElements.get(`mx-carousel`)||customElements.define(`mx-carousel`,r);var i=class extends n{connectedCallback(){if(super.connectedCallback(),!this.dialog)return;let{signal:e}=this.controller;this.openBtns?.forEach(t=>t.addEventListener(`click`,()=>this.scrollToTrigger(t),{signal:e}))}scrollToTrigger=e=>{let t=e.dataset.galleryIndex??`0`,n=this.carousel?.track?.querySelector(`[data-index="${t}"]`);n&&(n.removeAttribute(`inert`),n.scrollIntoView({inline:`start`,block:`nearest`}))};get carousel(){return this.querySelector(`mx-carousel`)}};customElements.get(`mx-gallery`)||customElements.define(`mx-gallery`,i);export{r as n,i as t};

package/dist/build/chunks/GlobalToggle-DQHho97V.js

@@ -1 +0,0 @@
-import{t as e}from"./disclosure-widget-BETzOHLO.js";import"./utilities-C5dAO2YA.js";import{createFocusTrap as t}from"focus-trap";var n=class extends HTMLElement{internals_;controller;widget;focusTrap;controls;mq;triggerText;isOpen=!1;closeIconClass=`mx-icon--close`;menuIconClass=`mx-icon--menu`;searchIconClass=`mx-icon--search`;backgroundClass=`mx-background--primary`;scrollLockClass=`body--scroll-lock`;isSearch;hideOther=!0;otherTrigger;rafId;focusTrapTimeout;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.mq=this.getAttribute(`mq`)||`(max-width: 720px)`}connectedCallback(){if(!this.trigger||!this.target)return;this.trigger.getAttribute(`hideOther`)===`false`&&(this.hideOther=!1),this.isSearch=this.controls.includes(`search`),this.otherTrigger=document.querySelector(this.isSearch?`.${this.menuIconClass}`:`.${this.searchIconClass}`),this.widget=new e(this.trigger,this.target),this.widget.init(),this.focusTrap=t(this.target,{escapeDeactivates:!1,setReturnFocus:this.trigger,allowOutsideClick:!0,onActivate:()=>document.body.classList.add(this.scrollLockClass),onDeactivate:()=>document.body.classList.remove(this.scrollLockClass),checkCanFocusTrap:([e])=>new Promise(t=>{this.focusTrapTimeout=setTimeout(()=>{this.rafId&&=(cancelAnimationFrame(this.rafId),null),t()},2e3);let n=()=>{getComputedStyle(e).visibility===`hidden`?this.rafId=requestAnimationFrame(n):(this.focusTrapTimeout&&=(clearTimeout(this.focusTrapTimeout),null),this.rafId=null,t())};this.rafId=requestAnimationFrame(n)})});let{signal:n}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener(`change`,this.handleBreakpoint,{signal:n}),document.addEventListener(`keydown`,this.handleKeyDown,{signal:n})}disconnectedCallback(){this.widget.detach(),this.controller.abort(),this.rafId&&=(cancelAnimationFrame(this.rafId),null),this.focusTrapTimeout&&=(clearTimeout(this.focusTrapTimeout),null),this.focusTrap.deactivate(),document.body.classList.remove(this.scrollLockClass)}handleBreakpoint=({matches:e})=>{if(!this.trigger)return;let{signal:t}=this.controller;e?(this.widget.attach(),this.target.setAttribute(`inert`,``),this.trigger.addEventListener(`disclosure-toggle`,this.handleDisclosure,{signal:t})):(this.widget.detach(),this.target.removeAttribute(`inert`),document.body.classList.remove(this.scrollLockClass),this.trigger.removeEventListener(`disclosure-toggle`,this.handleDisclosure),this.focusTrap.deactivate())};handleDisclosure=async({detail:e})=>{let{isOpen:t}=e,n=t?`Open`:`Close`,r=t?`Close`:`Open`;if(this.trigger.textContent=this.triggerText.replace(n,r),t)try{await this.focusTrap.activate()}catch{}else this.focusTrap.deactivate();t&&this.hideOther&&this.otherTrigger&&this.otherTrigger.getAttribute(`aria-expanded`)===`true`&&this.otherTrigger.click(),this.trigger.classList.toggle(this.isSearch?this.searchIconClass:this.menuIconClass),this.trigger.classList.toggle(this.closeIconClass),this.target.classList.toggle(this.backgroundClass),this.trigger.removeAttribute(`no-focus`),this.isOpen=t};handleKeyDown=e=>{this.isOpen&&e.key===`Escape`&&this.widget.handleToggle()};get trigger(){let e=this.querySelector(`:scope > button`),t=e.getAttribute(`aria-controls`);if(!e||!t)throw Error(`${this.localName} must contain a <button aria-controls="element-to-trigger"> element.`);return e.removeAttribute(`disabled`),this.controls=t,this.triggerText=e.textContent,e}get target(){let e=document.querySelector(`div[id="${this.controls}"]`);if(!e)throw Error(`${this.localName} must contain a target <div id="${this.controls}">.`);return e.classList.remove(`global-nav-up-only`),e}get breakpoint(){return window.matchMedia(this.mq)}};customElements.get(`mx-global-toggle`)||customElements.define(`mx-global-toggle`,n);export{n as t};

package/dist/build/chunks/InPageNavigation-CzR_KZaz.js

@@ -1 +0,0 @@
-import{s as e,t}from"./utilities-C5dAO2YA.js";var n=class extends HTMLElement{internals_;controller;headingLevels;title;titleClass=`is-excluded mx-heading--m`;items;active;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.headingLevels=this.dataset?.levels||`h2`,this.title=this.dataset?.title||`On this page`,this.items=[]}connectedCallback(){if(!this.menu||!this.headings)return;if(this.links.length)this.links.forEach(e=>{let t=this.container.querySelector(e.hash);t&&this.items.push({link:e,heading:t})});else{let e=t(`<h2 class="${this.titleClass}">${this.title}</h2>`);this.nav.insertBefore(e,this.menu),this.headings.forEach(e=>{let t=this.generateListItem(e),n=this.generateAnchor(e);this.items.push({link:n,heading:e}),t.appendChild(n),this.menu?.appendChild(t)})}let{signal:e}=this.controller;this.menu.addEventListener(`click`,e=>{let{target:t}=e;t instanceof HTMLAnchorElement&&this.handleClick(t)},{signal:e})}disconnectedCallback(){!this.menu||!this.headings||(this.menu.textContent=``,this.items=[],this.controller.abort())}handleClick=e=>{this.active=this.items.find(t=>t.link===e),!(!this.links||!this.active)&&(this.links.forEach(e=>e.classList.remove(`is-active`)),this.active.link.classList.add(`is-active`))};get menu(){let e=this.querySelector(`ul, ol`);if(e)return e;if(!this.nav)throw Error(`${this.localName} must contain a <nav> element.`);if(this.items?.length===0&&this.headings?.length===0)return null;let t=document.createElement(`ul`);return this.nav.appendChild(t),t}get nav(){return this.querySelector(`nav`)}get container(){let e=this.getAttribute(`data-content`);if(!e)throw Error(`${this.localName} must have a [data-content] attribute that contains the content selector.`);return this.closest(e)||this.parentElement.querySelector(e)||document.querySelector(e)}get headings(){return this.container?.querySelectorAll(`:is(${this.headingLevels}):not(.is-excluded)`)}get links(){return this.menu?.querySelectorAll(`a`)}generatedId(t){let n=t?.textContent?.trim();return n?e(n):``}generateAnchor(e){let{textContent:n,id:r}=e,i=e.getAttribute(`data-in-page-navigation-title`)||n,a=r||this.generatedId(e);return r||(e.id=a),t(`<a href="#${a}"><span class="mx-icon mx-icon--chevron-right"></span><span>${i}</span></a>`)}generateListItem(e){let{tagName:n}=e;return t(`<li class="mx-in-page-navigation__level--${n.toLowerCase()}"></li>`)}};customElements.get(`mx-in-page-navigation`)||customElements.define(`mx-in-page-navigation`,n);export{n as t};

package/dist/build/chunks/Navigation-B9Wug-ok.js

@@ -1 +0,0 @@
-import{t as e}from"./disclosure-widget-BETzOHLO.js";import{s as t}from"./utilities-C5dAO2YA.js";var n=class{constructor(){window.Mixtape=window.Mixtape||{},window.Mixtape.Popups=window.Mixtape.Popups||[],window.Mixtape.Menu=window.Mixtape.Menu||{}}attachPopup=(e,t)=>{window.Mixtape.Popups.push({id:e,closefn:t})};detachPopup=e=>{window.Mixtape.Popups=window.Mixtape.Popups.filter(t=>t.id!==e)};attachMenu=(e,t)=>{window.Mixtape.Menu={context:e,items:t}};detachMenu=()=>{window.Mixtape.Menu=null};getNextFocusableMenuItem=(e,t=!1)=>t?e===0?window.Mixtape.Menu.items.length-1:e-1:window.Mixtape.Menu.items.length>e+1?e+1:0;moveFocus=(e,t=!1)=>{if(!window.Mixtape.Menu.items)return;let n=0;window.Mixtape.Menu.items.forEach((t,r)=>{t===e&&(n=r)});let r=this.getNextFocusableMenuItem(n,t),i=window.Mixtape.Menu.items[r].getAttribute(`tabindex`);if(i!==`-1`)window.Mixtape.Menu.items[r].focus();else{for(;i===`-1`;)r=this.getNextFocusableMenuItem(r,t),i=window.Mixtape.Menu.items[r].getAttribute(`tabindex`);window.Mixtape.Menu.items[r].focus()}window.Mixtape.Menu.active=r};handleGlobalClick=({target:e})=>{let t=window.Mixtape.Popups?window.Mixtape.Popups[window.Mixtape.Popups.length-1]:null;if(t&&t.id){let n=document.querySelector(`#${t.id}`).parentElement;if(n&&(e===n||n?.contains(e)))return;t.closefn()}};handleGlobalKeydown=e=>{let t=window.Mixtape.Popups?window.Mixtape.Popups[window.Mixtape.Popups.length-1]:null,n=e.target;switch(e.key){case`Escape`:t&&t.closefn();break;case`ArrowDown`:case`ArrowRight`:window.Mixtape.Menu?.items&&(e.preventDefault(),this.moveFocus(n));break;case`ArrowUp`:case`ArrowLeft`:window.Mixtape.Menu?.items&&(e.preventDefault(),this.moveFocus(n,!0))}};attachEventListeners=e=>{window.addEventListener(`click`,this.handleGlobalClick,{signal:e}),window.addEventListener(`keydown`,this.handleGlobalKeydown,{signal:e})}},r=class extends HTMLElement{internals_;controller;keyboard;subNavs;flyout;edgeCheck;mq;iO;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.flyout=this.hasAttribute(`flyout`)}connectedCallback(){let{signal:r}=this.controller;this.keyboard=new n,this.keyboard.attachEventListeners(r),this.addEventListener(`focusin`,()=>{this.keyboard.attachMenu(this,this.links)}),this.addEventListener(`focusout`,()=>{this.keyboard.detachMenu()}),this.lists.length&&(this.subNavs=new Map,this.lists.forEach((n,r)=>{let i=n.closest(`li`),a=i.querySelector(`:scope > a`),o=t(`subnav-${r}-${a.textContent}`,30),s=i.querySelector(`:scope > button.mx-nav__toggle`);if(i&&a&&s){let t=`list-label-${o}`;a.setAttribute(`id`,t),n.setAttribute(`id`,o),n.setAttribute(`aria-labelledby`,t);let r=new e(s,n);r.init(),this.subNavs.set(o,{item:i,trigger:s,list:n,link:a,widget:r})}}),this.addEventListener(`disclosure-toggle`,this.handleDisclosure),this.flyout&&(this.edgeCheck=this.hasAttribute(`edgeCheck`),this.mq=this.getAttribute(`mq`)||`(min-width: 720px)`,this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener(`change`,this.handleBreakpoint,{signal:r})))}disconnectedCallback(){this.controller.abort(),this.subNavs?.forEach(e=>e.widget.detach()),this.iO?.disconnect()}handleDisclosure=({detail:e})=>{let{isOpen:t,id:n}=e,{item:r}=this.subNavs.get(n);r.classList.toggle(`mx-nav--open`),t?this.keyboard.attachPopup(n,this.handleCloseAny):this.keyboard.detachPopup(n)};handleCloseAny=()=>{this.subNavs?.forEach(({widget:e})=>{e&&e.isOpen&&e.handleToggle()})};handleFlyout=e=>{let t=e.target.closest(`li`);if(!t)return;let n=t.querySelector(`:scope > ul`);n&&this.subNavs?.forEach(({widget:e,list:t})=>{e&&(e.isOpen&&e.handleToggle(),t.id===n.id&&e.handleToggle())})};handleBreakpoint=({matches:e})=>{let{signal:t}=this.controller;e?(this.addEventListener(`mouseover`,this.handleFlyout,{signal:t}),this.addEventListener(`mouseleave`,this.handleCloseAny,{signal:t}),this.edgeCheck&&this.handleEdgeCheck()):(this.removeEventListener(`mouseover`,this.handleFlyout),this.removeEventListener(`mouseleave`,this.handleCloseAny))};handleEdgeCheck(){let e=window.innerWidth;this.iO=new IntersectionObserver((t,n)=>{t.forEach(({boundingClientRect:t,target:r})=>{e<t.right&&r.classList.add(`mx-nav--reverse`),n.unobserve(r)})}),this.subNavs?.forEach(({list:e})=>{this.iO.observe(e),e.querySelectorAll(`ul`)?.forEach(e=>this.iO.observe(e))})}get links(){let e=this.querySelectorAll(`a`);if(!e.length)throw Error(`${this.localName} must links`);return e}get lists(){return this.querySelectorAll(`li > ul`)}get breakpoint(){return window.matchMedia(this.mq)}};customElements.get(`mx-nav`)||customElements.define(`mx-nav`,r);export{n,r as t};

package/dist/build/chunks/Popover-De_CQqcd.js

@@ -1 +0,0 @@
-var e=class extends HTMLElement{internals_;polyfills;constructor(){super(),this.internals_=this.attachInternals()}async connectedCallback(){if(!(!this.container||!this.trigger)&&(!(`anchorName`in document.documentElement.style)||!(`popover`in HTMLElement.prototype))){let{default:e}=await import(`./polyfills-Dokbkxxk.js`);this.polyfills=new e(this.container)}}disconnectedCallback(){this.polyfills?.destroy()}get container(){let e=this.querySelector(`[popover]`);if(!e)throw Error(`${this.localName} must contain a <div popover> element.`);return e}get trigger(){let e=this.querySelector(`[popovertarget=${this.container?.id}]`);if(!e)throw Error(`${this.localName} must contain a <button popovertarget="${this.container.id}">`);return e}};customElements.get(`mx-popover`)||customElements.define(`mx-popover`,e);export{e as t};

package/dist/build/chunks/Sticky-Kyjykb36.js

@@ -1 +0,0 @@
-import{t as e}from"./utilities-C5dAO2YA.js";var t=class extends HTMLElement{internals_;iO;rO;offsetPropName;root=null;rootMargin=`0px 0px 0px 0px`;thresholds=[0];constructor(){super(),this.internals_=this.attachInternals()}connectedCallback(){this.offsetPropName=this.getAttribute(`offsetpropname`);let e={root:this.root,rootMargin:this.rootMargin,thresholds:this.thresholds};this.iO=new IntersectionObserver(([{boundingClientRect:t}])=>{let n=t.y<0;this.classList.toggle(`is-stuck`,n);let r=new CustomEvent(`sticky-toggle`,{bubbles:!0,cancelable:!0,detail:{isSticky:n,options:e,target:this}});this.dispatchEvent(r)},e),this.iO.observe(this.trigger),this.offsetPropName&&(this.rO=new ResizeObserver(e=>{e.forEach(({borderBoxSize:e})=>{let[{blockSize:t}]=e;document.body.style.setProperty(this.offsetPropName,`${t.toFixed(1)}px`)})}),this.rO.observe(this))}disconnectedCallback(){this.iO.disconnect(),this.rO?.disconnect()}get trigger(){let t=this.querySelector(`.mx-sticky__trigger`);return t||(t=e(`<div class="mx-sticky__trigger"></div>`),this.insertAdjacentElement(`beforebegin`,t)),t}};customElements.get(`mx-sticky`)||customElements.define(`mx-sticky`,t);export{t};

package/dist/build/chunks/Tabs-Dm8g301e.js

@@ -1,15 +0,0 @@
-import{s as e,t}from"./utilities-C5dAO2YA.js";import{t as n}from"./DropMenu-Co9jZZ4S.js";import{PopoverPlacementModifier as r}from"@pnx-mixtape/ids-shape";var i=class extends HTMLElement{internals_;controller;tabs;mq;locationHash;tabFocus=0;tabListClasses;dropTriggerClasses;dropMenuId;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.mq=this.getAttribute(`mq`)||`(max-width: 720px)`}connectedCallback(){if(!this.panels)return;this.locationHash=window.location.hash,this.tabFocus=0,this.tabs=new Map,this.panels.forEach(e=>{let n=e.id,r=`<button type="button" role="tab" aria-controls="${n}" aria-selected="false">${e.getAttribute(`aria-label`)}</button>`,i=t(r);this.tabList.appendChild(i);let a=t(r);this.dropMenuMenu.appendChild(a),n&&e&&a&&this.tabs.set(n,{panel:e,tab:i,button:a})});let{signal:e}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener(`change`,this.handleBreakpoint,{signal:e});let n=this.locationHash?this.querySelector(this.locationHash):null;n?this.active=n.id:this.active||=this.panels[0].id}disconnectedCallback(){this.controller.abort()}handleBreakpoint=({matches:e})=>{let{signal:t}=this.controller;this.dropMenuTrigger.toggleAttribute(`hidden`,!e),this.tabList.toggleAttribute(`hidden`,e),e?(this.dropMenuMenu.addEventListener(`drop-menu-select`,this.handleDropMenuSelect,{signal:t}),this.tabList.removeEventListener(`click`,this.handleClick),this.tabList.removeEventListener(`keydown`,this.handleKeydown)):(this.tabList.addEventListener(`click`,this.handleClick,{signal:t}),this.tabList.addEventListener(`keydown`,this.handleKeydown,{signal:t}),this.dropMenuMenu.removeEventListener(`drop-menu-select`,this.handleDropMenuSelect))};handleKeydown=e=>{let{key:t,target:n}=e,r=[...this.triggers],i=r.indexOf(n);if(i===-1)return;let a=0;switch(t){case`ArrowRight`:a=(i+1)%r.length;break;case`ArrowLeft`:a=(i-1+r.length)%r.length;break;case`Home`:a=0;break;case`End`:a=r.length-1;break;default:return}e.preventDefault(),e.stopPropagation(),r[a].focus()};handleClick=e=>{let t=e.target;if(!(t instanceof HTMLButtonElement))return;e.preventDefault();let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleDropMenuSelect=e=>{let t=e.detail.target;if(!(t instanceof HTMLButtonElement))return;let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleTabChange=e=>{this.active=e,this.handleUrlParams(e);let{panel:t,tab:n,button:r}=this.tabs.get(e);t.focus({preventScroll:!0});let i=new CustomEvent(`tab-toggle`,{bubbles:!0,cancelable:!0,detail:{id:e,tab:n,button:r,panel:t}});this.dispatchEvent(i)};get dropMenu(){let i=this.querySelector(`mx-dropmenu`);if(i)return i;this.dropTriggerClasses=this.getAttribute(`dropTriggerClasses`)||`mx-button mx-icon mx-icon--chevron-down mx-icon--end`,this.dropMenuId=this.id||e(`tab-drop-menu`);let a=`${this.dropMenuId}-target`,o=new n;o.setAttribute(`closeOnClick`,`true`);let s=t(`<button
-                  id="${a}"
-                  class="mx-popover__trigger ${this.dropTriggerClasses}"
-                  popovertarget="${this.dropMenuId}"
-                  style="anchor-name: --${this.dropMenuId}"
-                  hidden
-              ></button>`),c=t(`<div
-                  class="mx-popover mx-drop-menu"
-                  id="${this.dropMenuId}"
-                  aria-describedby="${a}"
-                  style="position-anchor: --${this.dropMenuId}"
-                  data-placement="${r.BOTTOM_START}"
-                  popover
-                  role="tablist"
-              ></div>`);return o.append(s,c),this.prepend(o),o}get dropMenuMenu(){return this.dropMenu.querySelector(`[popover][role="tablist"]`)}get dropMenuTrigger(){return this.dropMenu.querySelector(`[popovertarget]`)}get tabList(){this.tabListClasses=this.getAttribute(`tabListClasses`)||`mx-tabs__list`;let e=this.querySelector(`[role="tablist"]:not([popover])`);if(e)return e;let n=t(`<div class="${this.tabListClasses}" role="tablist" hidden></div>`);return this.prepend(n),n}get triggers(){let e=this.tabList.querySelectorAll(`[role="tab"]`);if(!e.length)throw Error(`${this.localName} must contain [role="tab"]`);return e}get panels(){let e=this.querySelectorAll(`[data-tab]`);if(!e.length)throw Error(`${this.localName} must contain [data-tab]`);return e.forEach(e=>{e.setAttribute(`role`,`tabpanel`),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-label`,e.getAttribute(`data-tab`))}),e}get active(){return this.querySelector(`[aria-selected="true"]`)}get breakpoint(){return window.matchMedia(this.mq)}set active(e){this.tabs.forEach(({tab:t,panel:n},r)=>{r===e?(t.setAttribute(`aria-selected`,`true`),t.setAttribute(`tabindex`,`0`),n.removeAttribute(`inert`),this.dropMenuTrigger.textContent=t.textContent):(t.setAttribute(`aria-selected`,`false`),t.setAttribute(`tabindex`,`-1`),n.setAttribute(`inert`,``))})}handleUrlParams=e=>{let t=new URLSearchParams(window.location.search);t.get(`tab`)!==e&&(t.set(`tab`,e),window.history.replaceState({},``,`${window.location.pathname}?${t.toString()}`))}};customElements.get(`mx-tabs`)||customElements.define(`mx-tabs`,i);export{i as t};

package/dist/build/chunks/disclosure-widget-BETzOHLO.js

@@ -1 +0,0 @@
-import{s as e}from"./utilities-C5dAO2YA.js";var t=class{options;context;trigger;element;id;isOpen;attached;constructor(e,t,n,r=document){if(!e)throw Error(`toggle is required.`);if(!t)throw Error(`element is required.`);let i={attribute:`inert`,shouldPreventDefault:!0,setInitialAttribute:!0,clickEvent:`click`};this.options={...i,...n},this.context=r||document,this.trigger=e,this.element=t,this.id=this.element.id||this.generatedId()}init=()=>{if(Object.prototype.hasOwnProperty.call(this.trigger,`disclosureWidget`))return;let{attribute:e,setInitialAttribute:t}=this.options;this.trigger.disclosureWidget=this,t&&this.element.setAttribute(e,``),this.attach()};handleToggle=()=>{let{attribute:e,setInitialAttribute:t}=this.options;this.element.toggleAttribute(e);let n=this.element.hasAttribute(e);this.isOpen=t?!n:n,this.trigger.setAttribute(`aria-expanded`,String(this.isOpen));let r=new CustomEvent(`disclosure-toggle`,{bubbles:!0,cancelable:!0,detail:{isOpen:this.isOpen,id:this.id,options:this.options,target:this.element}});this.trigger.dispatchEvent(r)};handleMouse=e=>{let{currentTarget:t,type:n,relatedTarget:r}=e;if(n===`mouseover`||n===`mouseout`){let e=this.trigger.parentNode;if(e!==t||e.contains(r))return}else if(this.trigger!==t)return;let{shouldPreventDefault:i}=this.options;this.handleToggle(),i&&(e.preventDefault(),e.stopPropagation())};handleKeyboard=e=>{let{key:t,target:n}=e;if(this.trigger!==n)return;let{isOpen:r}=this,{shouldPreventDefault:i}=this.options;switch(t){case`ArrowDown`:case`Enter`:r||this.handleToggle(),i&&(e.preventDefault(),e.stopPropagation());break;case`ArrowUp`:case`Escape`:r&&this.handleToggle(),i&&(e.preventDefault(),e.stopPropagation())}};attach=()=>{if(this.attached)return;let{clickEvent:e}=this.options;if(e===`mouseover`){let e=this.trigger.parentNode;e.addEventListener(`mouseover`,this.handleMouse),e.addEventListener(`mouseout`,this.handleMouse)}else this.trigger.addEventListener(`click`,this.handleMouse);this.trigger.addEventListener(`keydown`,this.handleKeyboard),this.trigger.setAttribute(`aria-expanded`,`false`),this.trigger.hasAttribute(`aria-controls`)||this.trigger.setAttribute(`aria-controls`,this.id),this.attached=!0};detach=()=>{if(!this.attached)return;this.isOpen&&this.handleToggle();let{clickEvent:e}=this.options;if(e===`mouseover`){let e=this.trigger.parentNode;e.removeEventListener(`mouseover`,this.handleMouse),e.removeEventListener(`mouseout`,this.handleMouse)}else this.trigger.removeEventListener(`click`,this.handleMouse);this.trigger.removeEventListener(`keydown`,this.handleKeyboard),this.trigger.removeAttribute(`aria-expanded`),this.attached=!1};generatedId=()=>{let t=this.trigger?.textContent?.trim();return t?e(t):``}};export{t};

package/dist/build/chunks/polyfills-Dokbkxxk.js

@@ -1 +0,0 @@
-var e,t=class{constructor(e){this.popover=e,this.trigger=document.querySelector(`[popovertarget="${e.getAttribute(`id`)}"]`),this.init()}init=async()=>{!this.trigger||!this.popover||(this.supportsPopover()||await this.ensurePopoverPolyfill(),this.supportsAnchor()||(this.controller=new AbortController,this.popover.addEventListener(`toggle`,this.positionPopover,{signal:this.controller.signal})))};supportsAnchor=()=>`anchorName`in document.documentElement.style;supportsPopover=()=>`popover`in HTMLElement.prototype;ensurePopoverPolyfill=()=>(e||=import(`@oddbird/popover-polyfill`),e);positionPopover=async({newState:e})=>{if(e===`open`){let{computePosition:e,flip:t,shift:n}=await import(`@floating-ui/dom`);requestAnimationFrame(()=>{e(this.trigger,this.popover,{placement:this.placement||`top`,middleware:[t({padding:10}),n({padding:10})]}).then(({x:e,y:t})=>{this.popover.style.insetInlineStart=`${e}px`,this.popover.style.insetBlockStart=`${t}px`})})}};destroy(){this.controller.abort()}get placement(){return this.popover.getAttribute(`data-placement`)}};export{t as default};

package/dist/build/chunks/utilities-C5dAO2YA.js

@@ -1 +0,0 @@
-import{n as e}from"./cookie-compliance-Bbm-0vpj.js";var t=(t,n=20)=>{if(!e.notEmpty(t))return``;let r=t.toLowerCase().trim().replace(/\s+/g,`-`).replace(/[^-a-z0-9]/g,``).replace(/[\n\r]+|[\s]{2,}/g,``);return[...[,,,,,,].keys()].forEach(()=>{r.charAt(0).match(/[a-z]/g)||(r=r.substring(1))}),e.integer(n,1)&&(r=r.substring(0,n)),r},n=t=>e.notEmpty(t)?t.trim().replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(e,t)=>+e==0?``:t===0?e.toLowerCase():e.toUpperCase()).replace(/[^\w\s]/gi,``):``,r=(e,t)=>{if(typeof e!=`string`||!e||!Array.isArray(t))return!1;try{let{hostname:n}=new URL(e);return window.location.hostname===n||t.includes(n)}catch{return!1}},i=e=>{try{return new DOMParser().parseFromString(e,`text/html`).body.firstElementChild}catch{return null}},a=(e,t=!1,n=!1)=>{let r=new ResizeObserver(i=>{i.forEach(({contentBoxSize:i,borderBoxSize:a})=>{let[{inlineSize:o,blockSize:s}]=n?i:a;e.style.setProperty(`--inline-size`,`${o.toFixed(1)}px`),e.style.setProperty(`--block-size`,`${s.toFixed(1)}px`),t&&r.unobserve(e)})});r.observe(e)},o=(e,t,n,r=[])=>{let{target:i,clientY:a,clientX:o}=e,s=i instanceof HTMLOptionElement||i instanceof HTMLSelectElement;if((r?.filter(e=>e===i||e.contains(i))).length||s)return;let c=new IntersectionObserver(([{boundingClientRect:e}])=>{let{top:t,height:r,width:i,left:s}=e;t<=a&&a<=t+r&&s<=o&&o<=s+i||n(),c.disconnect()});c.observe(t)},s=(e,t)=>{let{key:n}=e;n===`Escape`&&t()},c=(e,t)=>{if(Object.hasOwn(window,`Drupal`)&&Object.hasOwn(Drupal,`behaviors`)){Drupal.behaviors[t]={attach:e};return}window.addEventListener(`DOMContentLoaded`,e.bind(document,document))};export{r as a,n as c,o as i,a as n,c as o,s as r,t as s,i as t};