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

package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap

@@ -5,14 +5,12 @@ exports[`Light 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -29,14 +27,12 @@ exports[`Masthead 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -53,14 +49,12 @@ exports[`With Links 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -73,16 +67,14 @@ exports[`With Links 1`] = `
   
 <span class="mx-icon mx-icon--user"></span>
 
-  <span>Create account</span>
-    
+  Create account  
 </a>
 
 <a href="#">
   
 <span class="mx-icon mx-icon--login"></span>
 
-  <span>Log in</span>
-    
+  Log in  
 </a>
 
     </nav>

package/src/Layout/Section/__snapshots__/Background.stories.ts.snap

@@ -17,8 +17,7 @@ exports[`Background 1`] = `
           
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -47,8 +46,7 @@ exports[`Dark 1`] = `
           
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

package/src/Layout/Section/__snapshots__/Section.stories.ts.snap

@@ -11,8 +11,7 @@ exports[`Background 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -35,8 +34,7 @@ exports[`Box 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -69,8 +67,7 @@ exports[`Modifiers 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -93,8 +90,7 @@ exports[`Section 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

package/src/Utility/Hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from "react"
+
+// useLayoutEffect warns when it actually runs during server rendering (it's
+// a no-op there) - fall back to useEffect outside the browser so
+// server-rendered/hydrated consumers never see that warning.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect
+
+export default useIsomorphicLayoutEffect

package/src/Utility/_mixins.css

@@ -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;
@@ -17,3 +20,46 @@
   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
+ * shape disappears. Opt the pseudo out and name a real system colour instead.
+ *
+ * currentcolor won't do: it inherits the parent's *computed* colour, and
+ * forcing happens later at used-value time — an opted-out pseudo would paint
+ * the brand colour and still vanish against a dark high-contrast background.
+ *
+ * --forced-colour carries the right system colour down from context; see the
+ * overrides on .mx-button, a[href] and :disabled.
+ *
+ * Add to any rule that paints a glyph via background-color.
+ */
+@define-mixin forced-colors-paint {
+  @media (--forced-colors) {
+    forced-color-adjust: none;
+    background-color: var(--forced-colour, CanvasText);
+  }
+}

package/src/Utility/print.css

@@ -261,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;
   }
 

package/src/Utility/utilities.css

@@ -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

@@ -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);
@@ -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,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));

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",

package/src/react.ts

@@ -93,6 +93,7 @@ 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/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/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/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/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/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};