@pnx-mixtape/mxds 0.0.5 → 0.0.6

package/dist/build/sidebar.css

@@ -0,0 +1,105 @@
+/**
+ * Sidebar
+ */
+
+@layer design-system.layouts {
+    .grid--sidebar:where(:not(:has(> aside))) {
+      grid-column: narrow;
+    }
+      @media (min-width: 720px) {
+
+    .grid--sidebar:where(:has(> aside)) {
+        display: grid;
+        grid-template-columns: 76ch auto;
+        grid-template-columns: var(--container-max-width, 76ch) auto;
+        grid-gap: var(--sidebar-gap, var(--gap));
+        gap: var(--sidebar-gap, var(--gap));
+    }
+      }
+
+        @media (min-width: 720px) {
+
+        @media (min-width: 946px) {
+
+        @media (max-color:2147477350) and (max-color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+
+        @media not all and (min-width: 946px) {
+
+        @media (max-color:2147477350) and (color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+        }
+
+        @media not all and (min-width: 720px) {
+
+        @media (min-width: 946px) {
+
+        @media (color:2147477350) and (max-color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+
+        @media not all and (min-width: 946px) {
+
+        @media (color:2147477350) and (color:2147477350) {
+
+    .grid--sidebar:where(:has(> aside)) {
+          --sidebar-gap: 18ch;
+    }
+        }
+        }
+        }
+          .grid--sidebar.grid--sidebar-rev:where(:has(> aside)) > :is(section, aside):first-child {
+            order: 2;
+          }
+
+          .grid--sidebar.grid--sidebar-rev:where(:has(> aside)) > :is(section, aside):last-child {
+            order: 1;
+          }
+        @media (min-width: 720px) {
+            .grid--sidebar.grid--sidebar-rev-lg:where(:has(> aside)) > :is(section, aside):first-child {
+              order: 2;
+            }
+
+            .grid--sidebar.grid--sidebar-rev-lg:where(:has(> aside)) > :is(section, aside):last-child {
+              order: 1;
+            }
+        }
+        @media (min-width: 946px) {
+
+      .grid--sidebar:where(:has(> aside)):is(.grid--sidebar-rev, .grid--sidebar-rev-lg) {
+          grid-template-columns: auto 76ch;
+          grid-template-columns: auto var(--container-max-width, 76ch);
+      }
+        }
+
+    .grid--sidebar:where(:has(> aside:first-child)) {
+      grid-template-columns: auto 76ch;
+      grid-template-columns: auto var(--container-max-width, 76ch);
+    }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .page__sidebar {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpZGViYXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxtQkFBbUI7SUFDckI7TUFHRTs7SUFERjtRQUVJLGFBQWE7UUFDYixnQ0FBNEQ7UUFBNUQsNERBQTREO1FBQzVELHdDQUFtQztRQUFuQyxtQ0FBbUM7SUFzQ3ZDO01BakNFOztRQUhFOztRQUFBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBOztRQUZBOztRQUFBOztJQU5KO1VBT00sbUJBQW1CO0lBbUN6QjtRQWxDSTtRQUFBO1FBQUE7O1FBRkE7O1FBQUE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7O1FBRkE7O1FBQUE7O0lBTko7VUFPTSxtQkFBbUI7SUFtQ3pCO1FBbENJO1FBQUE7UUFBQTtVQUtFO1lBQ0UsUUFBUTtVQUNWOztVQUVBO1lBQ0UsUUFBUTtVQUNWO1FBS0Y7WUFFSTtjQUNFLFFBQVE7WUFDVjs7WUFFQTtjQUNFLFFBQVE7WUFDVjtRQUVKO1FBSUE7O01BREY7VUFFSSxnQ0FBNEQ7VUFBNUQsNERBQTREO01BRWhFO1FBREU7O0lBSUo7TUFDRSxnQ0FBNEQ7TUFBNUQsNERBQTREO0lBQzlEO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6InNpZGViYXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBTaWRlYmFyXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5ncmlkLS1zaWRlYmFyIHtcbiAgICAmOndoZXJlKDpub3QoOmhhcyg+IGFzaWRlKSkpIHtcbiAgICAgIGdyaWQtY29sdW1uOiBuYXJyb3c7XG4gICAgfVxuXG4gICAgJjp3aGVyZSg6aGFzKD4gYXNpZGUpKSB7XG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogdmFyKC0tY29udGFpbmVyLW1heC13aWR0aCwgNzZjaCkgYXV0bztcbiAgICAgICAgZ2FwOiB2YXIoLS1zaWRlYmFyLWdhcCwgdmFyKC0tZ2FwKSk7XG5cbiAgICAgICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAgICAgLS1zaWRlYmFyLWdhcDogMThjaDtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmLmdyaWQtLXNpZGViYXItcmV2IHtcbiAgICAgICAgJiA+IDppcyhzZWN0aW9uLCBhc2lkZSkge1xuICAgICAgICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICAgICAgb3JkZXI6IDI7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJjpsYXN0LWNoaWxkIHtcbiAgICAgICAgICAgIG9yZGVyOiAxO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmLmdyaWQtLXNpZGViYXItcmV2LWxnIHtcbiAgICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICAgICYgPiA6aXMoc2VjdGlvbiwgYXNpZGUpIHtcbiAgICAgICAgICAgICY6Zmlyc3QtY2hpbGQge1xuICAgICAgICAgICAgICBvcmRlcjogMjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjpsYXN0LWNoaWxkIHtcbiAgICAgICAgICAgICAgb3JkZXI6IDE7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgICY6aXMoLmdyaWQtLXNpZGViYXItcmV2LCAuZ3JpZC0tc2lkZWJhci1yZXYtbGcpIHtcbiAgICAgICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvIHZhcigtLWNvbnRhaW5lci1tYXgtd2lkdGgsIDc2Y2gpO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjp3aGVyZSg6aGFzKD4gYXNpZGU6Zmlyc3QtY2hpbGQpKSB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gdmFyKC0tY29udGFpbmVyLW1heC13aWR0aCwgNzZjaCk7XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5wYWdlX19zaWRlYmFyIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */

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,106 @@
+/**
+ * Tabs
+ */
+
+@layer design-system.defaults {
+  :is(mx-tabs, mx-tabs mx-dropmenu) {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  .tabs {
+    position: relative;
+  }
+      @media (min-width: 720px) {
+
+    .tabs .tab__list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-xxs);
+    }
+      }
+
+      .tabs .tab__list .tab__item {
+        padding: 0;
+        margin: 0;
+      }
+
+      .tabs .tab__list .button {
+        display: block;
+        outline-offset: var(--outline-offset);
+        min-inline-size: 0;
+        min-inline-size: var(--tab-min-width, 0);
+        background-color: var(
+          --tab-background,
+          var(--background, var(--colour-background))
+        );
+        color: var(
+          --tab-foreground,
+          var(--foreground, var(--colour-foreground))
+        );
+      }
+
+        .tabs .tab__list .button[aria-selected="true"] {
+          background-color: var(
+            --tab-active-background,
+            var(--colour-background-alt)
+          );
+          color: var(--tab-active-foreground, var(--colour-foreground));
+        }
+
+    .tabs .tab__panel {
+      inline-size: 100%;
+    }
+
+      .tabs .tab__panel:is(:focus-visible, :focus) {
+        outline-offset: var(--outline-offset);
+      }
+
+      .tabs .tab__panel[inert] {
+        display: none;
+      }
+      @media (min-width: 720px) {
+        .tabs.tabs--lined .tab__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));
+        }
+
+          .tabs.tabs--lined .tab__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) {
+        .tabs.tabs--centered .tab__list {
+          align-content: center;
+          justify-content: center;
+          place-content: center;
+        }
+      }
+
+    .tabs.tabs--same-height {
+      display: grid;
+    }
+
+      .tabs.tabs--same-height .tab__panel {
+        grid-column-start: 1;
+        grid-row-start: 2;
+        z-index: 2;
+        transition: opacity 0.2s ease-in-out;
+      }
+
+        .tabs.tabs--same-height .tab__panel[hidden] {
+          display: block;
+          opacity: 0;
+          z-index: 1;
+        }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxjQUFjO0VBQ2hCO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLGtCQUFrQjtFQXlGcEI7TUF0Rkk7O0lBREY7UUFFSSxhQUFhO1FBQ2IsZUFBZTtRQUNmLHVCQUF1QjtJQTZCM0I7TUE1QkU7O01BRUE7UUFDRSxVQUFVO1FBQ1YsU0FBUztNQUNYOztNQUVBO1FBQ0UsY0FBYztRQUNkLHFDQUFxQztRQUNyQyxrQkFBd0M7UUFBeEMsd0NBQXdDO1FBQ3hDOzs7U0FHQztRQUNEOzs7U0FHQztNQVNIOztRQVBFO1VBQ0U7OztXQUdDO1VBQ0QsNkRBQTZEO1FBQy9EOztJQUlKO01BQ0UsaUJBQWlCO0lBU25COztNQVBFO1FBQ0UscUNBQXFDO01BQ3ZDOztNQUVBO1FBQ0UsYUFBYTtNQUNmO01BSUE7UUFDRTtVQUNFO29EQUMwQztVQUQxQztvREFDMEM7UUFRNUM7O1VBTkU7WUFDRSw0REFBNEQ7WUFDNUQ7c0RBQzBDO1lBRDFDO3NEQUMwQztZQUMxQyxtQkFBbUI7VUFDckI7TUFFSjtNQUlBO1FBQ0U7VUFDRSxxQkFBcUI7VUFBckIsdUJBQXFCO1VBQXJCLHFCQUFxQjtRQUN2QjtNQUNGOztJQUdGO01BQ0UsYUFBYTtJQWNmOztNQVpFO1FBQ0Usb0JBQW9CO1FBQ3BCLGlCQUFpQjtRQUNqQixVQUFVO1FBQ1Ysb0NBQW9DO01BT3RDOztRQUxFO1VBQ0UsY0FBYztVQUNkLFVBQVU7VUFDVixVQUFVO1FBQ1o7QUFJUiIsImZpbGUiOiJ0YWJzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGFic1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgOmlzKG14LXRhYnMsIG14LXRhYnMgbXgtZHJvcG1lbnUpIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLnRhYnMge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICAgICYgLnRhYl9fbGlzdCB7XG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXh4cyk7XG4gICAgICB9XG5cbiAgICAgICYgLnRhYl9faXRlbSB7XG4gICAgICAgIHBhZGRpbmc6IDA7XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgIH1cblxuICAgICAgJiAuYnV0dG9uIHtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIG91dGxpbmUtb2Zmc2V0OiB2YXIoLS1vdXRsaW5lLW9mZnNldCk7XG4gICAgICAgIG1pbi1pbmxpbmUtc2l6ZTogdmFyKC0tdGFiLW1pbi13aWR0aCwgMCk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcihcbiAgICAgICAgICAtLXRhYi1iYWNrZ3JvdW5kLFxuICAgICAgICAgIHZhcigtLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSlcbiAgICAgICAgKTtcbiAgICAgICAgY29sb3I6IHZhcihcbiAgICAgICAgICAtLXRhYi1mb3JlZ3JvdW5kLFxuICAgICAgICAgIHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSlcbiAgICAgICAgKTtcblxuICAgICAgICAmW2FyaWEtc2VsZWN0ZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoXG4gICAgICAgICAgICAtLXRhYi1hY3RpdmUtYmFja2dyb3VuZCxcbiAgICAgICAgICAgIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kLWFsdClcbiAgICAgICAgICApO1xuICAgICAgICAgIGNvbG9yOiB2YXIoLS10YWItYWN0aXZlLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC50YWJfX3BhbmVsIHtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuXG4gICAgICAmOmlzKDpmb2N1cy12aXNpYmxlLCA6Zm9jdXMpIHtcbiAgICAgICAgb3V0bGluZS1vZmZzZXQ6IHZhcigtLW91dGxpbmUtb2Zmc2V0KTtcbiAgICAgIH1cblxuICAgICAgJltpbmVydF0ge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIH1cblxuICAgICYudGFicy0tbGluZWQge1xuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICAmIC50YWJfX2xpc3Qge1xuICAgICAgICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG5cbiAgICAgICAgICAmIC5idXR0b24ge1xuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cykgdmFyKC0tYm9yZGVyLXJhZGl1cykgMCAwO1xuICAgICAgICAgICAgYm9yZGVyOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICAgICAgICBib3JkZXItYmxvY2stZW5kOiAwO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICYudGFicy0tY2VudGVyZWQge1xuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICAmIC50YWJfX2xpc3Qge1xuICAgICAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgICYudGFicy0tc2FtZS1oZWlnaHQge1xuICAgICAgZGlzcGxheTogZ3JpZDtcblxuICAgICAgJiAudGFiX19wYW5lbCB7XG4gICAgICAgIGdyaWQtY29sdW1uLXN0YXJ0OiAxO1xuICAgICAgICBncmlkLXJvdy1zdGFydDogMjtcbiAgICAgICAgei1pbmRleDogMjtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjJzIGVhc2UtaW4tb3V0O1xuXG4gICAgICAgICZbaGlkZGVuXSB7XG4gICAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgICAgb3BhY2l0eTogMDtcbiAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/tabs.entry.js

@@ -0,0 +1,161 @@
+import "./drop-menu.entry.js";
+class Tabs extends HTMLElement {
+  constructor() {
+    super();
+    this.tabFocus = 0;
+    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();
+  }
+  connectedCallback() {
+    if (!this.triggers || !this.panels) return;
+    this.locationHash = window.location.hash;
+    this.tabs = /* @__PURE__ */ new Map();
+    this.triggers.forEach((tab) => {
+      const id = tab.getAttribute("aria-controls");
+      const panel = this.querySelector(`#${id}`);
+      const button = this.dropMenu.querySelector(
+        `[aria-controls=${id}]`
+      );
+      if (id && panel && button) {
+        const labelId = `tab-label-${id}`;
+        tab.setAttribute("id", labelId);
+        tab.setAttribute("role", "tab");
+        tab.setAttribute("aria-selected", "false");
+        tab.setAttribute("tab-index", "-1");
+        panel.setAttribute("aria-labelledby", labelId);
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("tab-index", "0");
+        this.tabs.set(id, { panel, tab, button });
+      }
+    });
+    const { signal } = this.controller;
+    this.menu.addEventListener("click", this.handleClick, { signal });
+    this.menu.addEventListener("keydown", this.handleKeydown, { signal });
+    this.dropMenu.addEventListener(
+      "drop-menu-select",
+      this.handleDropMenuSelect,
+      { 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 dropMenu = this.querySelector(".drop-menu");
+    if (!dropMenu) {
+      throw new Error(`${this.localName} must contain a .drop-menu`);
+    }
+    return dropMenu;
+  }
+  get dropMenuTrigger() {
+    const trigger = this.querySelector(
+      ".drop-menu__trigger"
+    );
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a .drop-menu__trigger`);
+    }
+    return trigger;
+  }
+  get menu() {
+    const menu = this.querySelector(".tab__list");
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a .tab__list`);
+    }
+    menu.setAttribute("role", "tablist");
+    return menu;
+  }
+  get triggers() {
+    const triggers = this.querySelectorAll(".tab__list button");
+    if (!triggers.length) {
+      throw new Error(`${this.localName} must contain .tab__list buttons`);
+    }
+    return triggers;
+  }
+  get panels() {
+    const panels = this.querySelectorAll(".tab__panel");
+    if (!panels.length) {
+      throw new Error(`${this.localName} must contain .tab__panel's`);
+    }
+    return panels;
+  }
+  get active() {
+    return this.querySelector('[aria-selected="true"]');
+  }
+  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 */\nimport \"../../DropMenu/Elements/DropMenu\"\nimport type { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\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  locationHash?: string\n  tabFocus?: number = 0\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.triggers || !this.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.triggers.forEach((tab: HTMLButtonElement): void => {\n      const id: string = tab.getAttribute(\"aria-controls\")\n      const panel: HTMLElement = this.querySelector(`#${id}`)\n      const button: HTMLButtonElement = this.dropMenu.querySelector(\n        `[aria-controls=${id}]`,\n      )\n      if (id && panel && button) {\n        const labelId = `tab-label-${id}`\n        tab.setAttribute(\"id\", labelId)\n        tab.setAttribute(\"role\", \"tab\")\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"aria-labelledby\", labelId)\n        panel.setAttribute(\"role\", \"tabpanel\")\n        panel.setAttribute(\"tab-index\", \"0\")\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.menu.addEventListener(\"click\", this.handleClick, { signal })\n    this.menu.addEventListener(\"keydown\", this.handleKeydown, { signal })\n\n    this.dropMenu.addEventListener(\n      \"drop-menu-select\",\n      this.handleDropMenuSelect,\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  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(): HTMLDivElement | null {\n    const dropMenu: HTMLDivElement | null = this.querySelector(\".drop-menu\")\n    if (!dropMenu) {\n      throw new Error(`${this.localName} must contain a .drop-menu`)\n    }\n    return dropMenu\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \".drop-menu__trigger\",\n    )\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a .drop-menu__trigger`)\n    }\n    return trigger\n  }\n\n  get menu(): HTMLDivElement | null {\n    const menu: HTMLDivElement | null = this.querySelector(\".tab__list\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a .tab__list`)\n    }\n    menu.setAttribute(\"role\", \"tablist\")\n    return menu\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.querySelectorAll(\".tab__list button\")\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain .tab__list buttons`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll(\".tab__panel\")\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain .tab__panel's`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\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= */