@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/dist/build/sticky.css

@@ -1,47 +1 @@
-/**
- * Sticky
- */
-
-@layer design-system.defaults {
-  mx-sticky {
-    display: block;
-  }
-}
-
-@layer design-system.components {
-  .sticky {
-    position: sticky;
-    inset-block-start: 0;
-    inset-block-start: var(--sticky-offset, 0);
-    z-index: 1;
-    z-index: var(--z-index, 1);
-  }
-    @media (min-width: 720px) {
-
-  .sticky--m {
-      position: sticky;
-      inset-block-start: 0;
-      inset-block-start: var(--sticky-offset, 0);
-      z-index: 1;
-      z-index: var(--z-index, 1);
-  }
-    }
-    @media (min-width: 946px) {
-
-  .sticky--l {
-      position: sticky;
-      inset-block-start: 0;
-      inset-block-start: var(--sticky-offset, 0);
-      z-index: 1;
-      z-index: var(--z-index, 1);
-  }
-    }
-
-  .sticky__trigger {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-  }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0aWNreS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBUUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtFQUNFO0lBWkEsZ0JBQWdCO0lBQ2hCLG9CQUEwQztJQUExQywwQ0FBMEM7SUFDMUMsVUFBMEI7SUFBMUIsMEJBQTBCO0VBWTFCO0lBR0U7O0VBREY7TUFoQkEsZ0JBQWdCO01BQ2hCLG9CQUEwQztNQUExQywwQ0FBMEM7TUFDMUMsVUFBMEI7TUFBMUIsMEJBQTBCO0VBa0IxQjtJQURFO0lBSUE7O0VBREY7TUF0QkEsZ0JBQWdCO01BQ2hCLG9CQUEwQztNQUExQywwQ0FBMEM7TUFDMUMsVUFBMEI7TUFBMUIsMEJBQTBCO0VBd0IxQjtJQURFOztFQUdGO0lBQ0Usa0JBQWtCO0lBQ2xCLGdCQUFnQjtJQUNoQixlQUFlO0VBQ2pCO0FBQ0YiLCJmaWxlIjoic3RpY2t5LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3RpY2t5XG4gKi9cblxuQGRlZmluZS1taXhpbiBzdGlja3kge1xuICBwb3NpdGlvbjogc3RpY2t5O1xuICBpbnNldC1ibG9jay1zdGFydDogdmFyKC0tc3RpY2t5LW9mZnNldCwgMCk7XG4gIHotaW5kZXg6IHZhcigtLXotaW5kZXgsIDEpO1xufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIG14LXN0aWNreSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5zdGlja3kge1xuICAgIEBtaXhpbiBzdGlja3k7XG4gIH1cblxuICAuc3RpY2t5LS1tIHtcbiAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICBAbWl4aW4gc3RpY2t5O1xuICAgIH1cbiAgfVxuXG4gIC5zdGlja3ktLWwge1xuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgQG1peGluIHN0aWNreTtcbiAgICB9XG4gIH1cblxuICAuc3RpY2t5X190cmlnZ2VyIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgaW5saW5lLXNpemU6IDFweDtcbiAgICBibG9jay1zaXplOiAxcHg7XG4gIH1cbn1cbiJdfQ== */
+@layer design-system.defaults{mx-sticky{display:block}}@layer design-system.components{.sticky{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}@media (min-width: 720px){.sticky--m{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}}@media (min-width: 946px){.sticky--l{position:sticky;inset-block-start:0;inset-block-start:var(--sticky-offset, 0);z-index:1;z-index:var(--z-index, 1)}}.sticky__trigger{position:absolute;inline-size:1px;block-size:1px}}

package/dist/build/sticky.entry.js

@@ -1,60 +1 @@
-import { c as createElement } from "./chunks/utilities-B4YZb689.js";
-class Sticky extends HTMLElement {
-  constructor() {
-    super();
-    this.root = null;
-    this.rootMargin = "0px 0px 0px 0px";
-    this.thresholds = [0];
-    this.internals_ = this.attachInternals();
-  }
-  connectedCallback() {
-    this.offsetPropName = this.getAttribute("offsetpropname");
-    const options = {
-      root: this.root,
-      rootMargin: this.rootMargin,
-      thresholds: this.thresholds
-    };
-    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {
-      const isSticky = boundingClientRect.y < 0;
-      this.classList.toggle("is-stuck", isSticky);
-      const newEvent = new CustomEvent("sticky-toggle", {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          isSticky,
-          options,
-          target: this
-        }
-      });
-      this.dispatchEvent(newEvent);
-    }, options);
-    this.iO.observe(this.trigger);
-    if (!this.offsetPropName) return;
-    this.rO = new ResizeObserver((entries) => {
-      entries.forEach(({ borderBoxSize }) => {
-        const [{ blockSize }] = borderBoxSize;
-        document.body.style.setProperty(
-          this.offsetPropName,
-          `${blockSize.toFixed(1)}px`
-        );
-      });
-    });
-    this.rO.observe(this);
-  }
-  disconnectedCallback() {
-    this.iO.unobserve(this.trigger);
-    this.rO.disconnect();
-  }
-  get trigger() {
-    let trigger = this.querySelector(".sticky__trigger");
-    if (!trigger) {
-      trigger = createElement(
-        '<div class="sticky__trigger"></div>'
-      );
-      this.insertAdjacentElement("beforebegin", trigger);
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-sticky", Sticky);
-//# sourceMappingURL=sticky.entry.js.map
+import{c as t}from"./chunks/utilities-CE6xwgqF.js";class e extends HTMLElement{constructor(){super(),this.root=null,this.rootMargin="0px 0px 0px 0px",this.thresholds=[0],this.internals_=this.attachInternals()}connectedCallback(){this.offsetPropName=this.getAttribute("offsetpropname");const t={root:this.root,rootMargin:this.rootMargin,thresholds:this.thresholds};this.iO=new IntersectionObserver((([{boundingClientRect:e}])=>{const s=e.y<0;this.classList.toggle("is-stuck",s);const i=new CustomEvent("sticky-toggle",{bubbles:!0,cancelable:!0,detail:{isSticky:s,options:t,target:this}});this.dispatchEvent(i)}),t),this.iO.observe(this.trigger),this.offsetPropName&&(this.rO=new ResizeObserver((t=>{t.forEach((({borderBoxSize:t})=>{const[{blockSize:e}]=t;document.body.style.setProperty(this.offsetPropName,`${e.toFixed(1)}px`)}))})),this.rO.observe(this))}disconnectedCallback(){this.iO.unobserve(this.trigger),this.rO.disconnect()}get trigger(){let e=this.querySelector(".sticky__trigger");return e||(e=t('<div class="sticky__trigger"></div>'),this.insertAdjacentElement("beforebegin",e)),e}}customElements.define("mx-sticky",e);

package/dist/build/tabs.css

@@ -1,109 +1 @@
-/**
- * Tabs
- */
-
-@layer design-system.defaults {
-  :is(mx-tabs, mx-tabs mx-dropmenu) {
-    display: block;
-  }
-}
-
-@layer design-system.components {
-  .mx-tabs {
-    position: relative;
-  }
-
-    .mx-tabs:where(:not(:first-child)) {
-      margin-block-start: var(--flow-gap, var(--gap));
-    }
-      @media (min-width: 720px) {
-
-    .mx-tabs .mx-tabs__list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-xxs);
-    }
-      }
-
-      .mx-tabs .mx-tabs__list button {
-        border: 0;
-        display: block;
-        font-family: inherit;
-        outline-offset: var(--outline-offset);
-        min-inline-size: 0;
-        min-inline-size: var(--tab-min-width, 0);
-        padding-block: var(--vertical-padding, var(--spacing-xxs));
-        padding-inline: var(--horizontal-padding, var(--spacing-m));
-        background-color: var(
-          --tab-background,
-          var(--background, var(--colour-background))
-        );
-        color: var(
-          --tab-foreground,
-          var(--foreground, var(--colour-foreground))
-        );
-      }
-
-        .mx-tabs .mx-tabs__list button[aria-selected="true"] {
-          background-color: var(
-            --tab-active-background,
-            var(--colour-background-alt)
-          );
-          color: var(--tab-active-foreground, var(--colour-foreground));
-        }
-
-    .mx-tabs .mx-tabs__panel {
-      inline-size: 100%;
-    }
-
-      .mx-tabs .mx-tabs__panel:is(:focus-visible, :focus) {
-        outline-offset: var(--outline-offset);
-      }
-
-      .mx-tabs .mx-tabs__panel[inert] {
-        display: none;
-      }
-      @media (min-width: 720px) {
-        .mx-tabs.mx-tabs--lined .mx-tabs__list {
-          border-block-end: 1px solid
-            var(--line-colour, var(--colour-border));
-          border-block-end: var(--line-width, 1px) solid
-            var(--line-colour, var(--colour-border));
-        }
-
-          .mx-tabs.mx-tabs--lined .mx-tabs__list button {
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-            border: 1px solid
-              var(--line-colour, var(--colour-border));
-            border: var(--line-width, 1px) solid
-              var(--line-colour, var(--colour-border));
-            border-block-end: 0;
-          }
-      }
-      @media (min-width: 720px) {
-        .mx-tabs.mx-tabs--centered .mx-tabs__list {
-          align-content: center;
-          justify-content: center;
-          place-content: center;
-        }
-      }
-
-    .mx-tabs.mx-tabs--same-height {
-      display: grid;
-    }
-
-      .mx-tabs.mx-tabs--same-height .mx-tabs__panel {
-        grid-column-start: 1;
-        grid-row-start: 2;
-        z-index: 2;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-        .mx-tabs.mx-tabs--same-height .mx-tabs__panel[inert] {
-          display: block;
-          opacity: 0;
-          z-index: 1;
-        }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxjQUFjO0VBQ2hCO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLGtCQUFrQjtFQTRGcEI7O0lBMUZFO01BQ0UsK0NBQStDO0lBQ2pEO01BR0U7O0lBREY7UUFFSSxhQUFhO1FBQ2IsZUFBZTtRQUNmLHVCQUF1QjtJQTRCM0I7TUEzQkU7O01BRUE7UUFDRSxTQUFTO1FBQ1QsY0FBYztRQUNkLG9CQUFvQjtRQUNwQixxQ0FBcUM7UUFDckMsa0JBQXdDO1FBQXhDLHdDQUF3QztRQUN4QywwREFBMEQ7UUFDMUQsMkRBQTJEO1FBQzNEOzs7U0FHQztRQUNEOzs7U0FHQztNQVNIOztRQVBFO1VBQ0U7OztXQUdDO1VBQ0QsNkRBQTZEO1FBQy9EOztJQUlKO01BQ0UsaUJBQWlCO0lBU25COztNQVBFO1FBQ0UscUNBQXFDO01BQ3ZDOztNQUVBO1FBQ0UsYUFBYTtNQUNmO01BSUE7UUFDRTtVQUNFO29EQUMwQztVQUQxQztvREFDMEM7UUFRNUM7O1VBTkU7WUFDRSw0REFBNEQ7WUFDNUQ7c0RBQzBDO1lBRDFDO3NEQUMwQztZQUMxQyxtQkFBbUI7VUFDckI7TUFFSjtNQUlBO1FBQ0U7VUFDRSxxQkFBcUI7VUFBckIsdUJBQXFCO1VBQXJCLHFCQUFxQjtRQUN2QjtNQUNGOztJQUdGO01BQ0UsYUFBYTtJQWNmOztNQVpFO1FBQ0Usb0JBQW9CO1FBQ3BCLGlCQUFpQjtRQUNqQixVQUFVO1FBQ1Ysb0NBQW9DO01BT3RDOztRQUxFO1VBQ0UsY0FBYztVQUNkLFVBQVU7VUFDVixVQUFVO1FBQ1o7QUFJUiIsImZpbGUiOiJ0YWJzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGFic1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgOmlzKG14LXRhYnMsIG14LXRhYnMgbXgtZHJvcG1lbnUpIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXRhYnMge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICY6d2hlcmUoOm5vdCg6Zmlyc3QtY2hpbGQpKSB7XG4gICAgICBtYXJnaW4tYmxvY2stc3RhcnQ6IHZhcigtLWZsb3ctZ2FwLCB2YXIoLS1nYXApKTtcbiAgICB9XG5cbiAgICAmIC5teC10YWJzX19saXN0IHtcbiAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleC13cmFwOiB3cmFwO1xuICAgICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICAgIH1cblxuICAgICAgJiBidXR0b24ge1xuICAgICAgICBib3JkZXI6IDA7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgICAgb3V0bGluZS1vZmZzZXQ6IHZhcigtLW91dGxpbmUtb2Zmc2V0KTtcbiAgICAgICAgbWluLWlubGluZS1zaXplOiB2YXIoLS10YWItbWluLXdpZHRoLCAwKTtcbiAgICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcihcbiAgICAgICAgICAtLXRhYi1iYWNrZ3JvdW5kLFxuICAgICAgICAgIHZhcigtLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSlcbiAgICAgICAgKTtcbiAgICAgICAgY29sb3I6IHZhcihcbiAgICAgICAgICAtLXRhYi1mb3JlZ3JvdW5kLFxuICAgICAgICAgIHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSlcbiAgICAgICAgKTtcblxuICAgICAgICAmW2FyaWEtc2VsZWN0ZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoXG4gICAgICAgICAgICAtLXRhYi1hY3RpdmUtYmFja2dyb3VuZCxcbiAgICAgICAgICAgIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kLWFsdClcbiAgICAgICAgICApO1xuICAgICAgICAgIGNvbG9yOiB2YXIoLS10YWItYWN0aXZlLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC10YWJzX19wYW5lbCB7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcblxuICAgICAgJjppcyg6Zm9jdXMtdmlzaWJsZSwgOmZvY3VzKSB7XG4gICAgICAgIG91dGxpbmUtb2Zmc2V0OiB2YXIoLS1vdXRsaW5lLW9mZnNldCk7XG4gICAgICB9XG5cbiAgICAgICZbaW5lcnRdIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLm14LXRhYnMtLWxpbmVkIHtcbiAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgJiAubXgtdGFic19fbGlzdCB7XG4gICAgICAgICAgYm9yZGVyLWJsb2NrLWVuZDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcblxuICAgICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpIHZhcigtLWJvcmRlci1yYWRpdXMpIDAgMDtcbiAgICAgICAgICAgIGJvcmRlcjogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICAgICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgICAgICAgICAgYm9yZGVyLWJsb2NrLWVuZDogMDtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLm14LXRhYnMtLWNlbnRlcmVkIHtcbiAgICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgICAgJiAubXgtdGFic19fbGlzdCB7XG4gICAgICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5teC10YWJzLS1zYW1lLWhlaWdodCB7XG4gICAgICBkaXNwbGF5OiBncmlkO1xuXG4gICAgICAmIC5teC10YWJzX19wYW5lbCB7XG4gICAgICAgIGdyaWQtY29sdW1uLXN0YXJ0OiAxO1xuICAgICAgICBncmlkLXJvdy1zdGFydDogMjtcbiAgICAgICAgei1pbmRleDogMjtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjJzIGVhc2UtaW4tb3V0O1xuXG4gICAgICAgICZbaW5lcnRdIHtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ== */
+@layer design-system.defaults{:is(mx-tabs,mx-tabs mx-dropmenu){display:block}}@layer design-system.components{.mx-tabs{position:relative;display:grid;grid-template-areas:"tabs" "panels"}.mx-tabs:where(:not(:first-child)){margin-block-start:var(--flow-gap, var(--gap))}.mx-tabs mx-dropmenu{grid-area:tabs}.mx-tabs .mx-tabs__list{grid-area:tabs}@media (min-width: 720px){.mx-tabs .mx-tabs__list{display:flex;flex-wrap:wrap;gap:var(--spacing-xxs)}}:is(.mx-tabs .mx-tabs__list) button{border:0;display:block;font-family:inherit;min-inline-size:0;min-inline-size:var(--tab-min-width, 0);padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:var(--horizontal-padding, var(--spacing-m));background-color:var( --tab-background, var(--background, var(--colour-background)) );color:var( --tab-foreground, var(--foreground, var(--colour-foreground)) )}[aria-selected=true]:is(:is(.mx-tabs .mx-tabs__list) button){background-color:var( --tab-active-background, var(--colour-background-alt) );color:var(--tab-active-foreground, var(--colour-foreground))}.mx-tabs .mx-tabs__panel{grid-area:panels;inline-size:100%;opacity:1}@starting-style{.mx-tabs .mx-tabs__panel{opacity:0}}[inert]:is(.mx-tabs .mx-tabs__panel){opacity:0;transition-duration:.4s}@media (min-width: 720px){.mx-tabs.mx-tabs--lined .mx-tabs__list{border-block-end:1px solid var(--line-colour, var(--colour-border));border-block-end:var(--line-width, 1px) solid var(--line-colour, var(--colour-border))}:is(.mx-tabs.mx-tabs--lined .mx-tabs__list) button{border-radius:var(--border-radius) var(--border-radius) 0 0;border:1px solid var(--line-colour, var(--colour-border));border:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));border-block-end:0}}@media (min-width: 720px){.mx-tabs.mx-tabs--centered .mx-tabs__list{align-content:center;justify-content:center;place-content:center}}}

package/dist/build/tabs.entry.js

@@ -1,202 +1 @@
-import { D as DropMenu } from "./chunks/drop-menu.entry-BC6x9vst.js";
-import { c as createElement, m as makeAnchor } from "./chunks/utilities-B4YZb689.js";
-class Tabs extends HTMLElement {
-  constructor() {
-    super();
-    this.tabFocus = 0;
-    this.handleBreakpoint = ({
-      matches
-    }) => {
-      const { signal } = this.controller;
-      this.dropMenuTrigger.toggleAttribute("hidden", !matches);
-      this.tabList.toggleAttribute("hidden", matches);
-      if (matches) {
-        this.dropMenuMenu.addEventListener(
-          "drop-menu-select",
-          this.handleDropMenuSelect,
-          { signal }
-        );
-        this.tabList.removeEventListener("click", this.handleClick);
-        this.tabList.removeEventListener("keydown", this.handleKeydown);
-      } else {
-        this.tabList.addEventListener("click", this.handleClick, { signal });
-        this.tabList.addEventListener("keydown", this.handleKeydown, { signal });
-        this.dropMenuMenu.removeEventListener(
-          "drop-menu-select",
-          this.handleDropMenuSelect
-        );
-      }
-    };
-    this.handleKeydown = ({ key }) => {
-      if (key === "ArrowRight" || key === "ArrowLeft") {
-        this.triggers[this.tabFocus].setAttribute("tabindex", "-1");
-        if (key === "ArrowRight") {
-          this.tabFocus += 1;
-          if (this.tabFocus >= this.triggers.length) {
-            this.tabFocus = 0;
-          }
-        } else if (key === "ArrowLeft") {
-          this.tabFocus -= 1;
-          if (this.tabFocus < 0) {
-            this.tabFocus = this.triggers.length - 1;
-          }
-        }
-        this.triggers[this.tabFocus].setAttribute("tabindex", "0");
-        this.triggers[this.tabFocus].focus();
-      }
-    };
-    this.handleClick = (event) => {
-      const target = event.target;
-      if (!(target instanceof HTMLButtonElement)) return;
-      event.preventDefault();
-      const id = target.getAttribute("aria-controls");
-      this.handleTabChange(id);
-    };
-    this.handleDropMenuSelect = (event) => {
-      const target = event.detail.target;
-      if (!(target instanceof HTMLButtonElement)) return;
-      const id = target.getAttribute("aria-controls");
-      this.handleTabChange(id);
-    };
-    this.handleTabChange = (id) => {
-      this.active = id;
-      this.handleUrlParams(id);
-      const { panel, tab, button } = this.tabs.get(id);
-      panel.focus({ preventScroll: true });
-      const newEvent = new CustomEvent("tab-toggle", {
-        bubbles: true,
-        cancelable: true,
-        detail: { id, tab, button, panel }
-      });
-      this.dispatchEvent(newEvent);
-    };
-    this.handleUrlParams = (id) => {
-      const urlParams = new URLSearchParams(
-        window.location.search
-      );
-      if (urlParams.get("tab") === id) return;
-      urlParams.set("tab", id);
-      window.history.replaceState(
-        {},
-        "",
-        `${window.location.pathname}?${urlParams.toString()}`
-      );
-    };
-    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.tabs = /* @__PURE__ */ new Map();
-    this.panels.forEach((panel) => {
-      const id = panel.id;
-      const name = panel.getAttribute("aria-label");
-      const tabTemplate = `<button type="button" role="tab" aria-controls="${id}" aria-selected="false">${name}</button>`;
-      const tab = createElement(tabTemplate);
-      this.tabList.appendChild(tab);
-      const button = createElement(tabTemplate);
-      this.dropMenuMenu.appendChild(button);
-      if (id && panel && button) {
-        this.tabs.set(id, { panel, tab, button });
-      }
-    });
-    const { signal } = this.controller;
-    this.handleBreakpoint(this.breakpoint);
-    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
-      signal
-    });
-    const hashEl = this.locationHash ? this.querySelector(this.locationHash) : null;
-    if (hashEl) {
-      this.active = hashEl.id;
-    } else if (!this.active) {
-      this.active = this.panels[0].id;
-    }
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get dropMenu() {
-    const existingMenu = this.querySelector("mx-dropmenu");
-    if (existingMenu) return existingMenu;
-    this.dropTriggerClasses = this.getAttribute("dropTriggerClasses") || "mx-button mx-icon mx-icon--chevron-down mx-icon--end";
-    this.dropMenuId = this.id || makeAnchor("tab-drop-menu");
-    const name = `${this.dropMenuId}-target`;
-    const tabDropMenu = new DropMenu();
-    tabDropMenu.setAttribute("closeOnClick", "true");
-    const trigger = createElement(`<button
-                  id="${name}"
-                  class="mx-drop-menu__trigger ${this.dropTriggerClasses}"
-                  popovertarget="${this.dropMenuId}"
-                  hidden
-              ></button>`);
-    const menu = createElement(
-      `<div
-                  class="mx-drop-menu"
-                  id="${this.dropMenuId}"
-                  aria-labelledby="${name}"
-                  anchor="${name}"
-                  popover
-                  role="tablist"
-              ></div>`
-    );
-    tabDropMenu.append(trigger, menu);
-    this.prepend(tabDropMenu);
-    return tabDropMenu;
-  }
-  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";
-    const existingTabList = this.querySelector(
-      '[role="tablist"]:not([popover])'
-    );
-    if (existingTabList) return existingTabList;
-    const tabList = createElement(
-      `<div class="${this.tabListClasses}" role="tablist" hidden></div>`
-    );
-    this.prepend(tabList);
-    return tabList;
-  }
-  get triggers() {
-    const triggers = this.tabList.querySelectorAll('[role="tab"]');
-    if (!triggers.length) {
-      throw new Error(`${this.localName} must contain [role="tab"]`);
-    }
-    return triggers;
-  }
-  get panels() {
-    const panels = this.querySelectorAll('[role="tabpanel"]');
-    if (!panels.length) {
-      throw new Error(`${this.localName} must contain [role="tabpanel"]`);
-    }
-    return panels;
-  }
-  get active() {
-    return this.querySelector('[aria-selected="true"]');
-  }
-  get breakpoint() {
-    return window.matchMedia(this.mq);
-  }
-  set active(id) {
-    this.tabs.forEach(({ tab, panel }, key) => {
-      if (key === id) {
-        tab.setAttribute("aria-selected", "true");
-        tab.setAttribute("tab-index", "0");
-        panel.removeAttribute("inert");
-        this.dropMenuTrigger.textContent = tab.textContent;
-      } else {
-        tab.setAttribute("aria-selected", "false");
-        tab.setAttribute("tab-index", "-1");
-        panel.setAttribute("inert", "");
-      }
-    });
-  }
-}
-customElements.define("mx-tabs", Tabs);
-//# sourceMappingURL=tabs.entry.js.map
+import{D as t}from"./chunks/drop-menu.entry-BqBzLfVC.js";import{c as e,m as s}from"./chunks/utilities-CE6xwgqF.js";class i extends HTMLElement{constructor(){super(),this.tabFocus=0,this.handleBreakpoint=({matches:t})=>{const{signal:e}=this.controller;this.dropMenuTrigger.toggleAttribute("hidden",!t),this.tabList.toggleAttribute("hidden",t),t?(this.dropMenuMenu.addEventListener("drop-menu-select",this.handleDropMenuSelect,{signal:e}),this.tabList.removeEventListener("click",this.handleClick),this.tabList.removeEventListener("keydown",this.handleKeydown)):(this.tabList.addEventListener("click",this.handleClick,{signal:e}),this.tabList.addEventListener("keydown",this.handleKeydown,{signal:e}),this.dropMenuMenu.removeEventListener("drop-menu-select",this.handleDropMenuSelect))},this.handleKeydown=({key:t})=>{("ArrowRight"===t||"ArrowLeft"===t)&&(this.triggers[this.tabFocus].setAttribute("tabindex","-1"),"ArrowRight"===t?(this.tabFocus+=1,this.tabFocus>=this.triggers.length&&(this.tabFocus=0)):"ArrowLeft"===t&&(this.tabFocus-=1,this.tabFocus<0&&(this.tabFocus=this.triggers.length-1)),this.triggers[this.tabFocus].setAttribute("tabindex","0"),this.triggers[this.tabFocus].focus())},this.handleClick=t=>{const e=t.target;if(!(e instanceof HTMLButtonElement))return;t.preventDefault();const s=e.getAttribute("aria-controls");this.handleTabChange(s)},this.handleDropMenuSelect=t=>{const e=t.detail.target;if(!(e instanceof HTMLButtonElement))return;const s=e.getAttribute("aria-controls");this.handleTabChange(s)},this.handleTabChange=t=>{this.active=t,this.handleUrlParams(t);const{panel:e,tab:s,button:i}=this.tabs.get(t);e.focus({preventScroll:!0});const n=new CustomEvent("tab-toggle",{bubbles:!0,cancelable:!0,detail:{id:t,tab:s,button:i,panel:e}});this.dispatchEvent(n)},this.handleUrlParams=t=>{const e=new URLSearchParams(window.location.search);e.get("tab")!==t&&(e.set("tab",t),window.history.replaceState({},"",`${window.location.pathname}?${e.toString()}`))},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.tabs=new Map,this.panels.forEach((t=>{const s=t.id,i=`<button type="button" role="tab" aria-controls="${s}" aria-selected="false">${t.getAttribute("aria-label")}</button>`,n=e(i);this.tabList.appendChild(n);const r=e(i);this.dropMenuMenu.appendChild(r),s&&t&&r&&this.tabs.set(s,{panel:t,tab:n,button:r})}));const{signal:t}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener("change",this.handleBreakpoint,{signal:t});const s=this.locationHash?this.querySelector(this.locationHash):null;s?this.active=s.id:this.active||(this.active=this.panels[0].id)}disconnectedCallback(){this.controller.abort()}get dropMenu(){const 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||s("tab-drop-menu");const n=`${this.dropMenuId}-target`,r=new t;r.setAttribute("closeOnClick","true");const a=e(`<button\n                  id="${n}"\n                  class="mx-drop-menu__trigger ${this.dropTriggerClasses}"\n                  popovertarget="${this.dropMenuId}"\n                  hidden\n              ></button>`),o=e(`<div\n                  class="mx-drop-menu"\n                  id="${this.dropMenuId}"\n                  aria-labelledby="${n}"\n                  anchor="${n}"\n                  popover\n                  role="tablist"\n              ></div>`);return r.append(a,o),this.prepend(r),r}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";const t=this.querySelector('[role="tablist"]:not([popover])');if(t)return t;const s=e(`<div class="${this.tabListClasses}" role="tablist" hidden></div>`);return this.prepend(s),s}get triggers(){const t=this.tabList.querySelectorAll('[role="tab"]');if(!t.length)throw new Error(`${this.localName} must contain [role="tab"]`);return t}get panels(){const t=this.querySelectorAll('[role="tabpanel"]');if(!t.length)throw new Error(`${this.localName} must contain [role="tabpanel"]`);return t}get active(){return this.querySelector('[aria-selected="true"]')}get breakpoint(){return window.matchMedia(this.mq)}set active(t){this.tabs.forEach((({tab:e,panel:s},i)=>{i===t?(e.setAttribute("aria-selected","true"),e.setAttribute("tab-index","0"),s.removeAttribute("inert"),this.dropMenuTrigger.textContent=e.textContent):(e.setAttribute("aria-selected","false"),e.setAttribute("tab-index","-1"),s.setAttribute("inert",""))}))}}customElements.define("mx-tabs",i);

package/dist/build/tag.css

@@ -1,71 +1 @@
-/**
- * Tag
- */
-
-@layer design-system.components {
-  .mx-tag {
-    display: inline-block;
-    inline-size: -moz-fit-content;
-    inline-size: fit-content;
-    padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
-    background: var(
-      --tag-background,
-      var(--background, var(--colour-background))
-    );
-    color: var(--tag-foreground, var(--foreground, var(--colour-foreground)));
-    text-transform: uppercase;
-    font-weight: var(--font-weight, var(--font-weight-bold));
-    font-size: var(--tag-font-size, var(--font-size-xs));
-    line-height: 2;
-    line-height: var(--line-height, 2);
-    border-radius: var(--border-radius);
-    border: 1px solid currentcolor;
-    border: var(--line-width, 1px) solid var(--line-colour, currentcolor);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    overflow: hidden;
-  }
-
-    .mx-tag:has(input:focus) {
-      --outline-size: max(0.125rem, 0.15em);
-
-      outline: max(0.125rem, 0.15em)
-        solid currentcolor;
-
-      outline: var(--outline-width, var(--outline-size))
-        var(--outline-style, solid) var(--outline-color, currentcolor);
-      outline-offset: max(0.125rem, 0.15em);
-      outline-offset: var(--outline-offset, var(--outline-size));
-    }
-
-    .mx-tag input {
-      position: absolute;
-      inset-block-start: -100px;
-      inset-inline-start: -100px;
-    }
-
-    .mx-tag label {
-      font-size: inherit;
-      color: inherit;
-      margin: 0;
-    }
-
-    .mx-tag:is(a:hover, :has(input:checked)) {
-      --tag-foreground: var(--link-colour, var(--colour-primary));
-    }
-
-    .mx-tag:empty {
-      display: none;
-    }
-
-  .mx-tags {
-    padding-inline: 0;
-    list-style: none;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    gap: var(--tags-gap, var(--spacing-s));
-  }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLDhEQUE4RDtJQUM5RDs7O0tBR0M7SUFDRCx5RUFBeUU7SUFDekUseUJBQXlCO0lBQ3pCLHdEQUF3RDtJQUN4RCxvREFBb0Q7SUFDcEQsY0FBa0M7SUFBbEMsa0NBQWtDO0lBQ2xDLG1DQUFtQztJQUNuQyw4QkFBcUU7SUFBckUscUVBQXFFO0lBQ3JFLDZCQUFxQjtJQUFyQixxQkFBcUI7SUFDckIsZ0JBQWdCO0VBNkJsQjs7SUEzQkU7TUFDRSxxQ0FBcUM7O01BRXJDOzBCQUNnRTs7TUFEaEU7c0VBQ2dFO01BQ2hFLHFDQUEwRDtNQUExRCwwREFBMEQ7SUFDNUQ7O0lBRUE7TUFDRSxrQkFBa0I7TUFDbEIseUJBQXlCO01BQ3pCLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLGtCQUFrQjtNQUNsQixjQUFjO01BQ2QsU0FBUztJQUNYOztJQUVBO01BQ0UsMkRBQTJEO0lBQzdEOztJQUVBO01BQ0UsYUFBYTtJQUNmOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQixzQ0FBc0M7RUFDeEM7QUFDRiIsImZpbGUiOiJ0YWcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBUYWdcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXRhZyB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4eHMpKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoXG4gICAgICAtLXRhZy1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcigtLXRhZy1mb3JlZ3JvdW5kLCB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpKTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodCwgdmFyKC0tZm9udC13ZWlnaHQtYm9sZCkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tdGFnLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplLXhzKSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LCAyKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIGN1cnJlbnRjb2xvcik7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOmhhcyhpbnB1dDpmb2N1cykge1xuICAgICAgLS1vdXRsaW5lLXNpemU6IG1heCgwLjEyNXJlbSwgMC4xNWVtKTtcblxuICAgICAgb3V0bGluZTogdmFyKC0tb3V0bGluZS13aWR0aCwgdmFyKC0tb3V0bGluZS1zaXplKSlcbiAgICAgICAgdmFyKC0tb3V0bGluZS1zdHlsZSwgc29saWQpIHZhcigtLW91dGxpbmUtY29sb3IsIGN1cnJlbnRjb2xvcik7XG4gICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQsIHZhcigtLW91dGxpbmUtc2l6ZSkpO1xuICAgIH1cblxuICAgICYgaW5wdXQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IC0xMDBweDtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogLTEwMHB4O1xuICAgIH1cblxuICAgICYgbGFiZWwge1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuXG4gICAgJjppcyhhOmhvdmVyLCA6aGFzKGlucHV0OmNoZWNrZWQpKSB7XG4gICAgICAtLXRhZy1mb3JlZ3JvdW5kOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB9XG5cbiAgICAmOmVtcHR5IHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLm14LXRhZ3Mge1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xuICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWZsb3c6IHJvdyB3cmFwO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiB2YXIoLS10YWdzLWdhcCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gIH1cbn1cbiJdfQ== */
+@layer design-system.components{.mx-tag{display:inline-flex;inline-size:-moz-fit-content;inline-size:fit-content;padding-inline:var(--horizontal-padding, var(--spacing-xxxs));background:var( --tag-background, var(--background, var(--colour-background)) );color:var(--tag-foreground, var(--foreground, var(--colour-foreground)));text-transform:uppercase;font-weight:var(--font-weight, var(--font-weight-bold));font-size:var(--tag-font-size, var(--font-size-xs));line-height:2;line-height:var(--line-height, 2);border-radius:var(--border-radius);border:1px solid currentcolor;border:var(--line-width, 1px) solid var(--line-colour, currentcolor);-webkit-text-decoration:none;text-decoration:none;overflow:hidden}.mx-tag:has(input:focus){outline:2px solid currentcolor;outline:var(--outline-size, 2px) var(--outline-style, solid) var(--outline-color, currentcolor);outline-offset:2px;outline-offset:var(--outline-size, 2px)}.mx-tag input{position:absolute;inset-block-start:-100px;inset-inline-start:-100px}.mx-tag label{font-size:inherit;color:inherit;margin:0}.mx-tag:is(a:hover,:has(input:checked)){--tag-foreground: var(--link-colour, var(--colour-primary))}.mx-tag:empty{display:none}.mx-tags{padding-inline:0;list-style:none;display:flex;flex-flow:row wrap;align-items:center;gap:var(--tags-gap, var(--spacing-s));overflow:clip;overflow-clip-margin:var(--spacing-xxxs)}}