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

package/src/Form/form.css

@@ -66,14 +66,6 @@
       opacity: var(--disabled-opacity, 0.6);
       cursor: not-allowed;
     }
-
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
-
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
-    }
   }
 
   .mx-input--small {
@@ -123,12 +115,12 @@
       background-color: transparent;
     }
 
-    &:has(.error)::before {
-      background-color: var(--error-foreground, var(--colour-error));
+    &:has(.mx-validate:user-valid)::before {
+      background-color: var(--success-foreground, var(--colour-success));
     }
 
-    &:has(.success)::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));
     }
   }
 }
@@ -153,6 +145,17 @@
       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: transparent;
       border: 0;
@@ -200,6 +203,7 @@
     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;
 
     @media (pointer: coarse) {
       --control-size: 2rem;
@@ -227,14 +231,6 @@
         cursor: not-allowed;
       }
     }
-
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
-
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
-    }
   }
 }
 
@@ -256,6 +252,7 @@
     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;
 
     @media (pointer: coarse) {
       --control-size: 2rem;
@@ -289,14 +286,6 @@
         cursor: not-allowed;
       }
     }
-
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
-
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
-    }
   }
 
   :is(.mx-radio, .mx-checkbox) {
@@ -337,6 +326,96 @@
   }
 }
 
+/**
+ * Choice cards.
+ */
+
+@layer design-system.components {
+  .mx-choice-card {
+    /* @public --choice-padding-block --choice-padding-inline --choice-colour-active */
+    display: block;
+    position: relative;
+    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 0.12s linear,
+      background-color 0.12s linear;
+
+    & label {
+      display: grid;
+      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);
+    }
+
+    & 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 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    color: var(--colour-foreground-alt);
+    margin-block-end: var(--spacing-xxxs);
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      block-size: 1px;
+      background-color: var(--colour-border);
+    }
+  }
+
+  .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);
+  }
+}
+
 /**
  * Select
  */
@@ -534,3 +613,51 @@
     background-color: var(--success-foreground, var(--colour-success));
   }
 }
+
+/**
+ * Validation state
+ *
+ * Two separate hooks, deliberately:
+ *
+ * 1. .mx-validate — opt in to *live* native validation. :user-valid /
+ *    :user-invalid fire on their own as the user types, so without this class
+ *    a control is never coloured automatically (filling in an unmarked field
+ *    doesn't turn it green).
+ *
+ *    Put it on the control itself, or on a .mx-checkbox / .mx-radio /
+ *    .mx-autocomplete wrapper — those three components put `className` and
+ *    Drupal `attributes` on the wrapper, not the input, so the wrapper is the
+ *    only reachable spot. The wrapper half is scoped to those class names on
+ *    purpose: a bare descendant selector would leak, styling checkboxes
+ *    inside any .mx-validate ancestor while leaving text inputs alone.
+ *
+ * 2. [aria-invalid="true"] — an *explicit* error, no opt-in: server-rendered
+ *    (Drupal) or async failures the browser can't see. The consumer has
+ *    already decided the field is wrong, so there's nothing to opt into.
+ *
+ * :user-* is used rather than :valid / :invalid so a blank required field
+ * isn't red on page load.
+ *
+ * Explicit errors are excluded from live success styling so they stay red.
+ */
+
+@layer design-system.atoms {
+  .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));
+  }
+}

package/src/Layout/Grid/grid.css

@@ -4,11 +4,11 @@
 
 @layer design-system.layouts {
   .mx-grid {
-    --grid-repeat: auto-fit;
-    --grid-min: 20ch;
-
     display: grid;
-    grid-template-columns: repeat(var(--grid-repeat), minmax(min(100%, var(--grid-min)), 1fr));
+    grid-template-columns: repeat(
+      var(--grid-repeat, auto-fit),
+      minmax(min(100%, var(--grid-min, 20ch)), 1fr)
+    );
     grid-template-rows: 1fr;
     gap: var(--grid-gap, var(--gap));
 

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

@@ -4,7 +4,7 @@ exports[`No Sidebar 1`] = `
 "
 
 <div class="mx-grid--sidebar">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
   </div>
@@ -15,7 +15,7 @@ exports[`Reverse Large 1`] = `
 "
   
 <div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -30,7 +30,7 @@ exports[`Revserse Medium 1`] = `
 "
   
 <div class="mx-grid--sidebar mx-grid--sidebar-rev">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -45,7 +45,7 @@ exports[`Sidebar 1`] = `
 "
   
 <div class="mx-grid--sidebar">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -64,7 +64,7 @@ exports[`Sidebar First 1`] = `
       Sidebar content
     </aside>
   
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
   </div>

package/src/Layout/Sidebar/sidebar.css

@@ -20,6 +20,7 @@
 
       & > aside {
         flex-grow: 1;
+        align-content: start;
 
         @media (--medium-up) {
           max-inline-size: var(--sidebar-width, 24ch);

package/src/Layout/Sidebar/sidebar.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set sidebarAttributes = (sidebarAttributes ?? create_attribute()).addClass('mx-vertical-flow-grid') %}
-{% set contentAttributes = (contentAttributes ?? create_attribute()).addClass('js-content', 'mx-vertical-flow-grid') %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()).addClass('js-content', 'mx-vertical-flow-grid', 'gap--xl') %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}

package/src/Utility/_layout-utils.css

@@ -12,6 +12,14 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
   .place--center {
     place-content: center;
   }

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;
@@ -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] {

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

@@ -45,11 +45,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 +150,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,11 @@ 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 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/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/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/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/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};