@pnx-mixtape/mxds 0.0.7 → 0.0.8

package/dist/build/sticky.css

@@ -0,0 +1,47 @@
+/**
+ * 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== */

package/dist/build/sticky.entry.js

@@ -0,0 +1,60 @@
+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

package/dist/build/sticky.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky.entry.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACN;AALmB,SAAA,OAAA;AACY,SAAA,aAAA;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIlC,SAAA,aAAa,KAAK;EACzB;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAId,SAAA,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AACzD,YAAA,WAAoB,mBAAmB,IAAI;AAC5C,WAAA,UAAU,OAAO,YAAY,QAAQ;AACpC,YAAA,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,OAC1B,OAAO;AACL,SAAA,GAAG,QAAQ,KAAK,OAAO;AAGxB,QAAA,CAAC,KAAK,eAAgB;AACrB,SAAA,KAAK,IAAI,eAAe,CAAW,YAAA;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,WAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IAAA,CACF;AACI,SAAA,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AACtB,SAAA,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG;EACV;AAAA,EAEA,IAAI,UAA0B;AACxB,QAAA,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACF,gBAAA;AAAA,QACR;AAAA,MAAA;AAEG,WAAA,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}

package/dist/build/tabs.css

@@ -0,0 +1,109 @@
+/**
+ * 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== */

package/dist/build/tabs.entry.js

@@ -0,0 +1,202 @@
+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

package/dist/build/tabs.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.entry.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  mq: string\n  locationHash?: string\n  tabFocus?: number = 0\n  tabListClasses?: string\n  dropTriggerClasses?: string\n  dropMenuId?: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.panels.forEach((panel: HTMLDivElement): void => {\n      const id: string = panel.id\n      const name: string = panel.getAttribute(\"aria-label\")\n      const tabTemplate = `<button type=\"button\" role=\"tab\" aria-controls=\"${id}\" aria-selected=\"false\">${name}</button>`\n      const tab = createElement(tabTemplate) as HTMLButtonElement\n      this.tabList.appendChild(tab)\n      const button = createElement(tabTemplate) as HTMLButtonElement\n      this.dropMenuMenu.appendChild(button)\n      if (id && panel && button) {\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    this.dropMenuTrigger.toggleAttribute(\"hidden\", !matches)\n    this.tabList.toggleAttribute(\"hidden\", matches)\n    if (matches) {\n      this.dropMenuMenu.addEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n        { signal },\n      )\n      this.tabList.removeEventListener(\"click\", this.handleClick)\n      this.tabList.removeEventListener(\"keydown\", this.handleKeydown)\n    } else {\n      this.tabList.addEventListener(\"click\", this.handleClick, { signal })\n      this.tabList.addEventListener(\"keydown\", this.handleKeydown, { signal })\n      this.dropMenuMenu.removeEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n      )\n    }\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): DropMenu | null {\n    const existingMenu = this.querySelector(\"mx-dropmenu\")\n    if (existingMenu) return existingMenu\n    this.dropTriggerClasses =\n      this.getAttribute(\"dropTriggerClasses\") ||\n      \"mx-button mx-icon mx-icon--chevron-down mx-icon--end\"\n    this.dropMenuId = this.id || makeAnchor(\"tab-drop-menu\")\n    const name = `${this.dropMenuId}-target`\n    const tabDropMenu = new DropMenu()\n    tabDropMenu.setAttribute(\"closeOnClick\", \"true\")\n    const trigger = createElement(`<button\n                  id=\"${name}\"\n                  class=\"mx-drop-menu__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-labelledby=\"${name}\"\n                  anchor=\"${name}\"\n                  popover\n                  role=\"tablist\"\n              ></div>`,\n    )\n    tabDropMenu.append(trigger, menu)\n    this.prepend(tabDropMenu)\n    return tabDropMenu\n  }\n\n  get dropMenuMenu(): HTMLDivElement {\n    return this.dropMenu.querySelector('[popover][role=\"tablist\"]')\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    return this.dropMenu.querySelector(\"[popovertarget]\")\n  }\n\n  get tabList(): HTMLDivElement {\n    this.tabListClasses = this.getAttribute(\"tabListClasses\") || \"mx-tabs__list\"\n    const existingTabList: HTMLDivElement = this.querySelector(\n      '[role=\"tablist\"]:not([popover])',\n    )\n    if (existingTabList) return existingTabList\n    const tabList = createElement(\n      `<div class=\"${this.tabListClasses}\" role=\"tablist\" hidden></div>`,\n    ) as HTMLDivElement\n    this.prepend(tabList)\n    return tabList\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.tabList.querySelectorAll('[role=\"tab\"]')\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain [role=\"tab\"]`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll('[role=\"tabpanel\"]')\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [role=\"tabpanel\"]`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/tag.css

@@ -0,0 +1,67 @@
+/**
+ * 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-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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLDhEQUE4RDtJQUM5RDs7O0tBR0M7SUFDRCx5RUFBeUU7SUFDekUseUJBQXlCO0lBQ3pCLHdEQUF3RDtJQUN4RCxvREFBb0Q7SUFDcEQsY0FBa0M7SUFBbEMsa0NBQWtDO0lBQ2xDLG1DQUFtQztJQUNuQyw4QkFBcUU7SUFBckUscUVBQXFFO0lBQ3JFLDZCQUFxQjtJQUFyQixxQkFBcUI7SUFDckIsZ0JBQWdCO0VBeUJsQjs7SUF2QkU7TUFDRSxxQ0FBcUM7O01BRXJDOzBCQUNnRTs7TUFEaEU7c0VBQ2dFO01BQ2hFLHFDQUEwRDtNQUExRCwwREFBMEQ7SUFDNUQ7O0lBRUE7TUFDRSxrQkFBa0I7TUFDbEIseUJBQXlCO01BQ3pCLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLGtCQUFrQjtNQUNsQixjQUFjO01BQ2QsU0FBUztJQUNYOztJQUVBO01BQ0UsMkRBQTJEO0lBQzdEOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQixzQ0FBc0M7RUFDeEM7QUFDRiIsImZpbGUiOiJ0YWcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBUYWdcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXRhZyB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4eHMpKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoXG4gICAgICAtLXRhZy1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcigtLXRhZy1mb3JlZ3JvdW5kLCB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpKTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodCwgdmFyKC0tZm9udC13ZWlnaHQtYm9sZCkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tdGFnLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplLXhzKSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LCAyKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIGN1cnJlbnRjb2xvcik7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOmhhcyhpbnB1dDpmb2N1cykge1xuICAgICAgLS1vdXRsaW5lLXNpemU6IG1heCgwLjEyNXJlbSwgMC4xNWVtKTtcblxuICAgICAgb3V0bGluZTogdmFyKC0tb3V0bGluZS13aWR0aCwgdmFyKC0tb3V0bGluZS1zaXplKSlcbiAgICAgICAgdmFyKC0tb3V0bGluZS1zdHlsZSwgc29saWQpIHZhcigtLW91dGxpbmUtY29sb3IsIGN1cnJlbnRjb2xvcik7XG4gICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQsIHZhcigtLW91dGxpbmUtc2l6ZSkpO1xuICAgIH1cblxuICAgICYgaW5wdXQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IC0xMDBweDtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogLTEwMHB4O1xuICAgIH1cblxuICAgICYgbGFiZWwge1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuXG4gICAgJjppcyhhOmhvdmVyLCA6aGFzKGlucHV0OmNoZWNrZWQpKSB7XG4gICAgICAtLXRhZy1mb3JlZ3JvdW5kOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB9XG4gIH1cblxuICAubXgtdGFncyB7XG4gICAgcGFkZGluZy1pbmxpbmU6IDA7XG4gICAgbGlzdC1zdHlsZTogbm9uZTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXRhZ3MtZ2FwLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgfVxufVxuIl19 */

package/dist/build/tiles.css

@@ -0,0 +1,61 @@
+/**
+ * Tiles
+ */
+@layer design-system.components {
+  .tile {
+    --outline-offset: -0.125rem;
+    --gap: var(--gap-s);
+
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--border-radius);
+    background: var(--tile-background, var(--colour-background-alt));
+    color: var(--tile-foreground var(--colour-foreground));
+    min-block-size: 160px;
+    min-block-size: var(--height, 160px);
+    transition:
+      0.2s background-color,
+      0.2s background-image,
+      0.2s color,
+      0.2s border-color;
+  }
+
+    .tile:is(.tile--has-link, :has(> a[href])) {
+      cursor: pointer;
+    }
+
+    .tile > a[href] {
+      display: block;
+      text-indent: -10000%;
+      block-size: 100%;
+    }
+
+    .tile .tile__content {
+      padding: var(--spacing-m);
+      position: relative;
+    }
+
+  .tile--medium:root {
+    --height: 15rem;
+  }
+
+  .tile--large:root {
+    --height: 27.0625rem;
+  }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .tile {
+    display: block;
+    background-color: transparent;
+    background-image: none;
+    color: var(--colour-foreground);
+    min-block-size: 0;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTtBQUNGO0VBQ0U7SUFDRSwyQkFBc0I7SUFDdEIsbUJBQW1COztJQUVuQixnQkFBZ0I7SUFDaEIsa0JBQWtCO0lBQ2xCLG1DQUFtQztJQUNuQyxnRUFBZ0U7SUFDaEUsc0RBQXNEO0lBQ3RELHFCQUFvQztJQUFwQyxvQ0FBb0M7SUFDcEM7Ozs7dUJBSW1CO0VBZ0JyQjs7SUFkRTtNQUNFLGVBQWU7SUFDakI7O0lBRUE7TUFDRSxjQUFjO01BQ2Qsb0JBQW9CO01BQ3BCLGdCQUFnQjtJQUNsQjs7SUFFQTtNQUNFLHlCQUF5QjtNQUN6QixrQkFBa0I7SUFDcEI7O0VBR0Y7SUFDRSxlQUFlO0VBQ2pCOztFQUVBO0lBQ0Usb0JBQWU7RUFDakI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsY0FBYztJQUNkLDZCQUE2QjtJQUM3QixzQkFBc0I7SUFDdEIsK0JBQStCO0lBQy9CLGlCQUFpQjtFQUNuQjtBQUNGIiwiZmlsZSI6InRpbGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGlsZXNcbiAqL1xuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC50aWxlIHtcbiAgICAtLW91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuICAgIC0tZ2FwOiB2YXIoLS1nYXAtcyk7XG5cbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS10aWxlLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kLWFsdCkpO1xuICAgIGNvbG9yOiB2YXIoLS10aWxlLWZvcmVncm91bmQgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICBtaW4tYmxvY2stc2l6ZTogdmFyKC0taGVpZ2h0LCAxNjBweCk7XG4gICAgdHJhbnNpdGlvbjpcbiAgICAgIDAuMnMgYmFja2dyb3VuZC1jb2xvcixcbiAgICAgIDAuMnMgYmFja2dyb3VuZC1pbWFnZSxcbiAgICAgIDAuMnMgY29sb3IsXG4gICAgICAwLjJzIGJvcmRlci1jb2xvcjtcblxuICAgICY6aXMoLnRpbGUtLWhhcy1saW5rLCA6aGFzKD4gYVtocmVmXSkpIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG5cbiAgICAmID4gYVtocmVmXSB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtaW5kZW50OiAtMTAwMDAlO1xuICAgICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICB9XG5cbiAgICAmIC50aWxlX19jb250ZW50IHtcbiAgICAgIHBhZGRpbmc6IHZhcigtLXNwYWNpbmctbSk7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICB9XG5cbiAgJi50aWxlLS1tZWRpdW0ge1xuICAgIC0taGVpZ2h0OiAyNDBweDtcbiAgfVxuXG4gICYudGlsZS0tbGFyZ2Uge1xuICAgIC0taGVpZ2h0OiA0MzNweDtcbiAgfVxufVxuXG4vKipcbiAqIFByaW50IHN0eWxlc2hlZXRcbiAqL1xuXG5AbWVkaWEgcHJpbnQge1xuICAudGlsZSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogbm9uZTtcbiAgICBjb2xvcjogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuICAgIG1pbi1ibG9jay1zaXplOiAwO1xuICB9XG59XG4iXX0= */